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）项的textnode并写入文档。我知道我可以使用“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删除其他白色空格和换行符，即使它起作用也是如此。

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

textnode元素的li是child元素的2nd li。所以代码就是 var sib = secLi.firstChild.textContent; 文件撰写（SIB）;

@brianvaughn

Javascript DOM，使用nextsibling属性访问<li>元素的textnode </li>

2 个答案: