JavaScript htmlNode.childNodes[i].nodeName 中#text 的含义

Question

我是 JavaScript 的新手，当我在玩 DOM 模型时，当我想显示 HTML 中的所有 nodeName 时，我感到很困惑] childNodes。当我有一个 head 标签时，有一个名为 #text 的 nodeName，当我删除完整的 head 标签时，有正常的 HEAD 和 BODY nodeName。 #text nodeName 是什么意思，尤其是当我有 head 标签时？

这是我的代码：

<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>

它的输出是（带有head标签）：

HEAD; #text; BODY;

它的输出是（没有 head 标签）：

HEAD; BODY;

Answer 1

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

这些是您在标记中无意引入的空换行符。

如果您不想包含文本节点，请使用 children 而不是 childNodes。

Answer 2

元素里面的

白色space被认为是#text，文本被认为是节点。删除 </head> 和 <body> 标签之间的 space，如下所示：

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

这会给你输出头，BODY

JavaScript htmlNode.childNodes[i].nodeName 中#text 的含义

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

html

javascript

dom