JavaScript 文本节点属性答案

【问题标题】：JavaScript text nodes propertiesJavaScript 文本节点属性
【发布时间】：2015-05-28 10:12:26
【问题描述】：

我对 JavaScript 中文本节点的属性有点困惑。假设我有这段 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>

还有onload()函数：

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);
    }
}

http://www.w3schools.com/js/js_htmldom_navigation.asp 告诉我们： “文本节点的 nodeValue 是文本本身”，但我得到了这个输出：

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

你能解释一下为什么nodeValue 为element node 返回null 而为text node 返回“无”吗？

编辑： 关于空白的东西在这里很好地描述了： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

【问题讨论】：

我想知道document.childNodes[0] 是如何获得body 元素的？
它是HTML node，它的孩子是head 和body。
真的，我必须将其更改为 document.body.childNodes 才能使其正常工作，但如果它适合您，那可能没问题？
是的，它也适用于我。但是我对 body 的子节点没有问题，但对子节点的文本内容没有问题。我会仔细阅读你和其他的答案。

标签： javascript html textnode nodevalue

【解决方案1】：

这就是nodeValue根据specification所做的，它返回这个

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

请注意，它会为任何返回null，但 cmets、textNodes 和处理指令，对于所有其他节点类型，null 是显式返回的。

要获取 Element 节点的文本内容，请使用 textContent（旧版 IE 为 innerText），要获取 Element 节点的 HTML，请使用 innerHTML

【讨论】：

也感谢这个确切的答案。接受的答案让我了解了元素与文本节点。

【解决方案2】：

为什么 nodeValue 为元素节点返回 null

因为element nodes 没有值。它们基本上只有名称、属性和子级。

...文本节点是“无”？

它确实返回了一些东西：这些元素节点之间的空白。

【讨论】：

哦，我现在明白了，我需要获取元素节点子节点的nodeValue，而不是返回元素<..> 括号之前的文本片段的元素节点本身。在这种情况下，一段文本是空格。感谢我更好地理解 DOM！