JS's parentnode and offsetparent

JS has two attributes parentnode and offsetparent, presumably the difference we all know, can use or there are some places to pay attention to, especially the latter, want to know? Keep looking down.

ParentNode refers to the parent node, Element.parentnode, gets the parent node of an element, where the parent node, only one, refers to the nearest immediate parent node. For example, we often have this demand: A list, click Delete Delete a column, as follows:

<ul id= "List" >   <li> I'm mu Ching <span> delete </span></li>   <li> I'm mu Ching <span> Delete </span></li>   <li> I'm mu Ching <span> delete </span></li></ul>var olist = document.getElementById ("list"); var aspan = Olist.getelementsbytagname ("span");  for (var i=0;i<aspan.length;i++) {     function() {         this. ParentNode.style.display = "None";    }}

The example is simple, click let the corresponding parent element is hidden. See the next attribute.

OffsetParent here is the parent node, which refers to the parent node, which means that an element is relative to who is positioned, who is his father.

And it's very similar to the properties of offsetleft \ OffsetTop, they refer to the distance from the former element to offsetparent.

However, the interpretation of this property by different browsers is somewhat different:( when the element will be relative to other people's positioning, in fact, there is a parent element set relative positioning, absolute positioning when (Relative,absolute), the parent element is called the positioning of the parent, this should all understand. )

Under Other browsers:

when no parent is located: offsetParent refers to the body.

when a parent is located : OffsetParent refers to locating the parent

IE7 below:

There are two different cases when there is no parent location:

If you don't have a position : offsetParent refers to body

If you have a position : Offsetleft refers to HTML

If there is a location parent:

If you don't have a position : offsetParent refers to body

If you have a position : Offsetleft refers to locating the parent

IE7 below, if layout is triggered by a parent of the current element, then offsetparent will be directed to the parent node that triggered the layout attribute

So we need to pay attention to these details when we write the code, we often have the need to write code, get an element to the browser distance, generally we will use the Offsetleft \ OffsetTop, but this only applies when the page does not have the parent to locate the time, When we have a lot of code, and some of the elements may be set to be positioned, this value is probably not allowed. So how can you get exactly the distance from the element to the document?

Here's a look at the picture:

Diiv1 the distance to the document, the gray box is the document, which has relative positioning of the parent 2 and 3, how do we find the distance from the Div1 to the document? By observing, we can know the distance to the document, exactly equal to the distance of DIV1 to its location parent div2, plus div2 to its location parent div3 distance, plus div3 to the document distance, that is, the 1+2+3 in the diagram; So we can first find this element to its own location of the parent 2 distance, and then find it to locate the parent 2 to its own location of the parent 3 distance. The final distance to the document is calculated in turn. (Offsetparent of body does not exist)

We can summarize this code.

// obj is a vector that is used to place each location parent, which is changing, as shown in the above graph, at first it is div1, when the distance from Div1 to Div2 is calculated, then it becomes div2, then div2 to the location of the parent Div3 distance. Loop to the end without locating the parent, it becomes null, and then stops the Loop var left = 0 while (obj) {    //  When this element node exists, loop the code below left    + = Obj.offsetleft;  // the distance from each element to the parent is summed up    . obj = obj.offsetparent;    // }

In order to also be able to find the distance in the vertical direction to the document, but also for more convenient, we can encapsulate into a function:

    function GetPos (obj) {         var pos = {left:0, top:0};          while (obj) {            + = obj.offsetleft            ; + = obj.offsettop            ; = obj.offsetparent;        }                return pos;           }

This function is often used, like our waterfall flow, which is also required.

Finally add a note:

offsetwidth \ ClientWidth

Style.width:width (style broadband units)
clientwidth:width+padding (without unit visible area width)
Offsetwidth:width+padding+border (occupies a wide position)

Well, hope today's sharing can bring you new experience.

JS's parentnode and offsetparent