1、为公司内部培训整理的JavaScript DOM教程分为两个部分，首先是从mozilla网站上找的使用Javascript和DOM Interfaces来处理HTML然后是对dom对象和方法一个归纳总结简介本文概述了一些强大的，基本的DOM 级别一中的法以及如何在JavaScript中使用它们。你将会学习到如何动态地创建，访问，控制以及移除HTML元素。这里提到的DOM方法，并非是 HTML专有的；它们在XML中同样适用。这里所有的示例，在任何全面支持DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器。这里的示例代码在IE5中也能正常工作。
2、这里所提到的DOM方法是第一级文档对象模型定义的核心的一部分。DOM 级别一包 对文档 访问和处理的方法 DOM 1 核心 和专 为HTML文档定义的方法。Sample1.html概览这 文 是 一个 例代码来介 了DOM的。 们从 面的HTML示例来 。这 示例使用了DOM级别一的方法，从JavaScript动态创建了一个HTML 。它创建了一个包 了 个 元的 ，并 在 个 元中 有文本。 元中文 内 是 这个 元 y x ，来 示 元 在 中所处的。样例代码 - 使用 JavaScript 和 DOM 创建一个 HTML function start() / 从body的用var myb
3、ody=document.getElementsByTagName(“body“).item(0);/ 创建一个TABLE的元素mytable = document.createElement(“TABLE“);/ 创建一个TBODY的元素mytablebody = document.createElement(“TBODY“);/ 创建所有的 元 for(j=0;j 们创建元素和文本currency1的 首先 们创建了TABLE元素。 然后， 们创建了TABLE的元素-TBODY。 然后， 们使用”创建了TBODY的元素-TR。 对于 一个TR元素， 们使用一个”创建它的元素-TD。 对于
4、一个TD元素， 们创建 元 内的文本currency1。 在， 们创建了TABLE，TBODY，TR，TD元素，然后创建了文本currency1； 来， 们将 一个对象在 的currency1上，使用 首先， 们将 一个文本currency1在TD元素上 mycurrent_cell.appendChild(currenttext);然后， 们将 一个TD元素在他的TR元素上。 mycurrent_row.appendChild(mycurrent_cell);然后， 们将 一个TR元素在他们的TBODY元素上。 mytablebody.appendChild(mycurrent_row);一
5、, 们将TBODY元素在他的TABLE元素上 mytable.appendChild(mytablebody);后， 们将TABLE元素在他的元素BODY上。 mybody.appendChild(mytable);这个制。你将会在W3C DOM程中常使用它。首先，你从上到 的创建元素；然后你从 上的将元素在他们的元素上。面是javascript代码 的HTML代码 .cell is row 0 column 0cell is row 0 column 1cell is row 1 column 0cell is row 1 column 1.面是代码 的TABLE及其元素的DOM对象 你以用
6、一些DOM方法来创建这个 和它内部的元素。在 中 你 创建的 结 的 模型，这样有 于 简 的 的代码。在1的TABLE中，TABLE有一个元素TBODY。TBODY有两个元素。 一个TR 有一个元素 TD 。后， 一个TD 有一个元素-文本currency1。基本DOM方法 - Sample2.htmlgetElementByTagName是文档 Document interface 和元素 Element interface 的中的方法，所以 是 文档对象是所有的元素对象都 有方法getElementByTagName。用来 它们的 tag name 来 些元素的一 元素。你以使用的方法是
7、 element.getElementsByTagName(tagname)。getElementsByTagName 一个有定 tagname 的元素 。从这个元素 中，你以 用item和你 到的元素的 ，来 个元素。 中第一个元素的 是0。上面的方法简 ， 是你 作一个 大的 结 是 心一些。 OK， 们 一个中 对 们的 例 。 面的示例 简 ，它 示一些基础的方法 样例代码 - 使用 JavaScript 和 DOM 作 HTML function start() / 所有的body元素 在这里将有一个 myDocumentElements=document.getElementsBy
8、TagName(“body“);/ 们所需 body元素是这个 的第一个元素myBody=myDocumentElements.item(0);/ 在，让 们body的元素中所有的p元素myBodyElements=myBody.getElementsByTagName(“p“);/ 们所需 的是这个 中的第二个 元元素myP=myBodyElements.item(1);hihello在这个例中， 们变量myP指 DOM对象body中的第二个p元素 首先， 们使用 面的代码所有的body元素的 ，因为在任何合法的HTML文档中都有一个body元素，所以这个 是包 一个 元的。 documen
9、t.getElementsByTagName(“body“)一， 们取 的第一个元素，它本身就会body元素对象。 myBody=myDocumentElements.item(0);然后， 们 面代码body的元素中所有的p元素 myBodyElements=myBody.getElementsByTagName(“p“);后， 们从 中取第二个 元元素。 myP=myBodyElements.item(1);一旦你取了HTML元素的DOM对象，你就以它的fl 了。比如，如果你希望背景色fl ，你需“ myP.style.background=“rgb(255,0,0)“;/ inline的
10、背景色风 使用document.createTextNode()创建文本currency1使用文档对象来 用一个createTextNode方法并创建你 己的文本currency1。你需 传递文 内 给这个函。 的值就是一个 示 个文本currency1信息的对象。myTextNode=document.createTextNode(“world“);这 示你已创建了一个TEXTNODE 一个文 片断 类型的currency1，并 它的内 是 world”，任何你对myTextNode的用都指 这个currency1对象。如果 将这个文本插入到HTML页面中，你需 将它作为其他currency
11、1元素的元素。使用appendChild()插入元素， 用myP.appendChild(node_element)你以将这个元素 为第二个P的一个新的元素。myP.appendChild(myTextNode);在测试了这个例 后， 们到，hello和world 词被组合在了一个 helloworld。事 上，你看到HTML页面 ， hello和world两个文 currency1看起来 像是一个currency1。 是它们在文档模型中的形 -是两个currency1。第二个currency1是一个TEXT_NODE类型的新currency1，也是第二个P的第二个元素。 面的将在文档种 示近
12、创建的文本currency1对象。createTextNode 和 appendChild 是在 词hello和world 间空 的一个简 方法。另外一个重 的事项是 appendChild方法将把新的currency1在后一个currency1 后，正如world被在了hello 后。所以如果你 在hello和world中间“一个文本currency1的，你使用insertBefore来提到 appendChild.使用文档对象和createElement()方法创建新的元素你以使用createElement来创建新的HTML元素或者任何其它你 的元素。比如，如果你 创建一个新的P作为BOD
13、Y的元素，你以使用前面例的myBody并给它上一个新的元素currency1。使用 document.createElement(“tagname“)以方 的创建一个currency1。如 myNewPTAGnode=document.createElement(“p“);myBody.appendChild(myNewPTAGnode);使用removeChild()方法移除currency1一个currency1都以被移除. 面的一 代码移除了包 在myP(第二个p元素) 面的文本currency1world。myP.removeChild(myTextNode);后你以将myTextNo
14、de 个包 了world 词的currency1 “给 们后创建的P元素 myNewPTAGnode.appendChild(myTextNode);被 的对象的后的状态如 动态创建一个 ( 到Sample1.html)这一 落的剩余部分 们将 们sample1.html。 面的 示了 们在示例中创建的 的对象的结 。复习一 HTML 结 创建元素currency1并将他们插入到文档中sample1.html中创建 的基本骤是 body对象 文档对象的第一个元素 创建所有元素。 后， 结 上面中所示 将 一个孩currency1拼起来。 面的一 源码是 的sample1.html 在start
15、函 的后，有一 新代码。使用另一个DOM方法 setAttribute 来 的fifl 。setAttribute有两个参 fl 的 和fl 的值。你以使用这个方法来任元素的任fl 。示例代码 - 使用Javascript和DOM Interfaces来处理HTMLfunction start() / body的用var mybody=document.getElementsByTagName(“body“).item(0);/ 创建一个 为TABLE的元素mytable = document.createElement(“TABLE“);/ 创建一个 为在TBODY的元素mytablebod
16、y = document.createElement(“TBODY“);/ 创建所有的 元 for(j=0;j使用CSS和DOM来 作 从 中一个文 currency1示例介 了两个新的DOMfl 。首先，使用childNodesfl 来mycel的孩currency1 。childNodes包 所有的孩currency1，无论它们的 或类型是什 。像getElemengByTagName一样，它 了一个currency1 。 同的是， getElementByTagName 指定 的元素。一旦你了 的 ，你以使用item(x)方法来使用指定的元素。这个例在 的第二 第二个 元 中的mycel
17、text中 存了一个文 currency1。然后，运 这个例并观察结果，他创建了一个新的文 currency1，这个文 currency1的内 是 myceltext的值，并 将这个文 currency1作为了BODY元素的一个孩。如果你的对象是一个文 currency1，你以使用datafl 来 收 retrieve currency1的文 内 mybody=document.getElementsByTagName(“body“).item(0);mytable=mybody.getElementsByTagName(“table“).item(0);mytablebody=mytable
18、.getElementsByTagName(“tbody“).item(0);myrow=mytablebody.getElementsByTagName(“tr“).item(1);mycel=myrow.getElementsByTagName(“td“).item(1);/ mycel的孩currency1 的第一个元素myceltext=mycel.childNodes.item(0);/ currenttext的内 是myceltext的内 currenttext=document.createTextNode(myceltext.data);mybody.appendChild(c
19、urrenttext);一个fl 的值在sample1的后 们在mytable对象上 用了setAttribute。这个 用是用来 的fifl 的。然后是用了getAttribute方法来一个fl 的值 mytable.getAttribute(“border“);变样 fl 来隐藏一 一旦你在你的javascript变量中 存了一个对象，你就以直为它样 fl 了。 面的代码是 后的sample1.html，在这里，第二 的 一个 元 都被隐藏了。而 第一 中的 一个 元 为使用红色背景。，样 fl 是被直的。function start() var mybody=document.getElementsByTagName(“body“).item(0);mytable = document.createElement(“TABLE“);mytablebody = document.createElement(“TBODY“);for(j=0;j
