我想知道在使用方法NextSibling的情况下属性getElementsByClassName()如何工作?
这是显示问题的代码示例:



function Sibling() {
    var x = document.getElementsByClassName('firstClass')[0];
    document.getElementById("out1").innerHTML = 'We are on <b> ' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>';
    x = x.nextSibling;
    document.getElementById("out2").innerHTML = 'After SINGLE nextSibling we are on <b> ' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>. WHY IS THAT???!!!';
    x = x.nextSibling;
    document.getElementById("out3").innerHTML = 'After DOUBLE nextSibling we are on <b> ' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>';;
}

<div class="general">
	<div class="firstClass">
	</div>

	<div class="secondClass">
	</div>

	<button onclick="Sibling()">ClickMeAndThenExplainTheResults</button>
</div>

<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p> 





因此,在第一个NextSibling之后,我希望继续学习第二个元素:

<div class="secondClass">
但是由于未知的原因,您需要调用double NextSibling才能从第一个元素移动到第二个元素。
正如您在第一个NextSibling之后看到的那样,对象的TypeName是Text。但我实际上看不到任何文字...

您能否解释一下为什么我们需要使用两个NextSibling?使用第一个NextSibling之后,Text对象得到了什么?

最佳答案

nextSibling获取下一个节点,而不是下一个元素节点。

在两个div元素节点之间,有一个包含空格的文本节点(空格,制表符和换行符是文本),这就是您所得到的。

比较:

1: <div></div> <div></div>
2: <div></div><div></div>


另请参见nextElementSibling

08-24 15:28