你的位置:首页 > Java教程

[Java教程]关于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("myLi").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("myLi").nextSibling);}</script></body></html>

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

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