之前看html后對節點這個東西的蓋簾一直很模糊，so在網上找了一本《DOM編程藝術》的PDF文檔來看，編程試驗了下
<body>
<div id="box" onclick="console.log(this)">
this
<h2 style="width: 200px" class="123" id="wrap">
here
<span class="1234">here</span> where
</h2>
that
</div>
</body>
<script type="text/javascript">
// var div = document.getElementById('box').childNodes[1].childNodes[0].nodeValue;
var div = document.getElementById('box').childNodes;
console.log(div);
</script>
在chrome中運行
顯示有6個節點，我們依次來看看這6個節點是什么
- text:this
- h2#wrap.123:here<span class="1234">here</span> where
- text:that
可以看出，childNodes是當前元素的第一代子節點，而且順序是有以下幾種節點組合
- text
- text element text
- text element text element text
當.box中只純在text時，或者為空時，也會有一個text節點，也就是第一種情況
當.box中存在一個element時，則在element前后都會存在一個text節點，不管text是否為空，也就是第二種情況
依次類推即可