nextSibling VS nextElementSibling
2. nextSibling vs nextElementSibling
{
//FF
{
在Firefox中,link2的nextSibling并不是link3,因为两者之间有一个换行符.
这被认为是一个空格, 所以link2的nextSibling就是这个空格,即一个text node,IE不存在这个问题。
<a href="link2" id="link2"></a>
<a href="link3" id="link3"></a>
} //IE
{
IE不存在这个问题。
} //solution
{
//cause
{
DOM标准明确说了nextSibling返回当前元素的下一个Node,而<a>元素后的Node明显是一个TextNode,
其nodeValue是'\n',而IE竟然没有返回一个TextNode,跳过了一个Node
} //不支持version
{
FireFox(版本号:3.5.11)中不支持JavaScript的previousSibling属性。 IE(版本号:8.0.6001.18702)中不支持JavaScript的previousElementSibling属性。 用jQuery可以达到跨浏览器的支持。
} //solution
{
/最新的浏览器确实已经已经支持如下的DOM标准
{
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 3.5 9 (IE6-8 incl commend nodes) 10 4 //childElementCount
{
属性返回当前元素的子元素个数,而不是子节点个数.
只有当一个节点的nodeType属性为1(Node.ELEMENT_NODE==1)时,它才是元素节点.
文本节点和注释节点不属于元素节点. //注意
{
另外,由于IE9之前的版本不支持childElementCount属性, 所以如果考虑兼容性的话,
请使用element.children.length(并且需要判断nodeType是否为1)
来代替childElementCount属性.
}
} //children vs childNodes
{
children:获取一个元素的【子元素节点】集合
childNodes:获取一个元素的【子节点】集合
(/注意:IE10支持nextSibling.children|childNodes/)
(/ FF23支持netxElementSibling.children|childNodes/) //注意
{
在IE9之前,element.children会包含一个元素的子元素节点和子注释节点.
在IE9之后或者其他浏览器中, 只包含子元素节点.
}
} //一般人使用nextSibling是不会期望去得到一个换行符的,
//所以新版的DOM标准提供了nextElementSibling来跳过这些【空白符和文本节点】
{
nextElementSibling
firstElementChild
lastElementChild
childElementCount
children
previousElementSibling
}
} //example
{
var cusName = e.parentNode.previousElementSibling.children[1].value;
} }
}
}
} 参考链接
http://ricoyu.iteye.com/blog/940760
https://developer.mozilla.org/zh-CN/docs/DOM/element.childElementCount
nextSibling VS nextElementSibling的更多相关文章
- nextSibling 和nextElementSibling
在使用DOM过程中发现一个问题: 使用nextSibling 属性返回指定节点之后紧跟的节点,在相同的树层级中.被返回的节点以 Node 对象返回. this.arrow = this.screen. ...
- 【踩坑】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 ...
随机推荐
- MongoError: server instance in invalid state undefined 解决办法
MongoDB关键点集锦(更新中...) 2017-01-20 09:33:48[其它数据库]点击数:15作者:Real_Bird的博客来源: 网络 随机为您推荐的文章:MongDB索引的介绍及使用 ...
- Oracle递归查询与常用分析函数
最近学习oracle的一些知识,发现自己sql还是很薄弱,需要继续学习,现在总结一下哈. (1)oracle递归查询 start with ... connect by prior ,至于是否向上查 ...
- Dev控件-gridview的属性说明
说明 Options OptionsBehavior 视图的行为选项 AllowIncrementalSearch 允许用户通过输入想得到的列值来定位行 AllowPartialRedrawOnScr ...
- Count and Say,统计并输出,利用递归,和斐波那契数列原理一样。
问题描述:n=1,返回“1”:n=2,返回“11”:n=3,返回“21”:n=4,返回1211,.... 算法分析:和斐波那契数列道理差不多,都是后一个要依赖前一个元素.因此可以使用递归,也可以使用迭 ...
- java sleep()和wait()的区别
java sleep()和wait()的区别? sleep()和wait()都能阻塞当前线程. 区别1: sleep()属于Thread类:wait()属于Object类. 区别2: 调用sleep( ...
- scala学习手记34 - trait方法的延迟绑定
trait的方法的延迟绑定就是先混入的trait的方法会后调用.这一点从上一节的实例中也可以看出来. 下面再来看一个类似的例子: abstract class Writer { def write(m ...
- bootstrap-datepicker 时间范围选择函数封装
bootstrap-datepicker 时间范围选择函数封装 官网 https://bootstrap-datepicker.readthedocs.io/en/latest/index.html ...
- python多线程抓取代理服务器
文章转载自:https://blog.linuxeye.com/410.html 代理服务器:http://www.proxy.com.ru #coding: utf-8 import urllib2 ...
- 八大排序算法的java实现
有时间再贴算法分析图 JDK7的Collections.sort()的算法是TimSort, 适应性的归并排序, 比较晦涩难懂, 这里没有实现 public class mySort { // 冒泡排 ...
- C#学习历程(二)[基础知识]
c#中类型的转换 1.Convert.ToInt32(string s) 这个方法的返回值是int类型,要用int类型的变量接收 如: string strNum=Console.ReadLine() ...