DOM及DOM技术介绍.

1、DOM及DOM技术介绍文章来源： 浏览次数：DB16742008-12-02本文概述了一些强大的，基本的用它们。你将会学习到如何动态地创建,DOM级别一中的方法以及如何在JavaScri pt 中使访问，控制以及移除HTML元素。这里提到的DOM方法，并非是 HTML专有的；它们在XML中同样适用。这里所有的示例，在任何全面支持的浏览中也能DOM级别一包括对文档进行访问和处理的方法（DOM 1 核心）和专门为 HTML文档定DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于 Mozilla 器，像网景公司的下一代导航者（ Navigatior ）浏览器等。这里的

2、示例代码在 IE5 正常工作。（这里所提到的 DOM方法是文档对象模型规范（级别一）的核心的一部分。义的方法。）DOM简介:DOM的全称是文档对象模型（即Document Object Model ），它在本质上是一种文档平台。文档对象模型（DOM ）是表示文档（比如 HTML和XML ）和访问、操作构成文DOM。DOM档的各种元素的应用程序接口 （ API ）。支持Javascript的所有浏览器都支持 实际上是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的一种语言平台。这段文字是通过一个实例代码来介绍了DOM的。那么我们从下面的 HTML示例来开始吧。这段示例使用了 DOM级别一

3、的方法，从 JavaScript 动态创建了一个 HTML表格。 它创建了一个包含了四个单元的小表格， 并且在每个单元中含有文本。单元中文字内容是这个单元式y行x列”来展示单元格在表格中所处的位置。vtitle 样例代码-使用JavaScript和DOM 接口创建一个 HTML表格v/title vscri ptfunction start() / 获得从body的引用var mybody=document.getElementsByTagName(body).item(0);/创建一个TABLE的元素mytable = document.createElement(TABLE);/ 创建一个

4、 TBODY的元素mytablebody = document.createElement(TBODY);/创建所有的单元格for(j=0;jv2;j+) /创建一个TR元素mycurrent_row=document.createElement(TR);for(i=0;iv2;i+) /创建一个TD元素mycurrent_cell=document.createElement(TD);/创建一个文本（text ）节点currenttext=document.createTextNode(cell is row +j+, column +i);/将我们创建的这个文本节点添加在TD元素里 myc

5、urrent_cell.a pp endChild(currenttext);/ 将TD元素添加在TR里mycurrent_row.a pp endChild(mycurrent_cell);/ 将TR元素添加在 TBODY里mytablebody.a pp endChild(mycurrent_row);/ 将TBODY 元素添加在 TABLE里mytable.a pp endChild(mytablebody);/ 将TABLE元素添加在BODY里mybody.a pp endChild(mytable);/ 设置mytable的边界属性border为2mytable.setAttnbut

6、e(border,2);v/scri pt vbody onload=start() v/body v/html注意我们创建元素和文本节点的顺序:1.首先我们创建了 TABLE元素。2.然后，我们创建了 TABLE的子元素-TBODY 。3.然后，我们使用循环语句创建了TBODY的子元素-TR。4.对于每一个TR元素，我们使用一个循环语句创建它的子元素-TD。5.对于每一个TD元素，我们创建单元格内的文本节点。现在，我们创建了 TABLE，TBODY，TR，TD等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序:1.首先，我们将每一个文本节点接在TD元素上mycu

7、rrent_cell.a pp endChild(currenttext);2.然后，我们将每一个 TD元素接在他的父 TR元素上。mycurrent_row.a pp endChild(mycurrent_cell);3.然后，我们将每一个 TR元素接在他们的父TBODY元素上。mytablebody.a pp endChild(mycurrent_row);4.下一步,我们将TBODY元素接在他的父 TABLE元素上mytable.a pp endChild(mytablebody);5.最后，我们将TABLE元素接在他的父元素BODY 上。mybody.a pp endChild(myt

8、able);请记住这个机制。你将会在 W3C DOM 编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。F面是由javascript 代码生成的HTML代码:cell is row 0 column 0cell is row 0 column 1cell is row 1 column 0cell is row 1 column 1F面是由代码生成的 TABLE及其子元素的 DOM对象树:hi=：IABLETDtherehetl world你可以只用一些DOM方法来创建这个表格和它内部的子元素。请在脑海中时刻保留你想要创建的数据结构的树之模型，这样有利于

