DOM及DOM技术介绍_第1页
DOM及DOM技术介绍_第2页
DOM及DOM技术介绍_第3页
DOM及DOM技术介绍_第4页
DOM及DOM技术介绍_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

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

3、下面的HTML示例来开始吧。这段示例使用了DOM 级别一的方法，从JavaScript动态创建了一个HTML表格。它创建了一个包含了四个单元的小表格，并且在每个单元中含有文本。单元中文字内容是“这个单元式y行x列”，来展示单元格在表格中所处的位置。<head>   <title>样例代码 - 使用 JavaScript 和 DOM 接口创建一个 HTML 表格</title>   <script>   

4、60;   function start()             / 获得从body的引用            var mybody=document.getElementsByTagName("body").item(0);        &

5、#160;   / 创建一个TABLE的元素            mytable = document.createElement("TABLE");            / 创建一个TBODY的元素          

6、60; mytablebody = document.createElement("TBODY");            / 创建所有的单元格            for(j=0;j<2;j+)             

7、    / 创建一个TR元素                mycurrent_row=document.createElement("TR");                for(i=0;i<2;i+)    

8、;                 / 创建一个TD元素                    mycurrent_cell=document.createElement("TD");     

9、60;              / 创建一个文本（text）节点                    currenttext=document.createTextNode("cell is row "+j+&quo

10、t;, column "+i);                    / 将我们创建的这个文本节点添加在TD元素里                    mycurrent_cell.appendC

11、hild(currenttext);                    / 将TD元素添加在TR里                    mycurrent_row.appendChild(mycurrent_cell); &

12、#160;                              / 将TR元素添加在TBODY里                mytablebody.appendChild

13、(mycurrent_row);                        / 将TBODY元素添加在TABLE里            mytable.appendChild(mytablebody);        

14、60;   / 将TABLE元素添加在BODY里            mybody.appendChild(mytable);            / 设置mytable的边界属性border为2            mytable.setAt

15、tribute("border","2");            </script>   </head>   <body onload="start()">   </body>   </html>注意我们创建元素和文本节点的顺序：1. 首先我们创建了TABLE元素。 2. 然后，我们创建了TABLE的子元素

16、-TBODY。 3. 然后，我们使用循环语句创建了TBODY的子元素-TR。 4. 对于每一个TR元素，我们使用一个循环语句创建它的子元素-TD。 5. 对于每一个TD元素，我们创建单元格内的文本节点。 现在，我们创建了TABLE，TBODY，TR，TD等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序：1. 首先，我们将每一个文本节点接在TD元素上 mycurrent_cell.appendChild(currenttext);2. 然后，我们将每一个TD元素接在他的父TR元素上。 mycurrent_row.appendChild(mycurrent_cell

17、);3. 然后，我们将每一个TR元素接在他们的父TBODY元素上。 mytablebody.appendChild(mycurrent_row);4. 下一步,我们将TBODY元素接在他的父TABLE元素上 mytable.appendChild(mytablebody);5. 最后，我们将TABLE元素接在他的父元素BODY上。 mybody.appendChild(mytable);请记住这个机制。你将会在W3C DOM编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。下面是由javascript代码生成的HTML代码：.<TABLE bord

18、er=5><tr><td>cell is row 0 column 0</td><td>cell is row 0 column 1</td></tr><tr><td>cell is row 1 column 0</td><td>cell is row 1 column 1</td></tr></TABLE>.下面是由代码生成的TABLE及其子元素的DOM对象树：你可以只用一些DOM方法来创建这个表格和它内部的子元素。请在脑海中时刻保

19、留你想要创建的数据结构的树之模型，这样有利于更简便的写出必须的代码。在图1的TABLE树中，TABLE有一个子元素TBODY。TBODY有两个子元素。每一个TR又含有两个子元素（TD）。最后，每一个TD有一个子元素-文本节点。基本DOM方法 - Sample2.htmlgetElementByTagName是文档接口（Document interface）和元素接口（Element interface）的中的方法，所以不管是根文档对象还是所有的元素对象都含有方法getElementByTagName。用来通过它们的标签名称（tag name）来获得某些元素的一系列子元素。你可以使用的方法是：e

20、lement.getElementsByTagName(tagname)。getElementsByTagName返回一个有特定标签名称（tagname）的子元素列表。从这个子元素列表中，你可以通过调用item和你想得到的元素的下标，来获得单个元素。列表中第一个元素的下标是0。上面的方法很简单，但是当你操作一个巨大的数据结构时还是应该小心一些。 OK，我们下一个话题中要继续对我们的表格例子进行修改。下面的示例更加简单，它意图展示一些基础的方法：<html>  <head>  <title>样例代码 - 使用 JavaScript 和 DO

21、M 接口操作 HTML 表格</title>  <script>      function start()            / 获得所有的body元素列表（在这里将只有一个）           myDocumentElements=document.getElementsByTagName("b

22、ody");           / 我们所需要body元素是这个列表的第一个元素           myBody=myDocumentElements.item(0);           / 现在，让我们获得body的子元素中所有的p元素    

23、;       myBodymyBodyElements=myBody.getElementsByTagName("p");           / 我们所需要的是这个列表中的第二个单元元素           myP=myBodyElements.item(1);    

24、60;     </script></head><body onload="start()"><p>hi</p><p>hello</p></body></html>在这个例子中，我们设置变量myP指向DOM对象body中的第二个p元素：1. 首先，我们使用下面的代码获得所有的body元素的列表，因为在任何合法的HTML文档中都只有一个body元素，所以这个列表是只包含一个单元的。 document.getElementsByTagName

25、("body")2. 下一步，我们取得列表的第一个元素，它本身就会body元素对象。 myBody=myDocumentElements.item(0);3. 然后，我们通过下面代码获得body的子元素中所有的p元素 myBodyElements=myBody.getElementsByTagName("p");4. 最后，我们从列表中取第二个单元元素。 myP=myBodyElements.item(1);一旦你取得了HTML元素的DOM对象，你就可以设置它的属性了。比如，如果你希望设置背景色属性，你只需要添加：myP.style.background

26、="rgb(255,0,0)"/ 设置inline的背景色风格使用document.createTextNode(.)创建文本节点使用文档对象来调用一个createTextNode方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个展示那个文本节点信息的对象。myTextNode=document.createTextNode("world");这表示你已经创建了一个TEXTNODE（一个文字片断）类型的节点，并且它的内容是“world”，任何你对myTextNode的引用都指向这个节点对象。如果想将这个文本插入到HTML页面中，

27、你还需要将它作为其他节点元素的子元素。使用appendChild(.)插入元素那么，通过调用myP.appendChild(node_element)你可以将这个元素设置成为第二个P的一个新的子元素。myP.appendChild(myTextNode);在测试了这个例子之后，我们注意到，hello和world单词被组合在了一个：helloworld。事实上，当你看到HTML页面时，hello和world两个文字节点看起来更像是一个节点。但是请记住它们在文档模型中的形式-是两个节点。第二个节点是一个TEXT_NODE类型的新节点，也是第二个P标签的第二个子元素。下面的图标将在文档树种展示最近创

28、建的文本节点对象。createTextNode 和 appendChild 是在单词hello和world之间设置空格的一个简单方法。另外一个重要的注意事项是：appendChild方法将把新的子节点接在最后一个子节点之后，正如world被加在了hello之后。所以如果你想在hello和world中间添加一个文本节点的话，你应该使用insertBefore来提到appendChild.使用文档对象和createElement(.)方法创建新的元素你可以使用createElement来创建新的HTML元素或者任何其它你想要的元素。比如，如果你想要创建一个新的P作为BODY的子元素，你可以使用前面

29、例子的myBody并给它接上一个新的元素节点。使用 document.createElement("tagname")可以方便的创建一个节点。如下：myNewPTAGnode=document.createElement("p");myBody.appendChild(myNewPTAGnode);使用removeChild(.)方法移除节点每一个节点都可以被移除.下面的一行代码移除了包含在myP(第二个p元素)下面的文本节点world。myP.removeChild(myTextNode);最后你可以将myTextNode（那个包含了world单词的节

30、点）添加给我们最后创建的P元素：myNewPTAGnode.appendChild(myTextNode);被修改的对象树的最后的状态如下：动态创建一个表格(回到Sample1.html)这一段落的剩余部分我们将继续修改我们sample1.html。下面的图展示了我们在示例中创建的表格的对象树的结构。复习一下HTML表格结构创建元素节点并将他们插入到文档树中sample1.html中创建表格的基本步骤是：· 获得body对象（文档对象的第一个元素） · 创建所有元素。 · 最后，根据表格结构（上面图中所示）将每一个孩子节点拼接起来。下面的一段源码是经过修改的sam

31、ple1.html 在start函数的最后，有一行新代码。使用另一个DOM方法（setAttribute）来设置表格的边界属性。setAttribute有两个参数：属性的名称和属性的值。你可以使用这个方法来设置任意元素的任意属性。<head>  <title>示例代码 - 使用Javascript和DOM Interfaces来处理HTML</title>  <script>      function start()      

32、;      / 获得body的引用           var mybody=document.getElementsByTagName("body").item(0);           / 创建一个标签名称为TABLE的元素        &

33、#160;  mytable = document.createElement("TABLE");           / 创建一个标签名称为在TBODY的元素           mytablebody = document.createElement("TBODY");      &#

34、160;    / 创建所有的单元格           for(j=0;j<2;j+)                / 创建一个标签名称为在TR的元素              

35、mycurrent_row=document.createElement("TR");               for(i=0;i<2;i+)                    / 创建一个标签名称为在TD的元素   

36、;                mycurrent_cell=document.createElement("TD");                   / 创建一个文字节点      

37、;             currenttext=document.createTextNode("cell is row "+j+", column "+i);                   / 将文字节点添加到TD单元格内  &

38、#160;                mycurrent_cell.appendChild(currenttext);                   / 将TD单元格添加到TR行中      

39、0;            mycurrent_row.appendChild(mycurrent_cell);                              / 将TR行添加到TBODY中

40、0;              mytablebody.appendChild(mycurrent_row);                      / 将TBODY添加到TABLE中       

41、;    mytable.appendChild(mytablebody);           / 将TABLE添加到BODY中           mybody.appendChild(mytable);           / 设置边界属性为2 

42、0;         mytable.setAttribute("border","2");       </script>  </head>  <body onload="start()">  </body>  </html>  使用CSS和DOM来操作表格从表格中获得一个文字节点示例介

43、绍了两个新的DOM属性。首先，使用childNodes属性来获得mycel的孩子节点列表。childNodes列表包括所有的孩子节点，无论它们的名称或类型是什么。像getElemengByTagName一样，它返回了一个节点列表。不同的是，getElementByTagName只返回指定标签名称的元素。一旦你获得了返回的列表，你可以使用item(x)方法来使用指定的元素。这个例子在表格的第二行第二个单元格中的myceltext中保存了一个文字节点。然后，运行这个例子并观察结果，他创建了一个新的文字节点，这个文字节点的内容是myceltext的值，并且将这个文字节点作为了BODY元素的一个孩子。

44、如果你的对象是一个文字节点，你可以使用data属性来回收（retrieve）节点的文字内容mybody=document.getElementsByTagName("body").item(0);mytable=mybody.getElementsByTagName("table").item(0);mytablebody=mytable.getElementsByTagName("tbody").item(0);myrow=mytablebody.getElementsByTagName("tr").item(1

45、);mycel=myrow.getElementsByTagName("td").item(1);/ mycel的孩子节点列表的第一个元素myceltext=mycel.childNodes.item(0);/ currenttext的内容是myceltext的内容currenttext=document.createTextNode(myceltext.data);mybody.appendChild(currenttext);获得一个属性的值在sample1的最后我们在mytable对象上调用了setAttribute。这个调用是用来设置表格的边界属性的。然后是用了ge

46、tAttribute方法来获得一个属性的值：mytable.getAttribute("border");通过改变样式属性来隐藏一列一旦你在你的javascript变量中保存了一个对象，你就可以直接为它设置样式属性了。下面的代码是修改后的sample1.html，在这里，第二列的每一个单元格都被隐藏了。而且第一列中的每一个单元格改为使用红色背景。注意，样式属性是被直接设置的。<html>  <body onload="start()">  </body>  <script>&#

47、160;     function start()           var mybody=document.getElementsByTagName("body").item(0);          mytable = document.createElement("TABLE");    &

48、#160;     mytablebody = document.createElement("TBODY");          for(j=0;j<2;j+)               mycurrent_row=document.createElement("TR"); &#

49、160;            for(i=0;i<2;i+)                   mycurrent_cell=document.createElement("TD");                  currenttext=document.createTextNode(&q

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论