我想知道在使用方法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
。