博主在进行某次前端开发过程中，使用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、childNodes属性也存在该特性）
在dom中，文本和属性都属于节点，开发过程中应当注意这一点。
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
