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, ...
随机推荐
- JavaWeb(三)JSP之3个指令、6个动作、9个内置对象和4大作用域
前言 前面大概介绍了什么是JSP,今天我给大家介绍一下JSP的三个指令.6个动作以及它的9大内置对象.接下来我们就直接进入正题 一.JSP的3个指令 JSP指令(directive)是为JSP引擎而设 ...
- 安装CentOS7精简版后的配置工作
CentOS7完整版有7.7G,太大了下载起来比较费劲,还是下载了精简版,但是精简版安装以后很多命令都没有,还要动手配yum源,按需安装 国内的yum源比较好的就是163的了,配置方法: 1,进入yu ...
- 我的第一个python web开发框架(6)——第一个Hello World
小白中午听完老菜讲的那些话后一直在思考,可想来想去还是一头雾水,晕晕呼呼的一知半解,到最后还是想不明白,心想:老大讲的太高深了,只能听懂一半半,看来只能先记下来,将明白的先做,不明白的等以后遇到再学. ...
- redis的sentinel主从切换(failover)与Jedis线程池自动重连
本文介绍如何通过sentinel监控redis主从集群,并通过jedis自动切换ip和端口. 1.配置redis主从实例 10.93.21.21:6379 10.93.21.21:6389 10.93 ...
- 使用keepalived使用主备热备份功能
图: 配置文件: 主服务器的配置如下: global_defs { router_id NodeA}vrrp_instance VI_1 { state MASTER #设置为主服务器 interfa ...
- 学习Ajax
1.XHR对象 IE7+.Firefox.Opera.Chrome和Safari都支持原生XMLHttpRequest对象,IE6不支持,只支持ActiveXObject对象,该对象在IE11中已经不 ...
- Mybatis了解(配置)
Mybatis是一个基于jdbc映射框架.它跟hibernate一样都是对数据库进行操作的.Mybatis 它是通过配置xml或者是注解来进行映射的配置,最后实现操作接口与pojo来操作数据库. 因此 ...
- DevOps之虚拟专用网络VPN
唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <虚拟专用网络VPN(Virtual Private Network)> 关于虚拟 ...
- VS2010 c/c++ 本地化 emscripten 配置
配置环境 1.下载emsdk-1.35.0-full-64bit.exe,有VS2010的话直接安装. 2.安装好之后,打开cmd,# emsdk update # emsdk install lat ...
- 为选择屏幕的字段设置F4帮助
在没有参考 数据元素,域和搜索帮助的情况下,自定义F4 帮助 1,PARAMETERS: p_bukrs(4) TYPE C MATCHCODE OBJECT H_T001. 2,AT SELECTI ...