-1 
<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 删除其他空格和换行符，即使它不起作用。

4

2 回答 2

3

你也许在寻找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

于 2015-04-04T16:44:23.630 回答
0

该元素是textnode一个元素。所以代码是 var sib = secLi.firstChild.textContent; document.write(sib);lichild2nd li

@brianvaughn

于 2015-04-04T17:48:36.563 回答