JS under Firstelementchild and Firstchild,children usage __js

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 with P (p tag name), but in modern browsers, such as CHROME,FF,IE11, and so on, because the blank node between the <div> <p> two tags is parsed, it will alert out # Text (because the blank node belongs to the text node)

If you change the HTML demo to the following, the results are the same in both the old browser and the modern browser.

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

Because there is no white space between the div and P tags, the p tag is output in both ie678 and modern browsers when the above JS code is executed.

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, the use of 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 white space between the Div and P, first gets to the empty node instead of the second element node.

So the DOM expands a Firstelementchild method that gets 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 white space node in the div and P tags, using the Firstelementchild method can still get to the first child element node p of the div normally.

But here's the problem, Firstelementchild this method is compatible in modern browsers, but there is no such method in ie678, and once you use this method in ie678 you will get an error.

Three

Although the Firstelementchild method is incompatible in the ie678, there is another method, the children method.

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

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

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

So, when you write JS later, if you want to obtain the element node of the child elements, it is best to use the children method, ChildNodes method and FirstChild method in the modern browser, will be the element tag in the blank node detection, Generally we use both methods in order to get the element node of the elements, the blank node will give us a lot of unnecessary bugs, and the children method is to detect only element elements node, to prevent the cause, So we recommend using children method to replace ChildNodes.

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