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>
nextSibling 和nextElementSibling的区别相关推荐
- nextSibling和nextElementSibling的区别
nextSibling返回其父节点的childNodes子节点列表中紧随其后的节点 nextElementSibling返回的则是其父节点的childNodes子节点列表中紧随其后的元素节点 prev ...
- 【踩坑】nextSibling 和nextElementSibling的区别
DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点). nextSibling属性与nextElementSibling属性的差别: nextS ...
- HTML DOM nextSibling 和nextElementSibling属性
nextSibling 和nextElementSibling的区别 nextSibling属性返回元素节点之后的兄弟节点(包括文本节点.注释节点): nextElementSibling属性只返回元 ...
- nextSibling 和nextElementSibling
#nextSibling 和nextElementSibling的区别 DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点). nextSibli ...
- nextSibling,nextElementSibling的区别;
html文档如下: <div id="box"><ul id="ul"><li>第一个</li><li i ...
- nextSibling与nextElementSibling区别
nextSibling属性返回元素节点之后的兄弟节点(包括文本节点.注释节点): nextElementSibling属性只返回元素节点之后的兄弟元素节点(不包括文本节点.注释节点): 在 HTML ...
- 原生js中nextSibling和nextElementSibling的坑
作者:拓海老师,公众号:拓海老师 一直以来js的随性让初学者蛋疼菊紧,但是真正玩熟了之后,还是非常有意思的! 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑! 业务场景:点击当前元 ...
- js和jq的联系和区别
我是一个从汽车行业转行IT的项目经理,我是Edward,如想了解更多,请关注我的公众号[转行项目经理的逆袭之路]. 今天来聊聊js和jq. 以上两幅图可以表明两者之间的关系,用一句说来表示就是: jq ...
- dom node and html element,DOM parentNode和parentElement之间的区别
6 个答案: 答案 0 :(得分:380) parentElement是Firefox 9和DOM4的新功能,但它已经存在于所有其他主流浏览器中. 在大多数情况下,它与parentNode相同.当节点 ...
最新文章
- 事件绑定及解除事件绑定
- Linux权限管理 - 特殊权限之文件特殊权限
- ubuntu squid 做http代理
- jxls使用excel公司_使用jXLS将Excel文件解析为JavaBeans
- 1t硬盘怎么分区最好_win7系统硬盘怎么分区 win7系统硬盘分区步骤【介绍】
- [Aaronyang] 写给自己的WPF4.5 笔记17[Page实现页面导航]
- 教师编计算机知识大全,高效老师必要知道的电脑常用知识技巧整理大全
- libcurl使用easy模式阻塞卡死等问题的完美解决---超时设置
- 精装房验房项目以及注意事项,业主自己验收必备工具有哪些?精装房验收整改建议
- python函数调用的五种方式
- Django中关于URL配置文件urls.py的理解
- trackingmore快递查询平台_快递查询API接口(trackingmore)
- 微信小程序来了,整理微信小程序学习教程网站
- 51单片机使用12M晶振串口乱码问题
- C语言编译时无法打开文件,2812c语言编译时头文件无法打开
- Debian 11 配置优化指南
- Windows10各版本的区别、我们应该如何选择Windows10的系统版本?
- 《经济学是什么》精髓:如何用经济学家的眼光理解个人选择和市场经济?
- 前端 100 问:你会多少?
- shutdown配合at命令 实现定时关机,重启---