js 下获取子元素的方法

Posted 撒哈拉的雪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 下获取子元素的方法相关的知识,希望对你有一定的参考价值。

 

笔记核心:

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 找到子元素的父元素

js实现获取父元素下的子元素,如下的代码,我想通过getElementByClassName获取到标签table,

js/jquery父元素调用子元素方法失效

怎么按元素id 使用js为页面元素绑定click()方法?

js删除一个父元素下面的所有子元素

js如何获取页面 元素