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

Question

<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）项的文本节点并写入 document.I 知道我可以使用 "li.textContent" 访问它但我想要就这样。

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

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

Answer 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

Answer 2

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

@brianvaughn

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

Javascript DOM,accesing the textnode of the <li>element using nextsibling property

html

javascript

dom

traversal

nextsibling

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

Javascript DOM,accesing the textnode of the <li>element using nextsibling property

html

javascript

dom

traversal

nextsibling

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