AJAX系列---DOM
胜美设计工作室 发表于 - 2006-7-10 11:27:29

Ajax---DOM(一)

DOM=Document Object Model 文档对象模型,Any More else?。DOM到底是什么东西?翻译一下Jesse James Garrett提到的那篇文章,文章有些长,不过确实精确地说明了DOM到底是什么东东,虽然这篇文章是针对NetScape写的,不过DOM由W3C统一管理,各个浏览器的实现应该是一样的。

为6.0浏览器编写脚本
Scott Andrew LePera
2002/01/27

诚然,NetScape 6还远没有达到完美,但是对DOM和CSS的强有力的支持,已经使它在正确的方向上前进了很大的一步。它有希望成为流行前线的No.1,成功的浏览器将被大众冲浪者接受,并使开发者的生活更加容易。
那么这对编写脚本的人们意味着什么?太多了,因为DOM结构暴露了新的强有力的方法,可以用它们访问和操纵任何的文档的元素。这胜过了DHTML和它的<div>标签。它可以通过JavaScript对页面的任意一个元素做全面的控制。

利用DOM的脚本方法可以实现如下功能:
1.凭空产生新的元素(on the fly)。不需要用document.write()在页面里插入Html和CSS,不需要对象构造,DOM允许你凭空产生全部元素(out of thin air)。
2.获取文档的所有标签,或者在不获取标签的情况下获取文本内容。
3.不需要改写innerHtml或者document.write(),就可以插入,改变或者删除任何元素的文本。
4.移动文档的部分内容或者作为碎片移除部分内容,并对它们进行处理。
4.最好的是,所有的这些新方法都可以在支持DOM的所有浏览器上运行,再也不用探测到底是哪种浏览器了。不再需要为同一个页面针对不同的页面写不同的版本了。它只需要一个脚本。
这篇文章非常简洁,没有对DOM脚本做技术上的介绍,并且注意力放到NetScape 6。更多的介绍请参照W3C关于DOM和CSS 的介绍。
是不是已经很兴奋了?让我们来看一下DOM的实质吧!
Part1.整体的了解(New Pieces Of The Puzzle)
DOM最好的理解是把它当成一棵树,主干表示文档,很多分支表示页面上的不同元素。树的每一个部分都称为node,Nodes可以是标签,比如HTML和XML,也可以是标签的属性,比如"align=left"或者"size=3"。Nodes也可以是文档内的文字信息,正如你现在看到的页面内容。
一个结点可以是另一个更大结点的一部分,更大的结点称为该结点的父结点。一个结点也可以是在它之内任意的数量的子节点的父结点。比如,document就是一个结点,如果文档包含图片,那么document就是图片结点的父结点,它们依次称为document的子节点,图片结点又是他们属性子结点的父结点。正如树是树枝的父结点,树枝是叶子的父结点一样,所以称为文档对象模型。
阿哦,明白了?
在4.0版本的浏览器里,我们能够用JavaScript操作的结点个数受到限制。利用全面支持DOM的程序比如NetScape6.0和Mozilla,几乎所有的元素和结点都可以为我们所用。如何访问它们首先取决于元素属性的ID,让我们看一下两个重要的DOM方法,它们允许我们访问结点。
getElementById()
如果你知道一个元素的ID,可以直接采用新的DOM文档方法getElementById()访问它。只需要把元素的ID作为方法的参数,该方法将返回对元素的引用。
<div id="myElement"></div>
为了在JavaScript中获取上述元素,我们可以利用
x = document.getElementById("myElement")
x现在已经变成这个<div>元素的引用,我们就可以用x操作这个<div>标签,正如我们马上就会看到的那样。
getElementsByTagName()
另一个获取元素的方式是通过getElementsByTagName()这个方法,这个方法用标签类型作为参数,返回文档内所有为该类型的元素的集合(或者数组)。
比如,你要获取文档内所有的图片元素的集合,你应该这样作:
x = document.getElementsByTagName("img")
x成为文档内所有<IMG>元素引用的集合。要访问集合中的特定元素,比如第一个元素,我们可以通过它的初始号或者在集合中的位置引用。
x = document.getElementsByTagName("img")
firstImage = x.item(0)
getElementsByTagName()获取所有匹配的元素,而不管有没有ID分配给它们,这使得获取没有通常不会分配ID的元素非常方便,比如<P>,<TD>
getElementById()和getElementsByTagName()是遍历DOM树的很好的方式,因为我们不需要写脚本查找直到最远的分支。不是采用document.something.somethingElse的方式获取元素,你可以利用这两个方法直接获取它,或者象它的元素。

