DOM及DOM技术介绍.docVIP

DOM及DOM技术介绍 2008-12-02????文章来源：????浏览次数： 1674 本文概述了一些强大的，基本的DOM 级别一中的方法以及如何在JavaScript中使用它们。你将会学习到如何动态地创建，访问，控制以及移除HTML元素。这里提到的DOM方法，并非是HTML专有的；它们在XML中同样适用。这里所有的示例，在任何全面支持DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器，像网景公司的下一代导航者（Navigatior）浏览器等。这里的示例代码在IE5中也能正常工作。（这里所提到的DOM方法是文档对象模型规范（级别一）的核心的一部分。DOM 级别一包括对文档进行访问和处理的方法（DOM 1 核心）和专门为HTML文档定义的方法。） DOM简介： DOM的全称是文档对象模型（即Document Object Model），它在本质上是一种文档平台。文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。支持Javascript的所有浏览器都支持DOM。DOM实际上是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的一种语言平台。 这段文字是通过一个实例代码来介绍了DOM的。那么我们从下面的HTML示例来开始吧。这段示例使用了DOM 级别一的方法，从JavaScript动态创建了一个HTML表格。它创建了一个包含了四个单元的小表格，并且在每个单元中含有文本。单元中文字内容是“这个单元式y行x列”，来展示单元格在表格中所处的位置。 head?? title样例代码?-?使用?JavaScript?和?DOM?接口创建一个?HTML?表格/title?? script?? ????function?start()?{ ?? ????????//?获得从body的引用 ?? ????????var?mybody=document.getElementsByTagName(body).item(0); ?? ????????//?创建一个TABLE的元素 ?? ????????mytable?=?document.createElement(TABLE); ?? ????????//?创建一个TBODY的元素 ?? ????????mytablebody?=?document.createElement(TBODY); ?? ????????//?创建所有的单元格 ?? ????????for(j=0;j2;j++)?{ ?? ????????????//?创建一个TR元素 ?? ????????????mycurrent_row=document.createElement(TR); ?? ????????????for(i=0;i2;i++)?{ ?? ????????????????//?创建一个TD元素 ?? ????????????????mycurrent_cell=document.createElement(TD); ?? ????????????????//?创建一个文本（text）节点 ?? ????????????????currenttext=document.createTextNode(cell?is?row?+j+,?column?+i); ?? ????????????????//?将我们创建的这个文本节点添加在TD元素里 ?? ????????????????mycurrent_cell.appendChild(currenttext); ?? ????????????????//?将TD元素添加在TR里 ?? ????????????????mycurrent_row.appendChild(mycurrent_cell); ?? ????????????} ?? ????????????//?将TR元素添加在TBODY里 ?? ????????????mytablebody.appendChild(mycurrent_row); ?? ????????} ?? ????????//?将TBODY元素添加在TABLE里 ?? ????????mytable.appendChild(mytablebody); ?? ????????//?将TABLE元素添加在BODY里 ?? ????????mybody.appendChild(mytable); ?? ????????//?设置mytable的边界属性border为2 ?? ????????mytable.setAttribute(border,2); ?