li 元素的子节点给出 [#text, <ul>?…?</ul>?, #text]

Question

在这里我创建了一个聊天对话。

\n\n

li元素的子节点与id="topOfStack"ie

\n\n

document.querySelector(\'#topOfStack\').childNodes\n

\n\n

结果：

\n\n

[#text, <ul>\xe2\x80\x8b\xe2\x80\xa6\xe2\x80\x8b</ul>\xe2\x80\x8b, #text]\n

\n\n

我的问题的 HTML 代码如下

\n\n

<div id="container">\n    <ul id="chat">\n        <li class="right">\n            <ul>\n                <li><span>Hello</span></li>\n                <li><span> What are you doing?</span></li>\n            </ul>\n        </li>\n\n\n        <li class="left" id="topOfStack">\n            <ul>\n                <li><span>Watching Movie</span></li>\n                <li><span>u?</span></li>\n            </ul>\n        </li>\n\n\n    </ul>\n</div>\n

\n\n

但是，当我动态创建一个新的“li”元素并附加到聊天（ul元素）时，id =“topOfStack”从前一个元素中删除并添加到新附加的元素中，子节点仅是[<ul>\xe2\x80\x8b\xe2\x80\xa6\xe2\x80\x8b</ul>\xe2\x80\x8b].

\n\n

为什么默认添加#text？或者他们扮演什么角色？

\n

Answer 1

这些文本节点代表标签左侧和右侧的文本ul。它们应该在那里表示该文本。当您动态创建一个<li>仅包含一个<ul>标签的标签时，该文本不存在。您可以使用.children而不是.childNodes仅获取元素：

document.querySelector('#topOfStack').children; //HTMLCollection: [<ul>...</ul>]