码迷,mamicode.com
首页 > 其他好文 > 详细

DOM使用

时间:2014-11-17 01:40:08      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   io   color   ar   使用   sp   java   

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;

 

DOM使用

标签:des   style   blog   io   color   ar   使用   sp   java   

原文地址:http://www.cnblogs.com/fantasy01/p/4102742.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!