【20190228】JavaScript-獲取子元素

在寫JavaScript的時候發現了一個獲取子節點的坑，如如下的html結構

1 <div id="parent">
2     <div>1</div>
3     <div>2</div>
4 </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才行。