js下firstElementChild以及firstChild,Children的用法
来源:互联网 发布:c语言程序员面试题 编辑:程序博客网 时间:2024/05/29 18:27
一、
<div> <p>123</p></div>
在上面这段代码中,如果使用以下js代码
var oDiv=document.getElementByTagName("div")[0];alert(oDiv.firstChild.nodeName)
在ie9以下,alert出来的是p(p标签名字),但是在现代浏览器下,比如Chrome,FF,ie11等等,由于会把<div> <p>两个标签之间的空白节点也解析出来,所以会alert出#text(由于空白节点是属于text文本节点)
如果把html的Demo改成如下,则无论在古老浏览器还是现代浏览器中得到的结果都是一样
<div><p>123</p></div>
由于没有了div与p标签之间的空白,所以执行上面js代码时无论在ie678还是现代浏览器中都输出p标签
二、
在平时写js中,我们经常会想用一个方法直接获取到父元素的第一个子元素节点,就好比如上面的例子中,使用firstChild确实可以实现这一功能
<div><p>123</p></div>
var first=document.getElementByTagName("div")[0].firstChild
这样我们就可以获取到第一个元素子节点,但是当div与p之间存在空白节点的话,first就会获取到空白节点而不是第一个元素节点。
所以,DOM扩展了一个firstElementChild方法,这个方法可以获取到父元素的第一个子元素节点
<div> <p>123</p></div>
var first=document.getElementByTagName("div")[0].firstElementChild
即便div与p标签中存在空白节点,但是使用firstElementChild方法仍然可以正常的获取到div的第一个子元素节点p。
但是问题又来了,firstElementChild这个方法在现代浏览器中兼容,但是在ie678中却没有这个方法,一旦在ie678中使用这个方法就会出错。
三、
虽然firstElementChild方法在ie678中不兼容,但是还有一个方法,便是Children方法。
经测试children方法在所有主流浏览器中都兼容,包括ie678,并且它也能实现firstElementChild的功能
<div> <p>123</p></div>
var first=document.getElementByTagName("div")[0].children[0]
所以,以后写js的时候,如果想获取到子元素的element节点,最好使用children方法,childNodes方法以及firstChild方法在现代浏览器中使用,都会把元素标签中的空白节点检测出来,一般我们使用这两个方法都是为了获取到元素的元素节点,空白节点会给我们造成很多不必要的bug,而children方法则是只检测element元素节点,防范于未然,所以推荐大家以后使用children方法来替代childNodes。
转载自:http://www.cnblogs.com/jelly7723/p/4871849.html
- js下firstElementChild以及firstChild,Children的用法
- js下firstElementChild firstChild 以及childNodes和children方法
- 浅谈childNodes和children以及firstChild和firstElementChild
- javascript中childNodes与children 区别 以及firstChild与firstElementChild区别
- firstChild和firstElementChild的区别
- js中firstChild和childNodes[0]以及children[0]之间的点滴问题
- firstChild与firstElementChild的兼容处理
- firstElementChild与firstChild区别
- firstChild和firstElementChild
- firstChild和firstElementChild兼容
- firstElementChild和firstChild区别
- tinyXML中FirstChild用法
- JS firstChild,LastChild
- 获取子类元素,FirstElementChild、children和ChildNode等等
- js :parentNode,firstChild,parentNode,nextSibling;
- js:childNodes与firstChild、lastChild
- firstchild
- Js-parentNode、parentElement,childNodes、children 的区别
- 京东11.11:京麦服务市场交易平台备战实践
- logstash 中报错 ArgumentError invalid byte sequence in UTF-8
- 修饰符
- 【深度】关于天基信息网络综合管控系统建设的思考
- 【SMS】SMS协议介绍之常用缩语
- js下firstElementChild以及firstChild,Children的用法
- Java链接MySQL时遇到的问题
- RADOS分布式对象存储原理简介
- C插入排序
- CxImage开源库在VS2013的编译和使用
- Centos7 MongoDB
- java序列化
- Viewpager+handler实现轮播图--pizifusheng
- 命令行使用总结