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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 姿态估计与行为识别(行为检测、行为分类)的区别[通俗易懂]

    姿态估计与行为识别(行为检测、行为分类)的区别[通俗易懂]姿态估计和行为识别作为计算机视觉的两个领域,对于新人来说,较为容易弄混姿态估计和行为识别两个概念。 姿态估计(PoseEstimation)是指检测图像和视频中的人物形象的计算机视觉技术,可以确定某人的某个身体部位出现在图像中的位置,也就是在图像和视频中对人体关节的定位问题,也可以理解为在所有关节姿势的空间中搜索特定姿势。简言之,姿态估计的任务就是重建人的关节和肢干,其难点主要在于…

    2022年6月21日
    27
  • 一系列令人敬畏的.NET核心库,工具,框架和软件[通俗易懂]

    一系列令人敬畏的.NET核心库,工具,框架和软件[通俗易懂]内容一般框架,库和工具API应用框架应用模板身份验证和授权Blockchain博特构建自动化捆绑和缩小高速缓存CMS代码分析和指标压缩编译器,管道工和语言加密数据库数据库驱动数据库工具和实用程序日期和时间分布式计算电子商务和支付例外功能编程图像GUIIDE国际化国际奥林匹克委…

    2022年7月16日
    13
  • IDEA快捷键设置复制上一行

    IDEA快捷键设置复制上一行Idea真是的一个神奇的ide,用着爱不择手。之前用习惯了eclipse的“ctrl+向下箭头”,复制一行,如何设置idea里这个快捷键呢File-&gt;settings-&gt;keymap-&gt;搜索duplicate-&gt;双击DuplicateEntireLines设置一下,搞定,又可以很爽的用ctrl+向下箭头复制一行了虽说以上的一种解决方法,但是经…

    2022年5月14日
    433
  • XP中轻松获取未使用的IP地址「建议收藏」

    XP中轻松获取未使用的IP地址

    2022年3月11日
    44
  • 获取uuid方法_linux获取uuid

    获取uuid方法_linux获取uuid使用网站https://www.uuidgenerator.net/来获取使用python获取importuuidprint(uuid.uuid4())

    2022年8月10日
    6
  • conda install 换源_Mac下conda环境操作、conda换源、pip换源

    conda install 换源_Mac下conda环境操作、conda换源、pip换源conda环境操作显示当前存在哪些conda环境:condaenvlist1⃣️conda创建虚拟环境:condacreate-n环境名如果需要指定某些版本,这里以指定python版本为例:condacreate-n环境名python=3.6(更新:惨痛教训,创建新的conda环境时,一定要指定python的版本,否则在pycharm中导入conda虚拟环境时,在/Users/…

    2025年6月16日
    2

发表回复

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

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