JS获取DOM元素
1、childNodes:获取节点,不同浏览器表现不同;
IE:只获取元素节点;
非IE:获取元素节点与文本节点;
解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue
2、children:获取元素节点,浏览器表现相同。
因此建议使用children。
childNodes返回的是节点的子节点集合,包括元素节点、文本节点还有属性节点。
children返回的只是节点的元素节点集合,所以返回的只有span元素。
3、firstChild与firstElementChild
相同点:获取父节点下的第一个节点对象;
不同点:1、firstchild:IE6,7,8:第一个元素节点;
非IE6,7,8:第一个节点,文本节点或者元素节点;
2、firstElementChild:IE6,7,8:不支持;
非IE6,7,8:第一个元素节点;
function firstChild(obj){
if(obj.firstElementChild) return obj.firstElementChild;
return obj.firstChild
}
4、lastChild与lastElementChild
相同点:获取父节点下的最后一个节点对象;
不同点:1、lastchild:IE6,7,8:最后一个元素节点;
非IE6,7,8:最后一个节点,文本节点或者元素节点;
2、lastElementChild:IE6,7,8:不支持;
非IE6,7,8:最后一个元素节点;
5、nextSibling与nextElementSibling
相同点:获取后一个兄弟节点对象;
不同点:1、nextSibling:IE6,7,8:后一个兄弟元素节点;
非IE6,7,8:后一个兄弟节点,文本节点或者元素节点;
2、lastElementChild:IE6,7,8:不支持;
非IE6,7,8:后一个兄弟元素节点;
6、previousSibling与previousElementSibling
相同点:获取前一个兄弟节点对象;
不同点:1、previousSibling:IE6,7,8:前一个兄弟元素节点;
非IE6,7,8:前一个兄弟节点,文本节点或者元素节点;
2、previousElementChild:IE6,7,8:不支持;
非IE6,7,8:前一个兄弟元素节点;
7、parentNode:获取父元素,不存在兼容性问题。
JS获取DOM元素的更多相关文章
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- js获取dom元素的子元素,父元素,兄弟元素小记
原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获 ...
- [原]js获取dom元素的实际位置及相对坐标
关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/ ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- Vue自定义指令获取DOM元素
我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- document.getElementById 和 document.getElementsByClassName获取DOM元素的区别
想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸, 尤其是 document.getElementById 和 document.getElementsByClassName, ...
随机推荐
- java关键字中文对比
abstract 摘要|抽象assert 声称boolean 布尔break 中断byte 字节case 实例catch 捕捉char 烧焦class 类const 常量continue 持续defa ...
- CentOS7 + Nginx1.13.5 + PHP7.1.10 + MySQL5.7.19 源码编译安装
一.安装Nginx 1.安装依赖扩展 # yum -y install wget openssl* gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng ...
- windows无法启动MySQL服务 错误1067
启动wampmysqld 出现 1067 错误 解决方法:删除在MySQL安装目录下的Data目录中的ib_logfile0和ib_logfile1这两个文件. 重新启动MySQL服务
- 学习PID
最近在想自己的文章有些是不是写的太难以理解了呢.........竟然好多人看了还是会直接问我很多问题....... 其实PID哈靠自己想像就能自己写出来自己的代码,也许是网上的讲的太过的高深什么积分微 ...
- Hadoop(六)之HDFS的存储原理(运行原理)
前言 其实说到HDFS的存储原理,无非就是读操作和写操作,那接下来我们详细的看一下HDFS是怎么实现读写操作的! 一.HDFS读取过程 1)客户端通过调用FileSystem对象的open()来读取希 ...
- ArcGis for flex查询FeatureLayer数据
1. 首先实例化一个FeatureLayer对象 private var featureLayer:FeatureLayer=new FeatureLayer(); 2.指定FeatureLayer对 ...
- win10 uwp DataContext
本文告诉大家DataContext的多种绑法. 适合于WPF的绑定和UWP的绑定. 我告诉大家很多个方法,所有的方法都有自己的优点和缺点,可以依靠自己喜欢的用法使用.当然,可以在新手面前秀下,一个页面 ...
- 【转】FIO使用指南
原文地址:http://blog.csdn.net/yuesichiu/article/details/8722417 Fio压测工具和io队列深度理解和误区 这个文档是对fio-2.0.9 HOWT ...
- linux 生成随机密码和wordlist常用方法
注:文章内容来自网络收集 关于下面这10个方法,估计很多人也知道了,这里也是为了自己以后用收集一下,不过顺便吐槽下,google第一页,只要是“linux 随机密码”这几个类似的关键字,蹦出来的全特么 ...
- 个人怎么申请微信小程序
1.打开微信公众平台(mp.weixin.qq.com).拉到中间的"账号分类",鼠标悬浮于"小程序"框中并点击"查看详情". 2.进入微信 ...