必威体育Betway必威体育官网
当前位置:首页 > IT技术

nextSibling 和nextElementSibling的区别

时间:2019-06-16 19:40:00来源:IT技术作者:seo实验室小编阅读:69次「手机版」
 

nextsibling

使用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" value="+" id="c2" onclick="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>

相关阅读

分享到:

栏目导航

推荐阅读

热门阅读