关于dom元素的nextSibling的属性使用注意点

  博主在进行某次前端开发过程中,使用dom元素的nextSibling属性,用于获取下一个同辈元素,但是却得到非预期结果。代码片段如下

<!DOCTYPE html>
<html>
<body>
<ul>
  <li id="Coffee">Coffee</li>
  <li id="Tea">Tea</li>
</ul>
<button onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    console.info(document.getElementById("Coffee").nextSibling);
}
</script>
</body>
</html>

控制台打印出

并非预期的id="Tea"的li元素。

这是为什么呢?

原来,dom将元素后的换行也看成一个元素(TextNode),该元素与li元素同辈,所以nextSibling就是指向该TextNode元素。

如果将代码修改为如下形式

<!DOCTYPE html>
<html>
<body>
<ul>
  <li id="Coffee">Coffee</li><li id="Tea">Tea</li>
</ul>
<button onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    console.info(document.getElementById("Coffee").nextSibling);
}
</script>
</body>
</html>

 测试结果即为期望结果。(另外:同一类的previousSibling属性也存在该特性)

在dom中,文本和属性都属于节点,开发过程中应当注意这一点。

你可能感兴趣的:(关于dom元素的nextSibling的属性使用注意点)