JavaScript meaning of #text in htmlNode.childNodes[i].nodeName

Question

I am new to JavaScript and when I was playing around with the DOM model I was getting confused when I wanted to display all nodeNames from the HTML childNodes. There is a nodeName called #text when i have an head tag and when I delete the complete head tag there is the normal HEAD and BODY nodeName. What means the #text nodeName especally when I have a head tag?

Here is my code:

<html>
    <head>
    </head>
    <body>          
        <p id="p1">SOME TEXT</p>    
        <button type="button" onclick="javascript:changeNode()">Click </button>
        <script type="text/javascript">
        function changeNode() {
            var htmlNode = document.documentElement;                
            var anzahl = htmlNode.childNodes.length;

            var html_text = "<p>";
            for(var i = 0;i<anzahl;i++){
                html_text += " " + htmlNode.childNodes[i].nodeName +";";
            }
            html_text += "</p>";
            document.getElementById("p1").innerHTML = html_text;
        }
        </script>
    </body>
</html>

The output of it is (with the head tag):

HEAD; #text; BODY;

The output of it is (without the head tag):

HEAD; BODY;

Possible duplicate of [What are HTML DOM #text elements?](http://stackoverflow.com/questions/21357004/what-are-html-dom-text-elements) — Alessio Cantarella, Feb 04 '16 at 11:36

score 3 · Answer 1 · answered Feb 04 '16 at 11:34

3

What means the #text nodeName especally when i have a head tag.

these are the empty line breaks that you have unintentionally introduced in your markup.

Use children instead of childNodes if you don't want to include text nodes.

answered Feb 04 '16 at 11:34

gurvinder372

66,980
10
72
94

score 1 · Accepted Answer · answered Feb 04 '16 at 11:45

Whitespace inside elements is considered as #text, and text is considered as nodes. Remove the space between </head> & <body> tag like below:

<html>
 <head></head><body>         
    <p id="p1">SOME TEXT</p>    
    <button type="button" onclick="javascript:changeNode()">Click </button>
 </body>

This will give you the output HEAD,BODY

JavaScript meaning of #text in htmlNode.childNodes[i].nodeName

2 Answers2