《DOM及DOM技术介绍.》由会员分享，可在线阅读，更多相关《DOM及DOM技术介绍.（14页珍藏版）》请在金锄头文库上搜索。
1、DOM及DOM技术介绍2008-12-02文章来源：浏览次数：禺1674本文概述了一些强大的，基本的DOM 级别一中的方法以及如何在JavaScript中使用它们。你将会学习到如何动态地创建，访问，控制以及移除HTML元素。这里提到的DOM方法，并非是HTML专有的；它们在 XML中同样适用。这里所有的示例，在任何全面支持 DOM Ievel1的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器，像网景公司的下一代导航者(Navigatior )浏览器等。这里的示例代码在IE5中也能正常工作。(这里所提到的DOM方法是文档对象模型规范(级别一)的核心的一部分。DO
2、M 级别一包括对文档进行访问和处理的方法( DOM 1 核心)和专门为 HTML文档定 义的方法。)DOM简介：DOM的全称是文档对象模型(即Document Object Model)，它在本质上是一种文档平台。文档对象模型(DOM )是表示文档(比如 HTML和XML )和访问、操作构成文 档的各种元素的应用程序接口( API )。支持Javascript的所有浏览器都支持 DOM。DOM实际上是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的一种语言平台。这段文字是通过一个实例代码来介绍了DOM的。那么我们从下面的HTML示例来开始吧。这段示例使用了DOM 级别一的方法，从 Ja
3、vaScript 动态创建了一个 HTML表格。它创建了一个包含了四个单元的小表格，并且在每个单元中含有文本。单元中文字内容是这个单元式y行x列”来展示单元格在表格中所处的位置。 样例代码-使用JavaScript 和DOM 接口创建一个 HTML表格function start() / 获得从body的引用var mybody=document.getElementsByTagName(body).item(0);/ 创建一个 TABLE的元素mytable = document.createElement(TABLE);/ 创建一个 TBODY的元素mytablebody = docume
4、nt.createElement(TBODY);/ 创建所有的单元格for(j=0;j2;j+) / 创建一个TR元素mycurrent_row=document.createElement(TR);for(i=0;iv/headvbody onload=start()注意我们创建元素和文本节点的顺序：1. 首先我们创建了 TABLE元素。2. 然后，我们创建了 TABLE的子元素-TBODY 。3. 然后，我们使用循环语句创建了TBODY的子元素-TR 。4. 对于每一个TR元素，我们使用一个循环语句创建它的子元素-TD 。5. 对于每一个TD元素，我们创建单元格内的文本节点。现在，我们创建
5、了TABLE，TBODY，TR，TD等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序：1. 首先，我们将每一个文本节点接在TD元素上mycurrent_cell.appendChild(currenttext);2. 然后，我们将每一个 TD元素接在他的父 TR元素上。mycurrent_row.appendChild(mycurrent_cell);3. 然后，我们将每一个 TR元素接在他们的父TBODY元素上。mytablebody.appendChild(mycurrent_row);4. 下一步,我们将TBODY元素接在他的父 TABLE元素上mytab
6、le.appendChild(mytablebody);5. 最后，我们将TABLE元素接在他的父元素BODY上。mybody.appendChild(mytable);请记住这个机制。你将会在W3C DOM 编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。下面是由javascript代码生成的HTML代码：vTABLE border=5cell is row 0 column 0cell is row 0 column 1cell is row 1 column 0cell is row 1 column 1v/TABLEF面是由代码生成的 TABL
7、E及其子元素的 DOM对象树:你可以只用一些DOM方法来创建这个表格和它内部的子元素。请在脑海中时刻保留你想要创建的数据结构的树之模型，这样有利于更简便的写出必须的代码。 在图1的TABLE 树中，TABLE有一个子元素 TBODY。TBODY有两个子元素。每一个 TR又含有两个子元 素(TD )。最后，每一个 TD有一个子元素-文本节点。基本 DOM 方法-Sample2.htmlgetEleme ntByTagName 是文档接口( Docume nt in terface)和元素接口(Eleme ntin terface )的中的方法，所以不管是根文档对象还是所有的元素对象都含有方法ge
8、tElementByTagName用来通过它们的标签名称(tag name )来获得某些元素的一系 列子元素。你可以使用的方法是：eleme ntgetEleme ntsByTagName(ag nam。getEleme ntsByTagName返回一个有特定标签名称(tag name )的子元素列表。从 这个子元素列表中，你可以通过调用item和你想得到的元素的下标，来获得单个元素。列表中第一个元素的下标是0。上面的方法很简单，但是当你操作一个巨大的数据结构时还是应该小心一些。ok，我们下一个话题中要继续对我们的表格例子进行修改。下面的示例更加简单，它意图展示一些基础的方法： 样例代码-使用
9、JavaScript 和DOM 接口操作 HTML表格function start() /获得所有的body元素列表(在这里将只有一个)myDocumentElements=document.getElementsByTagName(body);/我们所需要body元素是这个列表的第一个元素myBody=myDocumentElements.item(0);II现在，让我们获得body的子元素中所有的p元素myBodymyBodyElements=myBody.getElementsByTagName(p);/我们所需要的是这个列表中的第二个单元元素myP=myBodyElements.ite
10、m(1); v/headhihello在这个例子中，我们设置变量myP指向DOM对象body中的第二个p元素:HTML1. 首先，我们使用下面的代码获得所有的body元素的列表，因为在任何合法的文档中都只有一个body元素，所以这个列表是只包含一个单元的。document.getElementsByTagName(body)2. 下一步，我们取得列表的第一个元素，它本身就会body元素对象。myBody=myDocumentElements.item(0);3. 然后，我们通过下面代码获得body的子元素中所有的p元素myBodyElements=myBody.getElementsByTag
11、Name(p);4. 最后，我们从列表中取第二个单元元素。myP=myBodyElements.item(1);document一 BODYmyPhello一旦你取得了 HTML元素的DOM对象，你就可以设置它的属性了。比如，如果你希 望设置背景色属性，你只需要添加：myP.style.background=rgb(255,0,0);/设置inline的背景色风格使用 document.createTextNode(.)创建文本节点使用文档对象来调用一个createTextNode方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个展示那个文本节点信息的对象。myTex
12、tNode=document.createTextNode(world);这表示你已经创建了一个TEXT NODE (个文字片断)类型的节点，并且它的内容是“world ”，任何你对myTextNode的引用都指向这个节点对象。如果想将这个文本插入到HTML页面中，你还需要将它作为其他节点元素的子元素。使用即pendChild(.)插入元素那么，通过调用 myP.appe ndChild( node_eleme nt)你可以将这个元素设置成为第二个P的一个新的子元素。myP.appendChild(myTextNode);在测试了这个例子之后，我们注意到，hello和world单词被组合在了一个：helloworld 。事实上，当你看到HTML页面时，hello和world 两个文字节点看起来更像是一个节点。但是请记住它们在文档模型中的形式-是两个节点。第二个节点是一个TEXT_NODE 类型的新节点，也是第二个 P标签的第二个子元素。下面的图标将在文档树 种展示最近创建的文本节点对象。createTextNode 和appendChild是在单词hello和world 之间设置空格的一个简单方法。另外一个重要的注意事项是：appe ndChild方法将把新的子节点接在最后一个子节点之后，正如world被加在了 hello之后。所以如果你想在hello和world中
