DOM使用

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;