笔记核心:
firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点。
js不同于jQuery,在获取DOM时,有很多不方便的地方,哎,没办法,原始的东东,虽然万能,但却不方便。
咱今天在使用原生js的时候,就遇见一个坑------》firstChild,具体是使用firstChild获取元素的第一个子节点,可是相当的悲剧!!!
这个是一个小模型:
123
在上面这段代码中,如果使用以下js代码:
var oDiv=document.getElementByTagName("div")[0];
alert(oDiv.firstChild.nodeName)
死活都得不出结果,后来查了才知道,原来:在现代浏览器下,比如Chrome,FF,ie11等等,由于会把
两个标签之间的空白节点也解析出来,所以会alert出#text(由于空白节点是属于text文本节点)
如果把html的Demo改成如下,则无论在古老浏览器还是现代浏览器中得到的结果都是一样:
123
这让咱想起了代码压缩的好处~~~
解决:使用firstElementChild
使用firstChild确实可