Javascript childnodes, firstChild, lastChild get children of elements

The html elements in the webpage are internally and externally stacked or nested. The nesting depth is usually within ten layers, in most cases six or seven layers. It is said that the deep nesting is not conducive to crawling by search engine spiders. The relationship between the layer and nested layer is the parent-child, the outer layer is the parent, and the inner layer is the child. If you go to the inner layer of the child layer, it is the child of the child; according to this relationship, javascript can traverse all elements in a web page.

All child nodes of an html element in javascript are represented by childNodes. If you want to specifically represent a child, you need to use a subscript (index) like an array; for operation, javascript specifically uses firstChild to represent the first child, use lastChild to represent the last child, so if you only need to operate on the first or last child of an element, you don't need to get all children, just use firstChild or lastChild. In order to facilitate the application in web design, the following will give examples of childNodes, firstChild or lastChild.

1. The html code is used in the example

<ul id="ulId"><li>ul's first childNode(firstChild)</li><li>ul's second childNode</li><li>ul's last childNode(lastChild)</li></ul>

2. Javascript firstchild(Get the first child of ul)

var ul = document.getElementById("ulId");
       var firstChildNode = ul.firstChild;
       alert(firstChildNode.innerHTML);

The code first gets the parent element ul, then gets the first child of ul, and finally outputs the text of the first child of ul. The output result is: ul's first childNode(firstChild), indicating that the code is correct.

Tip: If the first child is a space, newline, tab, etc., browsers that follow the W3C standard will also treat them as children, if they output their innerHTML, they will display undefined; old versions of Internet Explorer do not treat them as child. Same for lastChildNode and childNodes.

3. Lastchild javascript(Get the last child of ul)

var ul = document.getElementById("ulId");
       var lastChildNode = ul.lastChild;
       alert(lastChildNode.innerHTML);

Output: ul's last childNode(lastChild)

4. Javascript childnodes(Get all children of ul and traverse)

var ul = document.getElementById("ulId");
       for (var i = 0; i < ul.childNodes.length; i++) {
              document.write(ul.childNodes[i].innerHTML + "<br />");
       }

The code gets all childNodes of ul, and then traverses with a for loop, outputting the innerHTML of each child in the loop; in practical applications, you only need to add the corresponding conditions in the for loop.

Cannot read property childnodes of undefined javascript

If there is an error: cannot read property childnodes of undefined, it is caused by spaces, line breaks, tabs, etc. in the child node, you need to filter them out, just add if(ul.childNodes[i].innerHTML != undefined) , the complete code is:

for (var i = 0; i < ul.childNodes.length; i++) {
              if (ul.childNodes[i].innerHTML != undefined) {
                     document.write(ul.childNodes[i].innerHTML + "<br />");
              }
       }