【20190228】JavaScript-获取子元素

时间:2022-12-06 11:02:46

在写JavaScript的时候发现了一个获取子节点的坑,如以下的html结构

 <div id="parent">
<div>1</div>
<div>2</div>
</div>

运行以下代码,获得的childs将会包含5个子节点。

var parent = document.getElementById("parent");
var childs = parent.childNodes;

因为在现代浏览器下,比如Chrome,FF,ie11等等,由于会把两个标签之间的空白节点也解析出来,因此使用childNodes、firstChild得出的结果里会包含空白节点。

解决办法是使用children或firstElementChild(不兼容ie678)方法代替。

另外还发现一个JavaScript的问题,修改样式的时候可以使用两种方法:一是node.style.width=...,二是node.style.cssText="width: ...",奇怪的是有时候第一种方法不起作用,非得换成cssText才行。