The first is the parentelement attribute, which is a good understanding of the hierarchical relationship defined in the DOM hierarchy, and if element A contains element B, then element B can get element a by parentelement property.
The main point here is the offsetparent attribute, which is not clearly explained in the MSDN documentation, which makes it more difficult to understand this attribute. These days on the Internet to find some information to see, coupled with their own some of the tests, this attribute has a little understanding, summed up here.
To understand the offsetparent attribute, first understand the name "anchored element", which means that the position attribute is set to the element, and the value of the position style property equals absolute, relative, fixed One of the elements.
There are two things you can do when you use the Offsetparent property to get a parent object:
1, the element itself has been positioned
If the element itself is positioned, then the Offsetparent property returns the parent element that this element has already positioned, and returns the Body object, such as if no parent element is already positioned, for example:
Copy Code code as follows:
<body>
<p>
<div>
<span id= "obj1" style= "Position:absolute" ></span>
</div>
<div id= "pObj1" style= "Position:absolute" >
<span id= "Obj2" style= "Position:absolute" ></span>
</div>
</p>
</body>
Obj1.offsetparent returns the Body object
Obj2.offsetparent return PObj1 Object
2, the element is not positioned
If the element is not positioned, offsetparent not only finds the parent element that is already positioned but also looks for the parent element of the type TD and TABLE, and returns the Body object if any of these three parent elements are found to return this element, for example:
Copy Code code as follows:
<table width= "border=" 0 ">
<tr>
<TD id= "TD1" >
<div id= "PObj1" >
<span id= "Obj1" ></span>
</div>
</td>
</tr>
<tr>
<td>
<div id= "PObj2" style= "position:relative" >
<span id= "Obj2" ></span>
</div>
</td>
</tr>
</table>
Obj1.offsetparent return TD1 Object
Obj2.offsetparent return PObj2 Object
In the properties of the DOM element, there is parentnode this attribute, in fact, this property and the Parentelement attribute is a meaning, parentelement attribute is specific to IE, the standard is the use of the ParentNode properties, and children And childnodes, children is unique to IE, ChildNodes is supported by other browsing.
