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 ...
随机推荐
- Codeforces 914C Travelling Salesman and Special Numbers:数位dp
题目链接:http://codeforces.com/problemset/problem/914/C 题意: 对数字x进行一次操作,可以将数字x变为x在二进制下1的个数. 显然,一个正整数在进行了若 ...
- Memcached 分布式缓存实现原理简介
摘要 在高并发环境下,大量的读.写请求涌向数据库,此时磁盘IO将成为瓶颈,从而导致过高的响应延迟,因此缓存应运而生.无论是单机缓存还是分布式缓存都有其适应场景和优缺点,当今存在的缓存产品也是数不胜数, ...
- POJ 1270 Following Orders(拓扑排序)
题意: 给两行字符串,第一行为一组变量,第二行时一组约束(每个约束包含两个变量,x y 表示 x <y).输出满足约束的所有字符串序列. 思路:拓扑排序 + 深度优先搜索(DFS算法) 课本代码 ...
- Linux-tcpdump command
简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...
- 8th
2017-2018-2 20179212<网络攻防实践>第8周作业 视频学习 Kali权限维持之后门 权限维持包含Tunnel工具集.Web后门.系统后门三个子类.其中系统后门与web后门 ...
- ACM学习历程—HDU1695 GCD(容斥原理 || 莫比乌斯)
Description Given 5 integers: a, b, c, d, k, you're to find x in a...b, y in c...d that GCD(x, y) = ...
- java判断一个类是否公共类
Modifier.isPublic([类].getModifiers()) Modifier.isAbstract([类].getModifiers())
- nginx uwsgi wsgi django 这些东西究竟是什么关系
有太多的文章告诉我们nginx uwsgi django 这些东西怎么用了,太多的人知道这些东西的怎么使用,怎么配置,怎么优化,但是还是有一部分人比如我这种水货不知道这些东西到底是啥,为啥一个项目的发 ...
- Cg与RenderMonkey 之旅
http://news.mydrivers.com/1/15/15020_all.htm [前言] 您可能还没有意识到---您手头的这块显卡(或者说这块GPU)---它不仅仅是一个应用工具(游戏.平面 ...
- C++之vector模板类
vector 称为容器模板类,是同一种类型的对象的集合,每个对象都有一个对应的整数索引值.vector 不是一种数据类型,而只是一个类模板,可用来定义任意多种数据类型.vector 类型的每一种都指定 ...