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

nextSibling 和nextElementSibling的区别[通俗易懂]使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点)。nextSibling属性与nextElementSibling属性的差别: 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.net/158696.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • No ‘Access-Control-Allow-Origin‘ header is present之 为什么会跨域及解决方案[通俗易懂]

    No ‘Access-Control-Allow-Origin‘ header is present之 为什么会跨域及解决方案[通俗易懂]1浏览器的限制2跨域3浏览器发送的是XHR(XMLHttpRequest)请求当以上三个条件都满足时浏览器会抛出跨域请求异常(记住是浏览器抛出的异常,和服务端没太大关系),在讲跨域请求解决方案前先了解几个问题。1http请求中,哪些是常见的简单请求,哪些是非简单请求常见的简单请求:请求方法为:GET,HEAD,POST,请求header里面无自定义头,Conten…

    2022年8月24日
    9
  • gtest的介绍和使用

    gtest的介绍和使用一、什仫是gtestgtest是一个跨平台的(Liunx、MacOSX、Windows、Cygwin、WindowsCEandSymbian)C++单元测试框架,由google公司发布。gtest是为在不同平台上为编写C++测试而生成的。它提供了丰富的断言、致命和非致命判断、参数化、”死亡测试”等等。了解了什仫是gtest之后下面让我们来学习gt…

    2022年9月29日
    4
  • Linux 常用命令解析和Bash Shell使用示例脚本演示

    Linux 常用命令解析和Bash Shell使用示例脚本演示

    2022年1月13日
    150
  • UVA 10142 Australian Voting(模拟)

    UVA 10142 Australian Voting(模拟)

    2021年12月16日
    34
  • 一致性hash算法 java实现_信息的一致性

    一致性hash算法 java实现_信息的一致性介绍一致性Hash算法是实现负载均衡的一种策略,后续会写如何实现负载均衡一致哈希是一种特殊的哈希算法。在使用一致哈希算法后,哈希表槽位数(大小)的改变平均只需要对K/n个关键字重新映射,其中K是关键字的数量,n是槽位数量。然而在传统的哈希表中,添加或删除一个槽位的几乎需要对所有关键字进行重新映射。强哈希考虑到单服务器不能承载,因此使用了分布式架构,最初的算法为hash()modn,hash()通常取用户ID,n为节点数。此方法容易实现且能够满足运营要求。缺点是当单点发

    2022年9月27日
    5
  • mac datagrip2021.4激活码_通用破解码

    mac datagrip2021.4激活码_通用破解码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月16日
    100

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号