DOM树模型
document
|-html
|-head
|-....
|-body
|-.....
要解析页面的前提是要拿到一个对象，然后利用树之间前后的关系进行对象的遍历和操作。
在DHTML的帮助文档当中每个对象有属性、行为、集合、事件、滤镜、方法、对象、样式等描述
1、在属性中，属性的名称有两列，第一列是HTML中的标签名称，第二列是DOM的名称（用于操作对象），而且HTML中有的标签，DOM中都有，HTML中没有的DOM的也有新增。
每个对象在DOM中又称作节点，属性值中有一些节点的基本属性，例如：
<!--获取节点属性-->
<script type="text/javascript">
function getAtribute()
{
var divObj = document.getElementById("divId").nextSibling;
document.write("nodeName:"+divObj.nodeName+"--nodeType:"+divObj.nodeType+"--nodeValue:"+divObj.nodeValue); }
</script>
<input type="button" value="show" onclick="getAtribute()"/>
<div id="divId">
hello, world!
</div>
既然把页面解析成一棵树，则必然存在用来操作树节点的方法，而且，节点之间肯定存在父子、兄弟关系。例如:
//获取父节点
divObj.parent;
//获取下一个兄弟节点
divObj.nextSibling;
//获取上一个兄弟节点
divObj.previousSibling;
//获取第一个子节点
divObj.firstChild;
//获取最后一个子节点
divObj.lastChild;
注意：在返回时，空行算作一个空白文本节点
2、方法中是用于对对象的操作，即相当于java中类的方法.例如：
//添加节点
appendChild(node);
//通过标签名称获取节点,返回的都是数组
getElementByTagName(name);
//判断是否有子节点
hasChildNodes();
3、样式是CSS中的一些属性，也是HTML标签中用于改变数据表现方式中的属性值，在HTML标签中可以利用style来进行调用，在DOM中利用对象来调用，例如：
<!--HTML中利用style来改变数据形式-->
<div style="background-color:red"></div>
<!--利用DHTML来调用样式-->
<script type="text/javascript">
var colorStatus = -1;
function changeColor()
{
var divObj = document.getElementById("divId");
if(colorStatus<0)
{
divObj.style.backgroundColor = "white";
colorStatus = 0;
}
else if(colorStatus<1)
{
divObj.style.backgroundColor = "red";
colorStatus = 1;
}
else if(colorStatus<2)
{
divObj.style.backgroundColor = "blue";
colorStatus = 2;
}
else
{
divObj.style.backgroundColor = "pink";
colorStatus = -1;
}
}
</script>
<input type="button" value="ColorChange" onclick="changeColor()"/>
<div id="divId">
hello, world!
</div>
4、集合，可以返回一组属性等，例如：
//返回一个节点的所有子节点,注意children是数组
var children = divObj.childNodes;