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>
window.onload=function()
{
var oUl=document.getElementById('ul1');
for(var i=0;i<oUl.childNodes.length;i++)
{
alert(oUl.childNodes[i].nodeType)
}
}
</script>
结果会报出来3和1 现在说明3代表文本节点，1代表元素节点
nodeType==3 è代表文本节点
nodeType==1 è代表元素节点
大部分浏览器兼容问题都是用if解决
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
//alert(oUl.childNodes.length)
for(var i=0;i<oUl.childNodes.length;i++)
{
alert(oUl.childNodes[i].nodeType)
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
}
</
本文转自 新网学会 51CTO博客，原文链接：http://blog.51cto.com/xwxhvip/1980413 ，如需转载请自行联系原作者
