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, ...
随机推荐
- __无标题栏的窗口拖动___javafx
遇到困难::添加mouseevent监听,我用的mouse_DragedDetected配合MouseEvent.Pressed,,闪的不行,后来借鉴swing的pressed,move,releas ...
- c#字符编码,System.Text.Encoding类,字符编码大全:如Unicode编码、GB18030、UTF-8,UTF-7,GB2312,ASCII,UTF32,Big5
本页列出来目前window下所有支持的字符编码 ---c#通过 System.Text.Encoding.GetEncodings()获取,里面可以对其进行查询,筛选,对同一个字符,在不同编码进行查 ...
- springMvc+hibernate的web application的构建
闲来没事,想整理下一些知识. 这篇文章是关于spring的web程序的搭建,有什么不对的地方希望大家批评指正. 首先我们要了解什么是spring,这里可能很多大家也都明白,无非是一个管理对象的一个容器 ...
- mysql必知必会系列(一)
mysql必知必会系列是本人在读<mysql必知必会>中的笔记,方便自己以后查看. MySQL. Oracle以及Microsoft SQL Server等数据库是基于客户机-服务器的数据 ...
- call()与apply() 改变this指向
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } span.Apple-tab-span ...
- LeetCode 107. Binary Tree Level Order Traversal II (二叉树阶层顺序遍历之二)
Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...
- 使用selenium webdriver+beautifulsoup+跳转frame,实现模拟点击网页下一页按钮,抓取网页数据
记录一次快速实现的python爬虫,想要抓取中财网数据引擎的新三板板块下面所有股票的公司档案,网址为http://data.cfi.cn/data_ndkA0A1934A1935A1986A1995. ...
- hdu 6215 -- Brute Force Sorting(双向链表+队列)
题目链接 Problem Description Beerus needs to sort an array of N integers. Algorithms are not Beerus's st ...
- 事件轮询中的task与microtask
event loop 网上看到的一篇文章,关于介绍task和Tasks, microtasks, queues and schedules,尝试简单翻译一下写进来吧! 原文地址:https://jak ...
- PHP内写css样式
<1>php的两种输出方式 1,echo: 2,print; 栗子: <?php echo:"你好,我的名字是LHH"; print:"你好,我的名字是 ...