nextSibling 和nextElementSibling
在使用DOM过程中发现一个问题:
使用nextSibling 属性返回指定节点之后紧跟的节点,在相同的树层级中。被返回的节点以 Node 对象返回。
this.arrow = this.screen.nextSibling;
this.left = this.arrow.children[0]; // undefined
this.right = this.arrow.children[1]; // undefined // 使用nextElementSibling
this.arrow = this.screen.nextElementSibling;
this.left = this.arrow.children[0]; // 正常获取第一个子节点
this.right = this.arrow.children[1]; // 正常获取第2个子节点
nextSibling属性与nextElementSibling属性的差别:
nextSibling属性返回元素节点之后紧跟的兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);
nextElementSibling属性只返回元素节点之后紧跟的兄弟元素节点(不包括文本节点、注释节点);
注意: 空格、回车也会看作文本,以文本节点对待。
nextSibling 和nextElementSibling的更多相关文章
- nextSibling VS nextElementSibling
2. nextSibling vs nextElementSibling { //FF { 在Firefox中,link2的nextSibling并不是link3,因为两者之间有一个换行符. 这被认为 ...
- 【踩坑】nextSibling 和nextElementSibling的区别
DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点). nextSibling属性与nextElementSibling属性的差别: nextSi ...
- 兼容的firstChild,lastChild,nextSibling,previousSibling写法
在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...
- 05.DOM
DOM基础 什么是DOM 标签元素节点浏览器支持情况 火狐支持最好 谷歌其次 ie最差 尤其是ie6-8DOM节点节点分为:元素节点和文本节点 测试节点的类型用nodeTypenodeType 为3 ...
- DOM相关属性,方法,兼容性问题处理小析
DOM:Document Object Model文档对象模型,用于让程序(js)取操作页面中的元素.DOM节点类型有12种. (一)属性 一.子节点操作1.所有子节点(1)元素.childNodes ...
- JavaScript 基础第八天(DOM第二天)
一.引言 初步认识DOM有可能会被各种不熟悉的因为因素影响自己的学习心态,你需要的是多去记忆一些单词然后加强自己的代码量. 二.导入 在昨天初步认识DOM以后我们见天将接着介绍有关于DOM的内容. 三 ...
- js DOM Element属性和方法整理
节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...
- javascript基础07
javascript基础07 1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有 ...
- Dom初
DOM基础 •什么是DOM •浏览器支持情况 lDOM节点 •childNodes nodeType –获取子节点 <!DOCTYPE html PUBLIC "-//W3C//DT ...
随机推荐
- 常见SQL函数需要注意的细节
版权声明:本文为博主原创文章,未经博主允许不得转载. 这是一位牛人让我们思考的问题,说实话当时真蒙了,函数虽然明白,但细化到这种程度,真的是叫不准啊,下面是几道比较典型的问题,和本人做的实验,不一定准 ...
- ASP.WEB Form 几点知识
1.GridView 行的多选 <asp:TemplateField ControlStyle-Width="30" HeaderText="选择" &g ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- hdu-5652 India and China Origins(二分+bfs判断连通)
题目链接: India and China Origins Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 65536/65536 K ...
- Java IO 简记
1.File 类: l java.io.File类:文件和目录路径名的抽象表示形式,与平台无关 l File 能新建.删除.重命名文件和目录,但 File 不能访问文件内容本身.如果需要访问文件内 ...
- 制作SD卡img文件,并扩容
/********************************************************************************** * raspi-config E ...
- 51nod 1149 Pi的递推式 组合数
题目大意: \(F(x) = 1 (0 \leq x < 4)\) \(F(x) = F(x-1) + F(x-\pi) (4 \leq x)\) 给定\(n\),求\(F(n)\) 题解: 我 ...
- javascript中eval()函数使用方法
本教程主要重介绍eval()函数的语法与使用方法,及在后面我还补充了eval()解析json数据的相关例子,希望文章能帮助到各位深入理解eval()使用方法吧. 前几天说到js中尽量不要使用eva ...
- 洛谷【P2005】A/B Problem II
题目传送门:https://www.luogu.org/problemnew/show/P2005 高精除低精:https://www.cnblogs.com/AKMer/p/9724556.html ...
- 洛谷【P3908】异或之和
二进制前置技能:https://www.cnblogs.com/AKMer/p/9698694.html 题目传送门:https://www.luogu.org/problemnew/show/P39 ...