JS under Firstelementchild firstchild and childnodes and children methods

One

< Div >    < P >123</p></div>

In the above code, if you use the following JS code

var odiv=document.getelementbytagname ("div") [0];alert (oDiv.firstChild.nodeName)

Below IE9, alert comes out is P (p tag name), but in modern browser, such as CHROME,FF,IE11, and so on, because will <div> <p> two tags between the blank node also parsed out, so will alert out # Text (because the white space node belongs to the text node)

If you change the HTML demo to the following, the results will be the same regardless of the old browser or modern browser.

< Div >< P >123</p></div>

Since there is no space between the DIV and the P tag, the P tag is output in both ie678 and modern browsers when executing the above JS code.

Two

In the usual writing JS, we often want to use a method to get directly to the parent element of the first child element node, as in the above example, using FirstChild can actually achieve this function

<div><p>123</p></div>

var first=document.getelementbytagname ("div") [0].firstchild

So we can get to the first element child node, but when there is a blank node between the Div and P, first gets to the empty node instead of the element node.

So, Dom extends a firstelementchild method that can get to the first child element node of the parent element

< Div >    < P >123</p></div>

var first=document.getelementbytagname ("div") [0].firstelementchild

Even if there is a blank node in the div and P tags, the first child element node p of the Div can still be obtained normally using the Firstelementchild method.

But again, Firstelementchild this method is compatible in modern browsers, but there is no such method in ie678, and once this method is used in ie678 , it will go wrong.

Three

Although the Firstelementchild method is incompatible in ie678, there is one way to do this, which is the children method.

The tested children method is compatible in all major browsers, including ie678, and it also implements Firstelementchild functionality

< Div >    < P >123</p></div>

var first=document.getelementbytagname ("div") [0].children[0]

Therefore, in the future when writing JS, if you want to get to the element node of child elements, it is best to use the children method, ChildNodes method and FirstChild method in modern browsers, will be the element tag in the blank node detection, In general, we use both methods to obtain elements of the element node, the blank node will cause us a lot of unnecessary bugs, and the children method is to detect only element elements node, to prevent the case, So we recommend that you use the Children method later to replace the childnodes.

Above excerpt from: http://www.cnblogs.com/jelly7723/p/4871849.html

Iv. Additions:

Compatible with both high and low versions of browsers:

<ulID= "UL1">    <Li><span>Dgfgfhgh</span></Li>    <Li></Li>    <Li></Li></ul>

window.onload=function() {        oUl1=document.getelementbyid ("UL1");         if (oul1.firstelementchild) {            oUl1.firstElementChild.style.background= ' red ';        } Else {            OUl1.firstChild.style.background= ' red ';        }    }

Note:firstchild contains note nodes in IE.

JS under Firstelementchild firstchild and childnodes and children methods