【JavaScript】DOM差异——nextSibli…

最新推荐文章于 2020-03-07 15:43:55 发布
最新推荐文章于 2020-03-07 15:43:55 发布
阅读量504 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ijusttale/article/details/38683501
版权

one:

 


  • one

  • two

  • three


这段代码在火狐下输出为‘undefined’,在IE下输出为‘item2’。请看two代码。

two:

 


  • one

  • two

  • three


IE下输出1、3；火狐下输出3、7。（节点类型为1表示元素节点，节点类型为3表示文本节点）

总结1与2：在火狐下空白、换行等文本信息也会被当成nextSibling跟childNodes的一员或作用对象！

解决方案：

1、去掉空白和换行。这样做绑定了HTML的结构，让程序和HTML产生了耦合！

2、见代码three.

three:

 

  • one
  • two
  • three

 

有没有好的方法？见代码four。

four:

 


  • one

  • two

  • three


通过 if(!document.all)如果非IE。进入无限循环，跳出的原因是找到下一个元素节点。这么写如果别的地方也需要nextSibling,我们又要再写一遍IF判断。代码的重用性不高如代码五。

five:

 


  • one

  • two

  • three


可读性这么差的代码。。。不用看了，看代码SIX。-封装成getNextNode。

six:

 


  • one

  • two

  • three


ljx008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript——DOM操作——Window.document对象详解
10-21
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript学习
weixin_45729611的博客
01-24 261
基础的数据类型和条件语句等就不记录了，各个语言大体内容都差不多，直接从函数开始记录学习。 一、函数 1.1 函数（function）的性质： （1）函数也是一个对象。 （2）函数中可以封装一些功能（代码），在需要时可以执行这些代码。 （3）函数中可以保存一些代码在需要的时候调用。 （4）使用typeof检查一个函数对象时，会返回一个function。 1.2 如何创建函数 语法（1）： 结果： 语法（2）： 结果： 1.3 函数的参数 同其他语言类似。 ...
nextSibling 和nextElementSibling
qq1169091731的博客
11-05 1万+
nextSibling 和nextElementSibling的区别DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点，（即：相同节点树层中的下一个节点）。nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）； nextElementSiblin
在某网课学习前端笔记整理js篇25-dom
qq_34338676的博客
03-07 145
dom（Document Object Model） 一、dom 简介 百度的，好长，懒得打字了，复制了过来。看下面。 ​ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史...
DOM基础
未玄的博客
08-18 84
//1,获取指定标签 //通过id查找对应的元素节点,返回一个具体的元素节点 var one= document.getElementById("one"); //通过class名查找对应的元素节点,返回一个 包含元素节点的数组 var ones= document.getElementsByClassName("son"); //通过标签查找对应的元素节点,返回一个 包含元素节点的数组...
JQuery 层级选择器(next(),preAll(),siblings(),parent())
houyanhua1的专栏
12-17 4895
$('#d1 div')  //取所有子元素，不管是几层。 $('#d1>div')  //取直接子元素，一层 $('#d1+div')  //之后紧邻的一个同级元素 $('#d1~div')  //之后的所有同级元素 $('#d1').next()  //后面的一个同级元素 $('#d1').nextAll()  //后面的所有同级元素 $('#d1').prev()  //前面
JS获取节点的兄弟，父级，子级元素
热门推荐
hellogull
05-14 59万+
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName("div
JS JQuery获取当前元素的上一个下一个兄弟级元素等元素的方法
qq_39479350的博客
04-18 2万+
jQuery.parent(expr)，找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")jQuery.parents(expr)，类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点，不会返回...
nextSibling与nextElementSibling区别
觅_的博客
06-05 2423
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）； nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）； 在 HTML DOM （文档对象模型）中，每个部分都是节点： 文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节...
JavaScript程序设计——DOM访问实验报告.docx
11-11
问：如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表： 答： Var tables = document.getElementsByTagName("table"); alert("This document contains contains"+tables.length+"tables");
JavaScript DOM 学习总结(五)
10-23
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
jacascript DOM节点——元素节点、属性节点、文本节点
08-30
主要介绍了jacascript DOM节点——元素节点、属性节点、文本节点,需要的朋友可以参考下
Initialize failed: invalid dom.——带你深入因操作dom不当带来的错误
不经一翻彻骨寒，怎得梅花扑鼻香
12-29 10万+
浏览器控制台报错，初始化失败，不合法的dom(Initialize failed: invalid dom.) 此类错误的原因通常是因为试图操作一个未就绪的dom(或未被创建，或未完全加载等等)。
JS实现延时页面跳转
凝结的技术博客
08-19 3101
var limit="0:05" if (document.images){ var parselimit=limit.split(":") parselimit=parselimit[0]*60+parselimit[1]*1 } function begintimer(){ if (!document.images) return if (parselimit==1) window.histo
【JavaScript】js鼠标样式
凝结的技术博客
08-19 1504
hand:是大家所熟悉的手型。 crosshair:是十字型，就是小乌龟首页所用的样式。 text:是平时鼠标移动到文本上的样式。 wait:是等待的效果。 default:是默认的那种效果。 help:是带问号的鼠标样式。 e-resize:是向右的箭头。 ne-resize:是向右上方的箭头。 n-resize:是向上的箭头。 nw-resize:是向左上方的箭头。 w-resize:是向左的
JS备注
凝结的技术博客
08-19 840
改变字体颜色 <input type=button name="Submit1" value="qwe" size=10 onClick="closeit()" onMouseOut=this.style.color="" onMouseOver=this.style.color="red" > 刷新页面 <input type="button" onclick='javescript:win
【JavaScript】nextSibling属性和p…
凝结的技术博客
08-19 624
原文地址：nextSibling属性和previousSibling属性">js nextSibling属性和previousSibling属性作者：liuqingyan 1：nextSibling属性         该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。        需要特别注意的是：该属性在不同的浏览器中的执行
【JaveScript】如何实现jQuery的Aj…
凝结的技术博客
08-19 542
【PHP文件上传】 在开始之前，我觉得是有必要把通WEB上传文件的原理简单说一下的。 实际上，在这里不管是PHP，JSP，还是ASP处理上传的文件，其实都是WEB早已把文件上传到服务器了，我们只是运用上传处理函数来处理上传的文件。 而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的。那么如何通过WEB(HTTP协议来上传文件呢？)你需要类似于以下的HTML代码： test.html
jquery的DOM操作——邮件功能
最新发布
05-27
```javascript // 获取邮件内容 var content = $('#mail-content').val(); // 获取收件人信息 var to = $('#mail-to').val(); // 发送邮件 $.ajax({ url: '/send-mail', // 发送邮件的接口地址 type: 'POST', ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值