天天看点

javascript之DOM技术(一)

javascript之DOM技术(一)

text_node                                         3

javascript之DOM技术(一)

cdata_section_node                 4

javascript之DOM技术(一)

entity_reference_node            5

javascript之DOM技术(一)

entity_node                                     6

javascript之DOM技术(一)

processing_instrction_node       7

javascript之DOM技术(一)

comment_node                              8

javascript之DOM技术(一)

document_node                            9

javascript之DOM技术(一)

document_type_node               10

javascript之DOM技术(一)

document_fragment_node   11

javascript之DOM技术(一)

notation_node                              12

ie6不支持,不过你可以自定义一个js对象node。

3.处理特性

处理特性可以使用标准的namenodemap中的方法:

getnameditem(name) removenameditem(name)  setnameditem(node)    item(pos)

比如:<p id="test">测试</p>

假设变量op是上面的p节点的引用,我们要访问op的id属性:

var sid=op.attributes.getnameditem("id").nodevalue;

这些方法用起来很累赘,所以dom又定义了三个方法来简化:

getattribute(name)         ——返回名称为name的属性的值

setattribute(name,value)   ——顾名思义

removeattribute(name)      ——顾名思义  

上面的例子可以改写为:

var sid=op.getattribute("name");

4.访问指定节点:

熟知的getelementbytagname(name),getelementbyname(name),getelementbyid(id)三个方法,不再展开。

5.创建和操作节点:

(1)创建新节点,一张ie(6.0)和ff对dom level1的创建新节点方法支持的对照表:

javascript之DOM技术(一)

方法                                                               ie                               ff

javascript之DOM技术(一)

createattribute(name)                                 y                                y

javascript之DOM技术(一)

createcdatasection(text)                        n                                y

javascript之DOM技术(一)

createcomment(text)                                    y                                y

javascript之DOM技术(一)

createdocumentfragment()                        y                                y

javascript之DOM技术(一)

createelement(tagname)                             y                                 y

javascript之DOM技术(一)

createentityreference(name)                     n                                 y

javascript之DOM技术(一)

createprocessinginstruction(

javascript之DOM技术(一)

target,data)                                                   n                                  y

javascript之DOM技术(一)

createtextnode(text)                                  y                                   y

下面介绍常用的几个方法

(2)createelement(),createtextnode(),appendchild()

例子:

javascript之DOM技术(一)

<html>

javascript之DOM技术(一)

    <head>

javascript之DOM技术(一)

        <title>createelement() example</title>

javascript之DOM技术(一)

        <script type="text/javascript">

javascript之DOM技术(一)

            function createmessage() {

javascript之DOM技术(一)

                var op = document.createelement("p");

javascript之DOM技术(一)

                var otext = document.createtextnode("hello world!");

javascript之DOM技术(一)

                op.appendchild(otext);

javascript之DOM技术(一)

                document.body.appendchild(op);

javascript之DOM技术(一)

            }

javascript之DOM技术(一)

        </script>

javascript之DOM技术(一)

    </head>

javascript之DOM技术(一)

    <body onload="createmessage()">

javascript之DOM技术(一)

    </body>

javascript之DOM技术(一)

</html>

javascript之DOM技术(一)

在页面载入后,创建节点op,并创建一个文本节点otext,otext通过appendchild方法附加在op节点上,为了实际显示出来,将op节点通过appendchild方法附加在body节点上。此例子将显示hello world!

(3)removechild(),replacechild()和insertbefore()

从方法名称就知道是干什么的:删除节点,替换节点,插入节点。需要注意的是replacechild和insertbefore两个参数都是新节点在前,旧节点在后。

(4)createdocumentfragment()

此方法主要是为了解决大量添加节点时,速度过慢。通过创建一个文档碎片节点,将要添加的新节点附加在此碎片节点上,然后再将文档碎片节点append到body上面,替代多次append到body节点。

javascript之DOM技术(一)
javascript之DOM技术(一)
javascript之DOM技术(一)

        <title>insertbefore() example</title>

javascript之DOM技术(一)
javascript之DOM技术(一)

            function addmessages() {

javascript之DOM技术(一)

                var arrtext = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];

javascript之DOM技术(一)
javascript之DOM技术(一)

                var ofragment = document.createdocumentfragment();

javascript之DOM技术(一)
javascript之DOM技术(一)

                for (var i=0; i < arrtext.length; i++) {

javascript之DOM技术(一)

                    var op = document.createelement("p");

javascript之DOM技术(一)

                    var otext = document.createtextnode(arrtext[i]);

javascript之DOM技术(一)

                    op.appendchild(otext);

javascript之DOM技术(一)

                    ofragment.appendchild(op);

javascript之DOM技术(一)

                }

javascript之DOM技术(一)
javascript之DOM技术(一)

                document.body.appendchild(ofragment);

javascript之DOM技术(一)
javascript之DOM技术(一)
javascript之DOM技术(一)
javascript之DOM技术(一)
javascript之DOM技术(一)

    <body onload="addmessages()">

javascript之DOM技术(一)
javascript之DOM技术(一)
javascript之DOM技术(一)

二、html dom的特征功能

html dom的特性和方法不是标准的dom实现,是专门针对html同时也让一些dom操作变的更加简便。

1.让特性像属性一样

访问某元素的特性需要用到getattribute(name)方法,html dom扩展,可以直接使用同样名称的属性来获取和设置这些值:

比如  <img src="test.jpg"/>

假设oimg是此元素的引用

(oimg.getattribute("src")可以直接写成:oimg.src,设置值简化为:

oimg.src="test2.gif";

唯一特殊的class属性,因为class是ecmascript的保留字,所以替代的属性名是classname.

2.table的系列方法:

为了简化创建表格,html dom提供了一系列的表格方法,常用几个:

cells  ——返回</tr>元素中的所有单元格

rows   ——表格中所有行的集合

insertrow(position) ——在rows集合中指定位置插入新行

deleterow(position) ——与insertrow相反

insertcell(position) ——在cells集合的指定位置插入一个新的单元格

deletecell(position) ——与insertcell相反

三。遍历dom

dom的遍历是dom level2中提出的标准,ie6没有实现,mozilla和safari已经实现,最新ie7不清楚是否实现。不再展开,具体请见《javascript高级程序设计》

继续阅读