Question

我只是DOM操作的初学者，对于一个愚蠢的问题感到抱歉。我有以下HTML和JS代码

<ul id="myList">
    <li>Coffee</li>
    <li>Tea</li>
</ul>

<p>Click the button to get the HTML content of the list's first child node.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.</p>

<p>If you add whitespace before the first LI element, the result will be "undefined".</p>

<p id="demo"></p>
<p id="demo2"></p>

<script>
    function myFunction() {
        var list = document.getElementById("myList").firstChild.innerHTML;
        document.getElementById("demo").innerHTML = list;
        var x=document.getElementById("myList").childNodes[0];
        document.getElementById("demo2").innerHTML=x.nodeName;      
    }
</script>

这里的问题是

document.getElementById("demo").innerHTML = list;

在窗口中输出undefined。但是，当我使用firstElementNode属性时，一切正常。或者是因为第一个子节点是与ID属性对应的Attr？提前致谢。

Answer 1

解决方案非常简单。我错过了白色空间也被考虑在内。这就是为什么第一个

document.getElementById("demo").innerhtml

给了我undefined。如果我删除空格并将元素设为

 <ul id="myList"><li>Coffee</li><li>Tea</li></ul>

一切正常。

Answer 2

你的问题通过练习本身解决了：

注意：元素内的空格被视为文本，文本被视为节点。如果在第一个LI元素之前添加空格，结果将为＆＃34; undefined＆＃34;。

由于您在ul元素之后有换行符，firstChild会将该换行符返回到您的variable列表，这就是未定义的内容。

Answer 3

在阅读w3schools example之后，它说你在li元素之前使用了空格。所以，如果你满足于你的ul看起来像：

{{1}}

选择器shuldnt返回undefined

Answer 4

无论类型如何，

firstChild是第一个子节点。它可以是任何节点类型，包括文本节点和注释。

另一方面，

firstElementChild是第一个作为元素的子节点。

在您的情况下，第一个子节点是文本节点，特别是第一个<li>标记之前的空格。
文本节点没有innerHTML属性，这就是您获得undefined的原因。

JavaScript firstChild返回undefined

4 个答案: