Javascript DOM，使用 nextsibling 属性访问 <li> 元素的文本节点答案

【问题标题】：Javascript DOM,accesing the textnode of the <li>element using nextsibling propertyJavascript DOM，使用 nextsibling 属性访问 <li> 元素的文本节点
【发布时间】：2015-04-04 16:39:50
【问题描述】：

<body>
    <div id="li-container">
        <ul>
            <li class="hot">item1</li>
            <li id="secLi" class="cool">item2</li>
            <li class="cool">item3</li>
            <li class="cool">item4</li>
        </ul>
    </div>

<script language="javascript" type="text/javascript">
var secLi = document.getElementById("secLi");
var sib = secLi.nextSibling;
document.write(sib);

//OR //OR  //OR //OR  //OR //OR  //OR //OR  

var secLi = document.getElementById("secLi");
var sib = secLi.nextSibling;
document.write((sib).textContent);

</script>
</body>

我想使用 nextSibling 属性获取第三个列表（li）项的文本节点并写入文档。我知道我可以使用“li.textContent”来访问它，但我想要这样。

不，我不是在寻找“nextElementSibling”，我想使用“nextSibling”属性访问“secondli”的“textNode”，这是因为如果我想访问“第三个 li”，我必须使用“nextSibling.nextSibling”两次到达“第三个 li”。（1）第一个“nextSibling”用于“2nd li”的“text-node”，（2）第二个“nextSibling”用于“3rd li” “。所以我无法使用“next-sibling”一次获得“2nd li”的文本节点。

我使用 text-fixer.com 删除其他空格和换行符，即使它不起作用。

【问题讨论】：

你在第二种方式中看到了什么错误......你想让item3写在document.right中吗？

标签： javascript html dom traversal nextsibling

【解决方案1】：

您是否在寻找nextElementSibling？

var secLi = document.getElementById('secLi');
secLi.nextSibling; // Is a text node.
secLi.nextElementSibling; // Is the <li> you're looking for, so..
secLi.nextElementSibling.textContent; // Gives you "item3"

更新

为了更好地理解为什么你想要nextElementSibling 而不是nextSibling，看看父级<ul> 说它的childNodes 是什么：

secLi.parentElement.childNodes;
// [#text, <li>, #text, <li>, #text, <li>, #text, <li>, #text]

您不需要nextSibling，因为它只是列表项之间的空文本。你想要下一个元素（列表项）。

见https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling

【讨论】：

“nextSibling”和“nextElementSibling”有什么区别
@amguruprasathnextSiblingproperty 和nextElementSibling 的区别在于，nextSibling 返回下一个兄弟节点作为元素节点、文本节点或注释节点，而 nextElementSibling 返回下一个兄弟节点作为元素节点（忽略文本和注释节点）。来源：w3schools.com/jsref/prop_node_nextsibling.asp
直接取自 Mozilla 文档：“nextElementSibling 只读属性返回紧随其父子列表中指定元素之后的元素。” “nextSibling 只读属性返回紧随其父子节点列表中指定节点之后的节点”。所以在这种情况下，您需要 element (<li>)，因为下一个 node 实际上是一个文本节点。
nextSibling 选择 next 兄弟节点。 elementNode、commentNode 或 textNode。 nextElementSibling 选择具有 nodeType 或 1 的下一个 elementNode 同级。在您的代码nextSibling 中选择一个textNode，这个textNode 包含换行符和您用于格式化标记的其他隐藏字符。如果您删除隐藏字符，则nextSibling 会选择相同的节点。
不，我不是在寻找 nextElementSibling，我想使用 nextSibling 属性访问第二个列表的 textNode，这是因为如果我想访问第三个列表项，我必须使用 (nextSibling.nextSibling)到兄弟姐妹，这是第二个列表的文本节点并到达第三个列表项。所以我想获取 textNode

【解决方案2】：

li 元素的textnode 是2nd li 元素的child。所以代码是 var sib = secLi.firstChild.textContent; document.write(sib);

@brianvaughn

【讨论】：