9、更简便的写出必须的代码。在图1的TABLE 树中，TABLE有一个子元素 TBODY 。 TBODY有两个子元素。每一个 TR又含有两个子元素(TD )。最后，每一个 TD有一个子元素-文本节点。基本 DOM 方法-SampIe2.htmlgetEleme ntByTagName 是文档接口( Docume nt in terface)和元素接口(Eleme ntin terface )的中的方法，所以不管是根文档对象还是所有的元素对象都含有方法getElementByTagName用来通过它们的标签名称(tag name )来获得某些元素的一系 列子元素。你可以使用的方法是：eleme nt

10、getEleme ntsByTagNametag nam。getEleme ntsByTagName返回一个有特定标签名称(tag name )的子元素列表。从 这个子元素列表中，你可以通过调用item和你想得到的元素的下标，来获得单个元素。列 表中第一个元素的下标是 0。上面的方法很简单，但是当你操作一个巨大的数据结构时还是F面的示例更应该小心一些。 OK，我们下一个话题中要继续对我们的表格例子进行修改。加简单，它意图展示一些基础的方法: 样例代码-使用JavaScript 和DOM 接口操作 HTML表格vscri ptfunction start() /获得所有的body元素列表(在这里

11、将只有一个) myDocumentElements=document.getElementsByTagName(body);/我们所需要body元素是这个列表的第一个元素 myBody=myDocumentElements.item(0);/现在，让我们获得body的子元素中所有的P元素myBodymyBodyElements=myBody.getElementsByTagName( p);/我们所需要的是这个列表中的第二个单元元素 myP=myBodyElements.item(l);v/scri pt vp hiv/p vp hellov/p v/body v/html在这个例子中，我们设

12、置变量myP指向DOM对象body中的第二个p元素:1.首先，我们使用下面的代码获得所有的body元素的列表,因为在任何合法的 HTML文档中都只有一个 body元素，所以这个列表是只包含一个单元的。document.getElementsByTagName(body)2.下一步，我们取得列表的第一个元素，它本身就会body元素对象。myBody=myDocumentElements.item(0);3.然后，我们通过下面代码获得body的子元素中所有的 P元素myBodyElements=myBody.getElementsByTagName( p);4.最后，我们从列表中取第二个单元元素。

13、myP=myBodyElements.item(l);documentBODYhi myPhello一旦你取得了 HTML元素的DOM对象，你就可以设置它的属性了。比如，如果你希望设置背景色属性，你只需要添加:myP .style.background=rgb(255,0,0);/设置inline的背景色风格创建文本节点使用 document.createTextNode(.)使用文档对象来调用一个createTextNode方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个展示那个文本节点信息的对象。myTextNode=document.createTextNod

14、e(world);这表示你已经创建了一个 TEXT NODE (个文字片断) 类型的节点，并且它的内容是“world ”，任何你对myTextNode的引用都指向这个节点对象。如果想将这个文本插入到HTML页面中，你还需要将它作为其他节点元素的子元素。使用 appendChild(.)插入元素那么，通过调用 myP .a ppen dChild( node_eleme nt)第二个P的一个新的子元素。你可以将这个元素设置成为myP .a pp endChild(myTextNode);在测试了这个例子之后，我们注意到，hello和world单词被组合在了一个:helloworld。事实上，当你

15、看到HTML页面时，hello和world 两个文字节点看起来更像是一个节点。但是请记住它们在文档模型中的形式-是两个节点。第二个节点是一个TEXT_NODE 类型的新节点，也是第二个 P标签的第二个子元素。下面的图标将在文档树 种展示最近创建的文本节点对象。documentf BODYhihello worldcreateTextNode 和appendChild是在单词hello和world 之间设置空格的一个简单方法。另外一个重要的注意事项是：appen dChild方法将把新的子节点接在最后一个子节点之后，正如world被加在了 hello之后。所以如果你想在hello和world中间