thanks
Hello(游客) 发表于 - 2008-9-21 9:09:34
thanks
personal(游客) 发表于 - 2008-9-20 18:30:06
ding
personal(游客) 发表于 - 2008-9-20 15:35:50
ding
personal(游客) 发表于 - 2008-9-17 13:12:01
ding
personal(游客) 发表于 - 2008-9-17 4:49:34
ding
personal(游客) 发表于 - 2008-9-16 19:08:57
ding
personal(游客) 发表于 - 2008-9-16 10:45:25
ding
personal(游客) 发表于 - 2008-9-16 2:23:49
ding
personal(游客) 发表于 - 2008-9-15 16:27:20
ding
personal(游客) 发表于 - 2008-9-14 23:12:01
ding
personal(游客) 发表于 - 2008-9-14 11:59:18
ding
personal(游客) 发表于 - 2008-9-13 21:42:19
ding
personal(游客) 发表于 - 2008-9-13 10:45:28
ding
personal(游客) 发表于 - 2008-9-12 16:46:18
thanks
Hello(游客) 发表于 - 2008-9-12 4:22:10
以下内容含脚本,或可能导致页面不正常的代码

说明:上面显示的是代码内容。您可以先检查过代码没问题,或修改之后再运行。
ding
personal(游客) 发表于 - 2008-9-10 15:31:33
ding
personal(游客) 发表于 - 2008-9-10 7:30:09
ding
personal(游客) 发表于 - 2008-9-9 7:54:29
ding
personal(游客) 发表于 - 2008-9-8 21:11:34
ding
personal(游客) 发表于 - 2008-9-8 13:13:39
ding
personal(游客) 发表于 - 2008-9-7 18:34:31
ding
personal(游客) 发表于 - 2008-9-7 8:17:28
thanks
Hello(游客) 发表于 - 2008-9-7 2:35:33
以下内容含脚本,或可能导致页面不正常的代码

说明:上面显示的是代码内容。您可以先检查过代码没问题,或修改之后再运行。
ding
personal(游客) 发表于 - 2008-9-6 22:46:08
ding
personal(游客) 发表于 - 2008-9-6 0:19:33
ding
personal(游客) 发表于 - 2008-9-5 10:37:10
ding
personal(游客) 发表于 - 2008-9-4 18:59:03
ding
personal(游客) 发表于 - 2008-9-4 6:27:08
ding
personal(游客) 发表于 - 2008-9-3 9:47:31
thanks
Hello(游客) 发表于 - 2008-9-3 7:40:56
以下内容含脚本,或可能导致页面不正常的代码

说明:上面显示的是代码内容。您可以先检查过代码没问题,或修改之后再运行。
ding
personal(游客) 发表于 - 2008-9-2 7:21:34
thanks
Hello(游客) 发表于 - 2008-8-31 9:44:34
以下内容含脚本,或可能导致页面不正常的代码

说明:上面显示的是代码内容。您可以先检查过代码没问题,或修改之后再运行。
ding
personal(游客) 发表于 - 2008-8-30 19:59:25
ding
personal(游客) 发表于 - 2008-8-30 6:36:03
ding
personal(游客) 发表于 - 2008-8-29 18:39:48
ding
personal(游客) 发表于 - 2008-8-29 1:59:14
thanks
Hello(游客) 发表于 - 2008-8-28 13:49:59
以下内容含脚本,或可能导致页面不正常的代码

说明:上面显示的是代码内容。您可以先检查过代码没问题,或修改之后再运行。
ding
personal(游客) 发表于 - 2008-8-28 10:44:45
ding
personal(游客) 发表于 - 2008-8-26 13:09:27
thanks
Hello(游客) 发表于 - 2008-8-25 21:19:08

发表评论:

    昵称:
    密码: (游客无须输入密码)
    主页:
    标题: