JavaScript 文本节点属性

Posted 2023-05-07

技术标签:

【中文标题】JavaScript 文本节点属性【英文标题】：JavaScript text nodes properties 【发布时间】：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 的子节点没有问题，但对子节点的文本内容没有问题。我会仔细阅读你和其他的答案。 【参考方案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】：