Home > Developer > Web Develop
First, the DOM Foundation
(1) What is DOM? The DOM, or document, is used to manipulate elements on the page, such as manipulating Div fetches, modifying styles, and so on. Is the part of JS, or a set of specifications.
(2) Browser support
There are now 3 main browsers, namely Ie,chrome,firefox.
IE: In the ie6-8 version, the support for the DOM is almost 10%, but by the IE9 there is a qualitative leap.
Chrome: Somewhere between the two, around 60%, the DOM is not so good or bad to support.
Firefox: Support for Dom can be described in almost 99%.
Second, DOM node
In the CSS stage, we think it is a label;
In the JS phase, we think that is the element;
In the DOM phase, we think of nodes.
(1) ChildNodes
Get child nodes
In particular, in Chrome and IE9, the higher the version of the problem, they will be the blank text also as a child node, but in the ie6-8 will run normally, the correct number of child nodes, very strange.
Text nodes, plain text, or blank text, such as AAAAA
ELEMENT nodes, such as <span>aaaaaa</span>
NodeType, type of node
Nodetype==3--> text node
nodetype==1--> element Node
Use ChildNodes and NodeType together
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Sub-nodes </title>
<script>
Window.onload = function ()
{
var Oul=document.getelementbyid (' Ul1 ');
alert (oUl.childNodes.length);/* in Chrome, empty text is also treated as a child node */
Nodetype==3--> text node
nodetype==1--> element Node
for (Var i=0;i<oul.childnodes.length;i++)
{
alert (Oul.childnodes[i].nodetype);
Determine if a child node is an element node
if (oul.childnodes[i].nodetype==1)
{
oul.childnodes[i].style.background= ' Red ';
}
}
};
</script>
<body>
<ul id= "UL1" >
<li></li>
<li></li>
</ul>
AAAAAAAA text node
<SPAN>AAAAAAAA element Node </span>
</body>
children--is very useful, it only includes element nodes but does not include text nodes
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Sub-nodes </title>
<script>
Window.onload = function ()
{
var Oul=document.getelementbyid (' Ul1 ');
alert (oUl.childNodes.length);/* in Chrome, empty text is also treated as a child node */
Nodetype==3--> text node
nodetype==1--> element Node
/*for (Var i=0;i<oul.childnodes.length;i++)
{
alert (Oul.childnodes[i].nodetype);
Determine if a child node is an element node
if (oul.childnodes[i].nodetype==1)
{
oul.childnodes[i].style.background= ' Red ';
}
}*/
alert (oUl.children.length);
};
</script>
<body>
<ul id= "UL1" >
<li></li>
<li></li>
</ul>
AAAAAAAA text node
<SPAN>AAAAAAAA element Node </span>
</body>
(2) ParentNode, as long as the parent node is unchanged, is not changed
Example: Click the link to hide the entire Li
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> parent node's application </title>
<script>
Window.onload = function ()
{
var aa=document.getelementsbytagname (' a ');
for (Var i=0;i<aa.length;i++)
{
Aa[i].onclick = function ()
{
This.parentnode.style.display= "None";/*this refers to the parent node of a is <li>
};
}
};
</script>
<body>
<ul id= "UL1" >
<LI>AAAAAAA <a href= "javascript:;" > Hide </a></li>
<LI>BBBBBBB <a href= "javascript:;" > Hide </a></li>
<LI>CCCCCCC <a href= "javascript:;" > Hide </a></li>
<LI>DDDDDDD <a href= "javascript:;" > Hide </a></li>
<li>eeeeeee <a href= "javascript:;" > Hide </a></li>
</ul>
AAAAAAAA text node
<SPAN>AAAAAAAA element Node </span>
</body>
(3) offsetparent--and parentnode are different, it is to get the element used to locate the parent, not necessarily the previous parent node, can only be the parent of the location, may be the superior may be superior and so on
Get the actual position of the element on the page
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>offsetParent</title>
<style>
#div1 {
width:200px;
height:200px;
Background-color: #CCC;
margin:100px;
position:relative;
}
#div2 {
width:100px;
height:100px;
background-color:red;
Position:absolute;
left:50px;
top:50px;
}
</style>
<script>
Window.onload = function ()
{
var Odiv2=document.getelementbyid (' Div2 ');
alert (odiv2.offsetparent);
};
</script>
<body>
<div id= "Div1" >
<div id= "Div2" ></div>
</div>
</body>
"JS Learning note" Dom Foundation-byte point, parent node
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
