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的方式获取元素,你可以利用这两个方法直接获取它,或者象它的元素。 |
Hello(游客) 发表于 - 2008-9-21 9:09:34
personal(游客) 发表于 - 2008-9-20 18:30:06
personal(游客) 发表于 - 2008-9-20 15:35:50
personal(游客) 发表于 - 2008-9-17 13:12:01
personal(游客) 发表于 - 2008-9-17 4:49:34
personal(游客) 发表于 - 2008-9-16 19:08:57
personal(游客) 发表于 - 2008-9-16 10:45:25
personal(游客) 发表于 - 2008-9-16 2:23:49
personal(游客) 发表于 - 2008-9-15 16:27:20
personal(游客) 发表于 - 2008-9-14 23:12:01
personal(游客) 发表于 - 2008-9-14 11:59:18
personal(游客) 发表于 - 2008-9-13 21:42:19
personal(游客) 发表于 - 2008-9-13 10:45:28
personal(游客) 发表于 - 2008-9-12 16:46:18
Hello(游客) 发表于 - 2008-9-12 4:22:10
personal(游客) 发表于 - 2008-9-10 15:31:33
personal(游客) 发表于 - 2008-9-10 7:30:09
personal(游客) 发表于 - 2008-9-9 7:54:29
personal(游客) 发表于 - 2008-9-8 21:11:34
personal(游客) 发表于 - 2008-9-8 13:13:39
personal(游客) 发表于 - 2008-9-7 18:34:31
personal(游客) 发表于 - 2008-9-7 8:17:28
Hello(游客) 发表于 - 2008-9-7 2:35:33
personal(游客) 发表于 - 2008-9-6 22:46:08
personal(游客) 发表于 - 2008-9-6 0:19:33
personal(游客) 发表于 - 2008-9-5 10:37:10
personal(游客) 发表于 - 2008-9-4 18:59:03
personal(游客) 发表于 - 2008-9-4 6:27:08
personal(游客) 发表于 - 2008-9-3 9:47:31
Hello(游客) 发表于 - 2008-9-3 7:40:56
personal(游客) 发表于 - 2008-9-2 7:21:34
Hello(游客) 发表于 - 2008-8-31 9:44:34
personal(游客) 发表于 - 2008-8-30 19:59:25
personal(游客) 发表于 - 2008-8-30 6:36:03
personal(游客) 发表于 - 2008-8-29 18:39:48
personal(游客) 发表于 - 2008-8-29 1:59:14
Hello(游客) 发表于 - 2008-8-28 13:49:59
personal(游客) 发表于 - 2008-8-28 10:44:45
personal(游客) 发表于 - 2008-8-26 13:09:27
Hello(游客) 发表于 - 2008-8-25 21:19:08
发表评论: