Undefined childNode

Question

I have some code in html and i want to print the tags using a recursive function. The problem is that childNodes returns one element which is undefined for each li item.

Code.

        var div5 = document.getElementById('div5');

        function printItem(item, paddingLevel) {

            console.log(paddingLevel + item.tagName); 
            paddingLevel += " ...... ";


            var childs = item.childNodes;

            for (var i = 0; i < childs.length; i++) {
                printItem(childs[i], paddingLevel);
            }

        }

        printItem(div5, "");

<div id="div5">
      <ul>
           <li>Testing: 0</li>
           <li>Testing: 1</li>
           <li>Testing: 2</li>
           .......
           <li>Testing: 9</li>
      </ul>
 </div>

Result in console:

DIV
...... UL
......  ...... LI
......  ......  ...... undefined

Thank you and have a great day !!!

Answer 1

That is because childNodes doesn't filter text nodes which don't have tagName property.

use condition to skip those nodes like this:

var div5 = document.getElementById('div5');

function printItem(item, paddingLevel) {

    if (item.nodeType == document.ELEMENT_NODE) {
        console.log(paddingLevel + item.tagName);
        paddingLevel += " ...... ";


        var childs = item.childNodes;

        for (var i = 0; i < childs.length; i++) {
            printItem(childs[i], paddingLevel);
        }

    }

}

printItem(div5, "");