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, ...
随机推荐
- sql的存储过程使用详解--基本语法
存储过程简介 SQL语句需要先编译然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中,用户通过指定存储过程的名字并给定参数(如果该存储 ...
- 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境
转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...
- jsp 四大域范围
JSP中四种作用域的不同 作用域规定的是变量的有效期限. 1.如果把变量放到pageContext里,就说明它的作用域是page,它的有效范围只在当前jsp页面里. 从把变量放到pageCont ...
- 自己动手实现网络服务器(Web Server)——基于C#
前言 最近在学习网络原理,突然萌发出自己实现一个网络服务器的想法,并且由于第三代小白机器人的开发需要,我把之前使用python.PHP写的那部分代码都迁移到了C#(别问我为什么这么喜欢C#),之前使用 ...
- win10 uwp 屏幕常亮
我们在播放视频需要屏幕常亮,我们可以使用DisplayRequest,因为代码简单我直接写,代码来自https://msdn.microsoft.com/en-us/library/windows/a ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(06异常过滤器)
概念介绍 异常过滤器主要在我们方法中出现异常的时候触发,一般我们用 异常过滤器 记录日志,或者在产生异常时做友好的处理 如果我们需要创建异常过滤器需要实现IExceptionFilter接口. nam ...
- (转)java内存泄漏的定位与分析
转自:http://blog.csdn.net/x_i_y_u_e/article/details/51137492 1.为什么会发生内存泄漏 java 如何检测内在泄漏呢?我们需要一些工具进行检测, ...
- Java Condition
在Condition中,用await()替换wait(),用signal()替换notify(),用signalAll()替换notifyAll(),传统线程的通信方式,Condition都可以实现, ...
- PhiloGL学习(2)——骚年,让我们荡起双桨
前言 上一篇文章中简单介绍了PhiloGL框架如何上手.GLSL语言以及简单的绘制一个方块(见PhiloGL学习(1)--场景创建及二维方块加载).本文很简单,我们一起来让这个方块动起来. 一. ...
- css雪碧图(css splite)
将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0