在使用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的更多相关文章

  1. nextSibling VS nextElementSibling

    2. nextSibling vs nextElementSibling { //FF { 在Firefox中,link2的nextSibling并不是link3,因为两者之间有一个换行符. 这被认为 ...

  2. 【踩坑】nextSibling 和nextElementSibling的区别

    DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点). nextSibling属性与nextElementSibling属性的差别: nextSi ...

  3. 兼容的firstChild,lastChild,nextSibling,previousSibling写法

    在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...

  4. 05.DOM

    DOM基础 什么是DOM 标签元素节点浏览器支持情况  火狐支持最好 谷歌其次 ie最差 尤其是ie6-8DOM节点节点分为:元素节点和文本节点 测试节点的类型用nodeTypenodeType 为3 ...

  5. DOM相关属性,方法,兼容性问题处理小析

    DOM:Document Object Model文档对象模型,用于让程序(js)取操作页面中的元素.DOM节点类型有12种. (一)属性 一.子节点操作1.所有子节点(1)元素.childNodes ...

  6. JavaScript 基础第八天(DOM第二天)

    一.引言 初步认识DOM有可能会被各种不熟悉的因为因素影响自己的学习心态,你需要的是多去记忆一些单词然后加强自己的代码量. 二.导入 在昨天初步认识DOM以后我们见天将接着介绍有关于DOM的内容. 三 ...

  7. js DOM Element属性和方法整理

    节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...

  8. javascript基础07

    javascript基础07 1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有 ...

  9. Dom初

    DOM基础 •什么是DOM •浏览器支持情况 lDOM节点 •childNodes  nodeType –获取子节点 <!DOCTYPE html PUBLIC "-//W3C//DT ...

随机推荐

  1. js 跨域复习 window.name | window.domain | iframe | Jsonp

    引起跨域的原因: 浏览器的同源策略,但是当你要发送请求的时候,出于安全性问题,浏览器有严格的要求,必须协议,域名,端口都相同,这个就是同源策略. 影响:a通过js脚本向b发送ajax请求,不同源就会报 ...

  2. Jquery 取值,赋值学习总结

    <h2>获取和设置文本框值:</h2> <input type="button" value="赋值文件框" id="v ...

  3. Selenium-多窗口处理

    弹出新的窗口,该如何处理 1.获取当前窗口句柄 2.元素的操作,打开新的窗口 3.获取所有窗口句柄 4.for循环遍历所有窗口,定位到需要操作的窗口上 和你当前句柄不一样的就说明是新的,通过打印tit ...

  4. javaScript-进阶篇(三)

    1.Window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 2.JavaScript 计时器 在JavaScript中,我们可以在设定的时间间隔 ...

  5. BEC listen and translation exercise 31

    听力练习: All societies have ways of encouraging and enforcing what they view as appropriate behaviour w ...

  6. 继续学习:C语言关键字

    auto :声明自动变量 break:跳出当前循环 case:开关语句分支 char :声明字符型变量或函数 const :声明只读变量 continue:结束当前循环,开始下一轮循环 default ...

  7. 2017-2018-1 20179215《Linux内核原理与分析》第九周作业

    实验:理解进程调度时机跟踪分析进程调度与进程切换的过程 一.实验要求  (1)理解Linux系统中进程调度的时机,可以在内核代码中搜索schedule()函数,看都是哪里调用了schedule(),判 ...

  8. ACM学习历程—ZOJ3785 What day is that day?(数论)

    Description It's Saturday today, what day is it after 11 + 22 + 33 + ... + NN days? Input There are ...

  9. bzoj 2823: [AHOI2012]信号塔 最小圆覆盖

    题目大意: 给定n个点,求面积最小的园覆盖所有点.其中\(n \leq 10^6\) 题解: 恩... 刚拿到这道题的时候... 什么???最小圆覆盖不是\(O(n^3)\)的随机增量算法吗????? ...

  10. 【Tensorflow】Ubuntu 安装 Tensorflow gpu

    安装环境:Ubuntu 16.04lts 64位,gcc5.4 1.安装Cuda 1. 下载cuda toolkit. 下载cuda8.0 地址:https://developer.nvidia.co ...