nextSibling 和nextElementSibling的区别[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

使用nextSibling属性返回指定节点之后的下一个兄弟节点，（即：相同节点树层中的下一个节点）。

nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）； nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

注意: 空格、回车也会看作文本，以文本节点对待。 下例中，如果两个li元素之间有空格、回车，将返回 “undefined”。

今天犯了个很蛋疼的错误，调试了半天，才发现在input 与font 标签之间多了个回车。（中间不应有任何内容，包括，回车，换行）

<input type="text" name="username" onblur="checkName();" /><font></font>

• 1

解决方法1：去掉中间多余的内容，input的nextSibling就是font结点

解决办法2：用input 的nextElementSibling 方法，得到的就是font结点

<center> <table> <tr> <td><input type=”button” value=”-” id=”c1″ οnclick=”a(this)”/></td> <td><span>1</span></td> <td><input type=”button” value=”+” id=”c2″ οnclick=”s(this)”/></td> </tr> </table> </center> <script type=”text/javascript”> function a(obj){ var x = obj.parentNode.nextElementSibling; var x1 = x.getElementsByTagName(‘span’)[0]; if(parseInt(x1.innerHTML) > 0){ x1.innerHTML = parseInt(x1.innerHTML)-1; } } function s(obj){ var x = obj.parentNode.previousElementSibling; console.log(x); var x1 = x.getElementsByTagName(‘span’)[0]; x1.innerHTML = parseInt(x1.innerHTML)+1; } </script>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158696.html原文链接：https://javaforall.cn