JavaScript text nodes properties

Question

I'm little confused about properties of text nodes in JavaScript. Let say that I have this piece of html:

<html lang="en-US">
<head>
    <title>JavaScript test</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body onload="load()">
    <div>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </div>
    <ul>
        <li>1.</li>
        <li>2.</li>
    </ul>
</body>

And onload() function:

function load()
{
    var bodyChildren = document.childNodes[0].childNodes;
    for(var i = 0; i < bodyChildren.length; i++) 
    {
        alert(bodyChildren[i].nodeType
            + ": " + bodyChildren[i].nodeName
            + ": " + bodyChildren[i].nodeValue);
    }
}

This http://www.w3schools.com/js/js_htmldom_navigation.asp tells: "nodeValue for text nodes is the text itself", but I'm getting this output:

3: #text: 
1: DIV: null
3: #text: 
1: UL: null
3: #text:

Can you explain me why nodeValue returns null for element node and "nothing" for text node?

Edit: The stuff about white spaces is nicely described here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

I wonder how `document.childNodes[0]` gets you the body element? — Bergi, Mar 24 '15 at 22:18
Really, I had to change it to `document.body.childNodes` to get it working, but if it works for you it's probably fine ? — adeneo, Mar 24 '15 at 22:31
Yes it also works for me. But I'm not having problem with children of body, but with text content of children nodes. I'll go through your and other answers. — Majak, Mar 24 '15 at 22:34

adeneo · Answer 1 · 2015-03-24T22:24:44.773

That's what nodeValue does according to the specification, it returns this

Comment               - content of the comment
Document              - null
DocumentFragment      - null
DocumentType          - null
Element               - null
NamedNodeMap          - null
EntityReference       - null
Notation              - null
ProcessingInstruction - entire content excluding the target
Text                  - content of the text node

Note that it returns null for anything but comments, textNodes and processing instruction, for all other node types null is explicitly returned.

To get the text content of an Element node, use textContent (innerText for older IE), to get the HTML of an Element node, use innerHTML

Also thanks for this exact answer. The accepted answer kicked me to understanding of element vs. text node. — Majak, Mar 24 '15 at 22:54

score 2 · Accepted Answer · answered Mar 24 '15 at 22:17

2

why nodeValue returns null for element node

Because element nodes don't have values. They basically only have a name, attributes and children.

…and "nothing" for text node?

It does return you something: the whitespace between those element nodes.

answered Mar 24 '15 at 22:17

Bergi

630,263
148
957
1,375

Oh I got it now, I need to get `nodeValue` of element node's child, not of element node itself which returns the piece of the text before element's `<..>` brackets. In this case, piece of the text is the whitespace. Thanks for my better understanding of DOM! – Majak Mar 24 '15 at 22:50

JavaScript text nodes properties

2 Answers2