JS实现由三个部分组成的:

1、RCMAscript;翻译,核心,解释器;

2、DOM:document Object Model 文档对象/模型,是有操作HTML的能力,也就是document;

3、BOM:browser Object Model 操作浏览器的,是window;

浏览器对DOM的支持

  • IE: IE6-8支持10%左右的DOM,IE9后有质的飞跃;
  • Chorme:60%左右的支持,对DOM的支持一般
  • FF:号称最标准的浏览器,对DOM的支持,达到99%;

子节点:

<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>

li就是ul的子节点。body就是ul的父节点;

节点分为两个:文本节点和元素节点:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1')
//alert(oUl.childNodes.length); //这个时候会弹出5,因为把文本节点也计算了。IE6-8不计算,IE9计算,chorme也计算的;

}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
asdasdasdsd 文本节点
<span>dsadsadsa 元素节点</span>
</body>
</html>

因为 childNodes是文本节点和元素节点都计算的;假设我们用childNodes给li加背景颜色,就会报错,因为文本的节点没有style的;

可以用nodeType来进行选择节点类型;

    window.onload=function()
{
var oUl=document.getElementById('ul1')
//alert(oUl.childNodes.length); //这个时候会弹出5,因为把文本节点也计算了。IE6-8不计算,IE9计算,chorme也计算的;
for (var i=0;i<oUl.childNodes.length;i++)
{
//alert(oUl.childNodes[i].nodeType);
//当弹窗 nodeType=3 ->文本节点
//当弹窗 nodeType=1 ->元素节点
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
}
</script>

因为nodeType==3 –> 是文本节点;nodeType==1–> 是元素节点;我们只需元素的节点就可以了,可以用if的语言来判断,只有==3的时候,才执行变背景颜色;

用是方法是childNodes和nodeType的配合使用;

如果不这么用,也可以用children:

这不需要处理文本节点和元素节点;仅仅会计算元素节点;

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oDiv=document.getElementById('ul1')
for(var i=0;i<oDiv.children.length;i++)
{
oDiv.children[i].style.background='red'
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>

子节点直计算一层,子节点立面包含的内部子节点是不计算的;

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oDiv=document.getElementById('ul1')
alert(oDiv.children.length)
}
</script>
</head>
<body>
<ul id="ul1">
<li>
sadeasdsa
<span>123213213</span>
</li>
<li></li>
</ul>
</body>
</html>

111111