javascript - querySelectorAll 文本行尾分隔符和 nextSibling

Question

当我调用 querySelectorAll('#fchildP') 并且想要获取它的firstChild 节点时，它返回数据属性为 的 #text node\n resp "breakline" 和 nextSibling 是 p 元素，它是 #fchild 的子元素。代码可能有助于理解:

<div id="wrap">
    <p id="fchildP">
        <p>This is first child of #fchildP</p>
        <span id="fchildPchild"></span>
    </p>
</div>

JS:

var child = $('#fchildP').child(':first-child'); // returns text endline deliminer
var next = $('#fchildP').next();  // returns p

所以我调用 querySelectorAll('#fchildP').firstChild => returns: text with endline delimiter as data 当我调用 querySelectorAll('# fchildP').nextSibling => 返回:p 节点，其中“这是 #fchildP 的第一个子节点”作为数据，它是 的子元素#fchildP。为什么会发生这种情况？我怎样才能得到firstChild但元素，而不是文本结束符分隔符？

PS:这不是 jQuery，这是我自己的库

Answer 1

三件事:

• 你不能嵌套<p>元素。嵌套<p> elements 将在打开新元素之前关闭父元素。使用其他东西。例如 <div id="fchildP"> …</div>
• 使用firstElementChild而不是firstChild获取元素而不是文本节点
• 从 NodeList 中选择第一个元素返回者 document.querySelectorAll( …)与 [0]