软件测试从业者,立志做出一番事业,2015加油~!

DOM对象概述

上一篇 / 下一篇  2009-03-30 09:50:35 / 个人分类:开发技术

一、DOM:Document Object Model(文档对象模型),是由W3C组织制定的一套操作文档的

应用编程接口。

   W3C(World Wide Web Consortium):万维网联盟,该组织的主要工作是制定Web技术的标准,其中DOM只是其中的一项标准,其他的标准还有CSS,XML,XHML等等。

二、DOM分类:Core DOM, HTML DOM等等。Core DOM在所有的标记语言上都可以使用所以可以利用Core DOM来操作HTML文档,当然我们也可以利用HTML DOM提供的一些特殊的方法来操作HTML文档,但是要注意HTML DOM只能针对HTML文档使用,而不能用于其他的文档,比如XML文档等等。现在我们一起来学习Core DOM里面的一些常用的属性和方法。

三、在正式学习Core DOM的属性和方法之前,先来了解一下HTML文挡的一些基本概念。

    任何一篇HTML文档被浏览器加载到计算机的内存后,都会被解析为一颗内存树。这颗树是由一个一个的节点构成的。其中节点有12种类型,但是最常用的只有3种,分别是元素节点、属性节点、文本节点。例如:

  

    test.html

    <html>

            <head>

           <title>DOM Example</title>

            </head>

        <body>

                    <div style="width:800px">This is my first demo!</div>

                 <font color=”red”>hello world!</font>

        <body>

    </html>

   

其节点分解图如下:

Html:(元素节点)

Body:(元素节点)

head:(元素节点)

title:(元素节点)

DOM Example:(文本节点)

div:(元素节点)

font:(元素节点)

属性节点:

style="width:800px"

文本节点:This is my first demo!

属性节点:

color=”red”

文本节点:hello world!

练习:

<div id=”testdiv”>

      <p>This is <em>my</em> content.</p>

</div>

画出其节点分解图

四、DOM里的常见属性和方法

getElementById:根据Id获得某个元素

getElementsByTagName:获得指定标签名的所有元素

getElementsByName:获得制定名称的所有元素

nodeName:节点的名字

nodeValue:节点的值

nodeType:节点的类型(元素节点:1;属性节点:2;文本节点:3)

ownerDocument:指向这个节点所属的文档

firstChild:指向第一个子节点

lastChild:指向最后一个子节点

childNodes:获得所有的子节点

previousSibling:指向前一个兄弟节点

nextSibling:指向下一个兄弟节点

parentNode:指向父节点

hasChildNodes:当前节点是否有子节点

attributes:返回元素节点的所有属性(返回的是一个数组)

     

      append:附加,添加

appendChild(node):将node添加到childNodes的末尾

removeChild(node):将node从childNodes中删除

replaceChild(newNode, oldNode):将childNodes中的oldNode替换成newNode

insertBefore(newNode, refNode):在childNodes中的refNode之前插入newNode

      因为元素节点才有属性,所以只有元素节点才能调用

getAttribute,setAttribute, removeAttribute

getAttribute:获得元素的指定属性值

setAttribute:为元素的指定属性赋值

setAttribute(属性名,属性值)

removeAttribute:删除元素的指定属性

createElement:创建元素节点

createTextNode:创建文本节点

五、例子

Document.getElementsByTagName(“p”);

Document.getElementsByName(“myName”);

document.getElementsByTagName(“ 标签名字”);

<html>

      <head>

      </head>

      <body>

           <p name=”myName”>aaa<p>

           <p name=”myName”>bbb</p>

           <p name=”myName”>ccc</p>

      </body>

</html>


TAG:

 

评分:0

我来说两句

Open Toolbar