16、添加一个文本节点的话，你应该使用insertBefore来提到appendChild.使用文档对象和createElement(.)方法创建新的元素你可以使用createElement来创建新的HTML元素或者任何其它你想要的元素。比myBody可以方便如，如果你想要创建一个新的P作为BODY的子元素，你可以使用前面例子的并给它接上一个新的元素节点。使用docume nt.createEleme nt(tag name)的创建一个节点。如下:myNew PTAGnode=document.createElement(” p);myBody.a pp endChild(myNew PTAGnod

17、e);documentf BODYhihelloworld使用 removeChild(.)方法移除节点每一个节点都可以被移除.下面的一行代码移除了包含在myP（第二个P元素）下面的文本节点 world 。myP. removeChild(myTextNode);最后你可以将myTextNode（那个包含了 world单词的节点）添加给我们最后创建的P元素：myNew PTAGnode.a pp endChild(myTextNode);被修改的对象树的最后的状态如下:documenti BODYhihelloworld动态创建一个表格（回到SampIe1.html）这一段落的剩余部分我们将继

18、续修改我们sam ple1.html。下面的图展示了我们在示例中创建的表格的对象树的结构。复习一下HTML表格结构=：IABLEhithsrwhetl world创建元素节点并将他们插入到文档树中sam ple1.html中创建表格的基本步骤是:获得body对象（文档对象的第一个元素）创建所有元素。最后，根据表格结构（上面图中所示）将每一个孩子节点拼接起来。下面的一段源码是经过修改的 samp Ie1.html在start函数的最后，有一行新代码。使用另一个DOM方法（setAttribute ）来设置表格的边界属性。setAttribute有两个参数：属性的名称和属性的值。你可以使用这个方法

19、来设置任意元素的任意属性。 示例代码-使用 Javascript 和 DOM Interfaces 来处理 HTMLvscri ptfunction start() /获得body的引用 var mybody=document.getElementsByTagName(body).item(O);/创建一个标签名称为 TABLE的元素 mytable = document.createElement(TABLE);/创建一个标签名称为在 TBODY的元素 mytablebody = document.createElement(TBODY);/创建所有的单元格 for(j=0;jv2;j+)

20、/创建一个标签名称为在 TR的元素 mycurrent_row=document.createElement(TR);for(i=0;i2;i+) /创建一个标签名称为在 TD的元素 mycurrent_cell=document.createElement(TD);/创建一个文字节点 currenttext=document.createTextNode(cell is row +j+, column +i);/将文字节点添加到TD单元格内 mycurrent_cell.a pp endChild(currenttext);/将TD单元格添加到TR行中 mycurrent_row.a pp

21、endChild(mycurrent_cell);/将TR行添加到TBODY中 mytablebody.a pp endChild(mycurrent_row);/ 将TBODY 添加到TABLE中mytable.a pp endChild(mytablebody);/ 将TABLE添加到BODY中mybody.a pp endChild(mytable);/设置边界属性为2 mytable.setAttribute(border,2); 使用CSS和DOM 来操作表格从表格中获得一个文字节点示例介绍了两个新的节点列表。childNodesgetEleme ngByTagName一样，它返回了

22、一个节点列表。不同的是,DOM属性。首先，使用 childNodes 属性来获得 mycel的孩子列表包括所有的孩子节点，无论它们的名称或类型是什么。像只返回指定标签名称的元素。 一旦你获得了返回的列表， 你可以/ currenttext的内容是myceltext 的内容getEleme ntByTagName使用item(x)方法来使用指定的元素。这个例子在表格的第二行第二个单元格中的myceltext中保存了一个文字节点。然后，运行这个例子并观察结果，他创建了一个新的文字节点，这个文字节点的内容是myceltext 的值，并且将这个文字节点作为了BODY元素的一个孩子。如果你的对象是一个文字节点，你可以使用data属性来回收(retrieve )节点的文字内容mybody=document.getElementsByTagName(body).item(0);mytable=mybody.getElementsByTagName(table).item(0);mytablebody=mytable.getElementsByTagName(tbody).item(0);myrow