[转载] js 下获取子元素的方法 -- 李富生
地址:https://www.cnblogs.com/web-fusheng/p/6816440.html
firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点。
js不同于jQuery,在获取DOM时,有很多不方便的地方,哎,没办法,原始的东东,虽然万能,但却不方便。
咱今天在使用原生js的时候,就遇见一个坑------》firstChild,具体是使用firstChild获取元素的第一个子节点,可是相当的悲剧!!!
这个是一个小模型:
<div><p>123</p> </div>
在上面这段代码中,如果使用以下js代码:
var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName)
死活都得不出结果,后来查了才知道,原来:在现代浏览器下,比如Chrome,FF,ie11等等,由于会把<div> <p>两个标签之间的空白节点也解析出来,所以会alert出#text(由于空白节点是属于text文本节点)
如果把html的Demo改成如下,则无论在古老浏览器还是现代浏览器中得到的结果都是一样:
<div><p>123</p></div>
这让咱想起了代码压缩的好处~~~
解决:使用firstElementChild
使用firstChild确实可以实现获取到父元素的第一个子元素节点,但是当div与p之间存在空白节点的话,first就会获取到空白节点而不是第一个元素节点。
所以,DOM扩展了一个firstElementChild方法,这个方法可以获取到父元素的第一个子元素节点
可以理解嘛,毕竟从字面意思上,firstChild就是第一个孩子,空白节点也算是嘛,虽说看不见,但是还是纯在的呀(你看不见,它就不纯在嘛?!)
而firstElementChild就指明要第一个子元素,空白的东东就不算了~~
但是问题又来了,firstElementChild这个方法在现代浏览器中兼容,但是在ie678中却没有这个方法,一旦在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。
[转载] js 下获取子元素的方法 -- 李富生相关推荐
- js 下获取子元素的方法
笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...
- 由获取子元素的方法find和children所获
html代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www ...
- 获取子元素节点(children,childNodes)
在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...
- jq 获取含类的子集_jquery获取子元素
Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...
- html 获取下一个兄弟节点,JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法...
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(v ...
- js父元素获取子元素img_JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名 ...
- jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
- jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
- html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级 上一个 下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
最新文章
- Java集合框架系列教程三:Collection接口
- Boost.Asio技术文档汇总
- 【职场】看一位前端工程师如何上班摸鱼
- Android DDMS位置
- ASP.NET MVC3 控制器
- 转:靠谱的代码和DRY
- Linq to Sql: 集成数据库语言查询之一
- vue-cli3 中 sockjs-node/info?t=报错 的解决方法
- MySQL 基础操作
- 长虹电视刷机固件包汇总
- cocos2dx lua代码和图片资源加密和解密
- 工程计算书(计算稿)共享和服务—PASS云计算书平台
- linux 录音软件,Audio Recorder 1.6.0 发布,Ubuntu下录音软件
- 程序猿的每日单词(一)
- 我今天人品大爆发啊,赚了299美元
- 数据安全法下,企业如何平衡数据安全合规与业务性能?| 产业安全专家谈
- Linux strace工具
- 圣诞老人python代码_秘密圣诞老人分类
- 学习amber教程A17:伞形采样,绘制丙氨酸三肽的势能面
- docker 批量删除images
热门文章
- 2021年中国羊肉市场供需现状、进出口贸易及价格走势分析[图]
- 测试人生 | 从外行到外包,从手工测试到知名互联大厂测开 这个90后是怎么腾飞的?
- 美容店信息管理系统与小程序设计与实现
- Installation failed with message Invalid File 无法调试
- setlocale(LC_ALL,) 中的 LC_* 是什么意思,以及 LANGUAGE/LANG 都是些啥?
- Android系统添加USB共享网络
- Chrome浏览器电商账号多开防关联工具-VMLogin中文版防关联浏览器
- 有趣的小游戏——猜数字
- XTU | 人工智能入门复习总结
- 纽约大学计算机科学研究生录取条件,纽约大学本科及研究生录取条件 申请纽约大学干货分享...