DOM基礎執行個體
一．什麼是DOM節點？
說白了标簽元素和節點都一樣隻是在不同的地方叫法不同
在css裡面 叫标簽
在JS裡面 叫元素
在DOM裡面叫節點
浏覽器支援情況：現在主流浏覽器大概就是：
IE 10%
Chrome 60%
FF 90%
（1） DOM節點
（2） ChildNodes(用來擷取子節點，這個擷取的是一個數組) nodeType節點類型
ChildNodes例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
alert(oUl.childNodes.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
我寫了一個ul裡面有2個li标簽用ChildNodes來擷取ul的子節點，其實都知道 ul的子節點是li ，并且有2個，但是你用某些浏覽器打開應該會出現5個子節點，這多出來的3個其實是3個文本節點，什麼是文本節點其實就是空白，你自己算一下，ul裡面先是空白，然後是li，再是空白，再是li，然後再是空白，這樣就是5個，這就是浏覽器的相容問題！
下面來解決相容問題，然後就用到nodeType了，nodeType是擷取節點的類型
擷取節點類型的例子:借用上面的代碼寫一個for循環
<script>
for(var i=0;i<oUl.childNodes.length;i++)
{
alert(oUl.childNodes[i].nodeType)
}
結果會報出來3和1 現在說明3代表文本節點，1代表元素節點
nodeType==3 è代表文本節點
nodeType==1 è代表元素節點
大部分浏覽器相容問題都是用if解決
//alert(oUl.childNodes.length)
alert(oUl.childNodes[i].nodeType)
if(oUl.childNodes[i].nodeType==1)
oUl.childNodes[i].style.background='red';
</
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)