结合JavaScript和DOM动态创建表实例

本文简要介绍了DOM 1.0的一些基本和强大的方法，以及如何在JavaScript中使用它们。您可以学习如何动态创建、获取、控制和删除HTML元素。这些DOM方法也适用于XML。所有完全支持DOM 1.0的浏览器都可以很好地运行这个例子，比如IE5和Firefox。Overview-Sample1.html本文通过示例代码介绍了DOM。请从尝试下面的HTML示例开始。它使用DOM 1的方法通过JavaScript动态创建一个HTML表。它创建了一个由四个包含文本内容的单元格组成的小表格。单元格的文本内容为：“单元格为Y行X列”，表示表格中单元格的行数和列数。复制的代码如下：html标题示例代码-使用JavaScript和DOM /title脚本函数start()创建html表{//获取body标记var my body=document . getelementsbytanname(' body ')[0]；//创建一个table元素和一个tbody元素my table=document . create element(' table ')；my table body=document . create element(' t body ')；//为(var j=0)创建所有单元格；J2；J) {//创建tr元素my current _ row=document . create element(' tr ')；for(var I=0；I 2；I) {//创建td元素my current _ cell=document . create element(' TD ')；//创建一个文本节点currenttext=document。createtextnode('单元格是' j '行和' I '列')；//将创建的文本节点添加到td中的my current _ cell . appendchild(current text)中；//将列td添加到行tr my current _ row . append child(my current _ cell)中；}//将行tr添加到t body my tablebody . append child(my current _ row)中；}//将tbody添加到table my table . append child(my table body)；//将表添加到body mybody.appendChild(mytable)中；//将table mytable的border属性设置为2mytable.setattribute ('border '，' 2 ')；}/script/head body on load=' start()'/body/注意我们在html中创建元素和文本节点的顺序：1。创建表元素2。创建表tbody 3的子元素。使用一个循环来创建tbody tr 4的子元素。使用循环为每个tr创建一个子元素。5.为每个tb创建文本节点。在创建了table、tbody、tr和TD的元素以及文本节点之后，我们以相反的顺序将它们添加到它们的父节点。1.将创建的文本节点添加到td中的my current _ cell . append child(current text)中；2.将列td添加到行tr my current _ row . append child(my current _ cell)中；将行tr添加到t body my tablebody . append child(my current _ row)；将tbody添加到table my table . append child(my table body)；5.将表添加到正文my body . appendchild(my table)；记住这个方法。当您使用W3C DOM时，您将经常使用它。首先，从上到下创建元素。然后从下到上将它们添加到父节点。这是由JavaScript代码生成的HTML:HTML:表格边框=5trtd单元格为第0行，第0列/tdtd单元格为第0行，第1列/TD/trtd单元格为第1行，第0列/tdtd单元格为第1行，第1列/td/tr/table.这是代码生成的table元素及其子元素的DOM对象树：(9500.163.com。

您只需要几个DOM方法来构造这样一个表及其子元素。记住要永远记住你将要创建的结构的模型树；这将使编写代码更加容易。在图中的表树中，table有一个子元素tbody。Tbody有两个子元素。tbody的每个子元素(tr)都有两个子元素td。最后，每个td都有一个子元素：文本节点。基本的DOM方法——sample 2 . html getElementByTagName方法适用于文档和元素，所以文档根对象和所有元素对象一样都有getElementByTagName方法。您可以使用element.getelementsbytagname(标记名)获得一个元素的所有子元素的列表，并通过标记名选择它们。Element.getElementsByTagName返回具有特定标记名的子元素列表。您可以通过调用item方法(向它传递一个索引参数)从这个子元素列表中获取一个元素。请注意，列表中第一个子元素的索引是0。下一个主题继续前面的表格示例。下面的例子比较简单，它展示了一些基本的方法：复制代码如下：html head title实例代码-使用JavaScript和DOM创建html表/title脚本函数start() {//获取包含所有body元素的列表(只会有一个)//然后选择列表中的第一个元素，my body=document . getelementsbyname(' body ')[0]；//获取body word元素my body elements=my body . getelementsbytagname(' p ')中的所有p元素；//获取p元素列表的第二个元素(索引从0开始)myP=myBodyElements[1]；}/script/head body on load=' start()' phi/p p hello/p/body/html在本例中，我们将myP变量设置为表示body中第二个p元素的DOM对象。1.获取包含所有body元素my body=document . getelementsbyname(' body ')[0]的列表；因为有效的html文档只有一个正文元素，所以列表中只有一个项目。我们通过使用[0]选择列表中的第一个元素来获得它。2.获取博客子元素my body elements=my body . getelementsbytagname(' p ')中的所有p元素；在p元素列表中选择第二个项目myP=myBodyElements[1]；

一旦获得了html元素的DOM对象，就可以设置它的属性。比如要设置样式背景色属性，只需要添加：myp.style.background=' RGB (255，0，0)'；使用document.createTextNode(" . ")来创建文本节点。使用文档对象调用createTextNode方法来创建文本节点。你只需要输入文本内容。返回值是表示此文本节点的对象。myTextNode=document . createtextnode(' world ')；上面的代码创建了一个文本数据为“word”的TEXT_NODE节点，变量myTextNode指向这个节点对象。您需要将此文本节点设置为其他节点元素的字节点，以便将此文本插入到您的html页面中。使用appendChild(.)来插入元素，因此通过调用myP.appendChild([node_element])，可以将这个文本节点设置为第二个p元素的字节点。myp . appendchild(myTextNode)；为了测试这个例子，请注意“hello”和“world”这两个词是链接在一起的：“helloworld”。因此，当您看到html页面时，两个文本节点hello和world看起来是一个节点，但实际上在这个文档模型中有两个节点。第二个节点是一个新的TEXT_NODE类型节点和第二个p标记的第二个字节点。下图显示了文档树中新创建的文本节点。

CreateTextNode和appendChild是在hello和world之间添加空格的简单方法。需要注意的是，appendChild方法将被添加到最后一个子节点之后，就像world被添加到hello之后一样。因此，如果要在hello和world之间添加文本节点，需要使用insertBefore方法，而不是appendChild。使用文档对象和createElement(.)方法来创建新元素。您可以使用createElement方法创建新的HTML元素或任何其他您想要的元素。例如，如果要向body元素添加一个字节点p元素，可以使用前面示例中的myBody添加一个新的元素节点。要创建一个节点，只需调用document.createelement(“标记名”)。示例：mynewptagnode=document . create element(' p ')；mybody . appendchild(myNewPTAGnode)；

使用removeChild(.)方法删除节点。每个节点都可以删除。下面一行代码删除了myP中包含单词world的文本节点(第二个p元素)。myp . remove child(MyTextNode)；最后，可以将包含单词world的文本节点myTextNode添加到新创建的p元素中：mynewptagnode . appendchild(myTextNode)；修改后的对象树最后看起来是这样的：。

动态创建一个表(返回Sample1.html)文章的其余部分将返回Sample1.html。下图显示了示例中创建的表的对象树结构。查看HTML表格结构

创建元素节点并将其添加到文档树以在sample1.html创建表的基本步骤是：获取body对象(文档对象的第一项)并创建所有元素。最后，根据上图中的表结构添加每个字节点。下面的源代码是sample1.html注释开始函数的最后一行新代码。另一个DOM方法setAttribute用于设置表的边框属性。SetAttribute方法有两个参数：属性名和属性值。您可以使用setAttribute方法来设置任何元素的任何属性。复制的代码如下：head title示例代码-使用JavaScript和DOM /title脚本函数start()创建HTML表{//get body var my body=document . getelementsbyname(' body ')[0]；//创建表和tbody元素my table=document . create element(' table ')；my table body=document . create element(' t body ')；//为(var j=0)创建所有单元格；J2；J) {//创建tr元素my current _ row=document . create element(' tr ')；for(var I=0；I 2；I) {//创建td元素my current _ cell=document . create element(' TD ')；//创建一个文本节点currenttext=document。createtextnode('单元格是' j '行和' I '列')；//将创建的文本节点添加到td元素my current _ cell . appendchild(current text)中；//将td添加到tr行my current _ row . append child(my current _ cell)；}//将tr行添加到t body mytablebody . append child(my current _ row)；}//将tbody添加到table my table . append child(my table body)；//将表添加到body mybody.appendChild(mytable)中；//将mytable的border属性设置为2；mytable.setAttribute('边框'，' 2 ')；}/script/head body onload=' start()'/body/html使用DOM和CSS来处理表以从表中获取文本节点，这个示例引入了两个新的DOM属性。使用childNodes属性来获取迈锡尔的字节点列表。这个子节点列表包含所有字节点，不管它们的名称和类型如何。像getElementsByTagName方法一样，它返回一个字节点列表，并使用[x]获取所需的字节点项。本示例将myceltext存储为表格第二行第二个单元格的文本节点。最后，它创建了一个新的文本节点，该节点包含迈锡特文本的数据属性，并使其成为body元素的子节点，以显示此示例的最终结果。如果对象是文本节点，可以使用数据属性获取其内容。复制代码如下： my body=document . getelementsbyname(' body ')[0]；my table=my body . getelementsbytagname(' table ')[0]；my table body=my table . getelementsbytagname(' t body ')[0]；my row=my tablebody . GetElementsBytagname(' tr ')[1]；迈锡尔=my row . GetElementsBytagname(' TD ')[1]；//迈锡尔迈锡尔text=迈锡尔. childNodes[0]的字节点列表中的第一项；//current text的内容为myceltext=document的data currenttext。createtextnode(迈锡特文本。数据)；my body . appendchild(current text)；获取属性值。在sample1的最后一个单元格中，使用了mytable对象的setAttribute方法。此单元格用于设置此表格的边框属性。使用getAttribute方法获取此属性：mytable.getAttribute('边框')；通过更改样式属性隐藏列当使用JavaScript变量指向对象时，可以立即设置其样式属性。下面的代码是对sample1.html的修改，第二列中的单元格被隐藏，第一列中单元格的背景被更改为红色。请注意，样式属性是直接设置的。

复制代码代码如下：加载时的html正文=' start()'/正文脚本函数start(){ var my body=document。getelementsbytagname(' body ')[0]；我的表=文档。创建元素(“表”)；我的表体=文档。创建元素(' t body ')；for(var j=0；J2；j){我的当前行=文档。创建元素(' tr ')；for(var I=0；I 2；I){我的当前单元格=文档。创建元素(' TD ')；当前文本=文档。createtextnode('单元格是： ' I j)；我现在的手机。appendchild(当前文本)；我的当前行。appendchild(我当前的_ cell)；//如果在第0列设置单元格背景色//如果在第一列隐藏单元格if(I==0){ my current _ cell。风格。背景=' RGB(255，0，0)'；} else {我当前的_ cell。风格。显示='无'；} }我的表体。appendchild(我的当前行)；}我的桌子。appendchild(我的表体)；我的身体。appendchild(我的表)；}/脚本/html