java web中的DOM全解

最新推荐文章于 2024-08-21 20:15:01 发布

幼儿园扛把子丶

最新推荐文章于 2024-08-21 20:15:01 发布

阅读量1.4k

点赞数 2

分类专栏： java web

本文链接：https://blog.csdn.net/jinqizhe/article/details/98469458

版权

java web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是DOM？

通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。

所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也几乎难觅踪影了。

DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。

DOM被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

Core DOM

定义了一套标准的针对任何结构化文档的对象

XML DOM

定义了一套标准的针对XML文档的对象

HTML DOM

定义了一套标准的针对HTML文档的对象。

HTML DOM 节点

HTML文档中的每个成分都是一个节点。

节点

根据DOM，HTML文档中的每个成分都是一个节点。

DOM是这样规定的：

整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点

Node 层次

节点彼此都有等级关系。

HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

文档树（节点数）

请看下面这个HTML文档：

<html>
  <head>
    <title>DOM Tutorial</title> 
  </head> 
  <body> 
    <h1>DOM Lesson one</h1> 
    <p>Hello world!</p> 
  </body> 
</html>

上面所有的节点彼此间都存在关系。

除文档节点之外的每个节点都有父节点。举例，<head> 和 <body>的父节点是<html>节点，文本节点"Hello world!"的父节点是节点。

大部分元素节点都有子节点。比方说，<head>节点有一个子节点：<title>节点。<title>节点也有一个子节点：文本节点"DOM Tutorial"。

当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1>和 是同辈，因为它们的父节点均是<body>节点。

节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是<html>节点的后代，而第一个文本节点是<head>节点的后代。

节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把<html>节点作为先辈节点。

HTML DOM访问节点

通过DOM，您可访问HTML文档中的每个节点。

查找并访问节点

你可通过若干种方法来查找您希望操作的元素：

通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的parentNode、firstChild以及lastChild属性

getElementById() 和 getElementsByTagName()

getElementById() 和 getElementsByTagName()这两种方法，可查找整个HTML文档中的任何HTML元素。

这两种方法会忽略文档的结构。假如您希望查找文档中所有的元素，getElementsByTagName()会把它们全部找到，不管元素处于文档中的哪个层次。同时，getElementById()方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。

这两种方法会像您提供任何你所需要的HTML元素，不论它们在文档中所处的位置！

getElementById()可通过指定的ID来返回元素：

getElementById() 语法

document.getElementById("ID");

注释：getElementById() 无法工作在XML中。在XML文档中，您必须通过拥有类型id的属性来进行搜索，而此类型必须在XML DTD中进行声明。

getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。

getElementsByTagName() 可被用于任何的HTML元素：

getElementsByTagName() 语法

document.getElementsByTagName("标签名称");

或者：

document.getElementById('ID').getElementsByTagName("标签名称");

实例 1

下面这个例子会返回文档中所有元素的一个节点列表：

document.getElementsByTagName("p");

实例 2

下面这个例子会返回所有元素的一个节点列表，且这些元素必须是id为"maindiv"的元素的后代：

document.getElementById('maindiv').getElementsByTagName("p");

节点列表（nodeList）

当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：

var x=document.getElementsByTagName("p");

现在，变量x包含着页面中所有元素的一个列表，并且我们可以通过它们的索引号来访问这些元素。

注释：索引号从0开始。

您可以通过使用length属性来循环遍历节点列表：

var x=document.getElementsByTagName("p");

for (var i=0;i<x.length;i++)

  // do something with each paragraph

您也可以通过索引号来访问某个具体的元素。

要访问第三个元素，您可以这么写：

var y=x[2];

parentNode、firstChild以及lastChild

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。

请看下面这个HTML片段：

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Alaska</td>
  </tr>
</table>

在上面的HTML代码中，第一个<td>是<tr>元素的首个子元素（firstChild），而最后一个<td>是<tr>元素的最后一个子元素（lastChild）。

此外，<tr>是每个<td>元素的父节点（parentNode）。

对firstChild最普遍的用法是访问某个元素的文本：

var x=[a paragraph];

var text=x.firstChild.nodeValue;

parentNode属性常被用来改变文档的结构。假设您希望从文档中删除带有id为"maindiv"的节点：

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

首先，您需要找到带有指定id的节点，然后移至其父节点并执行removeChild()方法。

根节点

有两种特殊的文档属性可用来访问根节点：

document.documentElement
document.body

第一个属性可返回存在于XML以及HTML文档中的文档根节点。

第二个属性是对HTML页面的特殊扩展，提供了对<body>标签的直接访问。

HTML DOM 节点信息

nodeName、nodeValue以及nodeType包含有关于节点的信息。

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）

nodeName

nodeName属性含有某个节点的名称。

元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document

注释：nodeName所包含的XML元素的标签名称永远是大写的

nodeValue

对于文本节点，nodeValue属性包含文本。

对于属性节点，nodeValue属性包含属性值。

nodeValue属性对于文档节点和元素节点是不可用的。

nodeType

nodeType属性可返回节点的类型。

最重要的节点类型是：

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

一个 HTML DOM 实例

一个HTML DOM的实例

下面这个例子向我们展示了当一个用户在文档中点击时，HTML文档的背景颜色如何被改变。

<html>
<head>
    <script type="text/javascript">
    function ChangeColor()
    {
    document.body.bgColor="yellow"
    }
</script>
</head>
    <body onclick="ChangeColor()">
    Click on this document!
</body>
</html>

DOM的核心： Node
由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：
Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：

Js代码

Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点
Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode
Node.ENTITY_REFERENCE_NODE (5)
Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点
Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点
Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>
Node.DOCUMENT_FRAGMENT_NODE (11)
Node.NOTATION_NODE (12) //DTD中的Nation定义

❑ Node接口包含的特性/方法
节点的属性
nodeName 属性将返回一个字符串，其内容是给定节点的名字。如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text 的字符串；

nodeType 属性将返回一个整数，这个数值代表给定节点的类型
nodeValue 属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；

ownerDocument 指向这个节点所属的文档
attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点

childNodes 所有子节点的列表
firstChild 指向在childNodes列表中的第一个节点
lastChild 指向在childNodes列表中的最后一个节点
nextSibling 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
previousSibling 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
parentNode 返回一个给定节点的父节点

❑ hasChildNodes() 当childNodes包含一个或多个节点时，返回真
❑ appendChild(node) 将node添加到childNodes的末尾
❑ removeChild(node) 将node从childNodes中删除

❑ insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode

Js代码

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

❑ replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode

Js代码

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

❑ 获得Node：

Js代码

/* 通过document对象 */
var oHtml = document.documentElement;
/* 得到<head />和<body /> */
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
/* 可以用这种方式 */
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
/* 也可以使用方法获取数组的索引值 */
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
/* 使用document.body来得到<body /> */
var oBody = document.body;

❑ createElement(element)
创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
document.body.appendChild(para);

❑ createTextNode()
创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串

Js代码

var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);

❑ cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本，参数为 true 或者 false，true 表示同时复制该节点的子节点，false 则不复制任何子节点。

Js代码

var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);

❑ 检测节点类型
通过使用nodeType特性检验节点类型：
alert(document.nodeType); //outputs "9"
alert(document.documentElement.nodeType); //outputs "1"
这个例子中，document.nodeType返回9，等于Node.DOCUMENT_NODE；同时document. documentElement.nodeType返回1，等于Node.ELEMENT_NODE。

也可以用Node常量来匹配这些值：
alert(document.nodeType == Node.DOCUMENT_NODE); //true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE); //true

这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari 1.0+上正常运行。但是IE不支持这些常量，所以这些代码在IE上会产生错误。

❑ 处理特性
即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。
Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
getNamedItem(name) 返回nodeName属性值等于name的节点；
removeNamedItem(name) 删除nodeName属性值等于name的节点；
setNamedItem(node) 将node添加到列表中，按其nodeName属性进行索引；
item(pos) 像NodeList一样，返回在位置pos的节点；

请记住这些方法都是返回一个Attr节点，而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。

当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，它的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。
例如，假设有这样一个元素：
hello world!

假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值：
var sId = oP.attributes.getNamedItem("id").nodeValue; //p1
或者
var sId = oP.attributes.item(0).nodeValue;

还可以通过给nodeValue属性赋新值来改变id特性：
oP.attributes.getNamedItem("id").nodeValue = "newId";

Attr节点也有一个完全等同于（同时也完全同步于）nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。

因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：
getAttribute(name) 等于attributes.getNamedItem(name).value；
setAttribute(name, newvalue) 等于attribute.getNamedItem(name).value = newvalue；
removeAttribute(name) 等于attributes.removeNamedItem(name)

要获取前面用的的id特性，只需这样做：
var sId = oP.getAttribute("id");
更改ID:
oP.setAttribute("id", "newId");

❑ setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

❑ getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。

❑ getElementById()
element = document.getElementById(ID)
寻找一个有着给定 id 属性值的元素，返回一个元素节点

❑ getElementsByName()
用来获取所有name特性等于指定值的元素：
elements = document.getElementsByName(tagName)
返回一个节点集合。

❑ getElementsByTagName()
用于寻找有着给定标签名的所有元素：
elements = document.getElementsByTagName(tagName)
返回一个节点集合。

❑ 生成与操作Node
createAttribute(name) ：创建一个名为name的属性节点。
createCDATASection(text) ：创建一个子节点为text的CDATA区。
createComment(text) ：创建一个注释内容为text的注释节点。
createDocumentFragment() ：创建一个文档片断（fragment）节点。
createElement(tagName) ：创建一个名为tagName的元素节点。
createEntityReference(name) ：Creates an entity reference node with the given name。
createProcessingInstruction(target, data) ：Creates a PI node with the given target and data。
createTextNode(text) ：创建一个包含text的文本节点。
其中最重要的方法是createElement(),createDocumentFragment(), create TextNode()。

Js代码

/*使用createElement(),createTextNode(),appendChild()动态添加节点*/
function createMessage(){
var op = document.createElement("p");
var oText = document.createTextNode("hello world!");
op.appendChild(oText);
document.body.appendChild(op);
}

❑ 使用createDocumentFragment()

Js代码

//通常做法
var arrText = ['first', 'second', 'third'];
for(var i=0; i<arrText.length; i++){
var op = document.createElement('p');
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
document.body.appendChild(op);
}
//使用documentFragment
var arrText = ['first', 'second', 'third'];
var oFragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++){
var op = document.createElement('p');
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
oFragment.appendChild(op);
}
document.body.appendChild(oFragment);

通过DocumentFragment的方式效率更高。

❑ HTML DOM：
使用DOM的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如
使用DOM core：oImg.setAttribute("src", "picture.gif");
使用HTML DOM：oImg.src = "picture.jpg";

简介

本文概述了一些强大的，基本的DOM 级别一中的法以及如何在JavaScript中使用它们。你将会学习到如何动态地创建，访问，控制以及移除HTML元素。这里提到的DOM方法，并非是 HTML专有的；它们在XML中同样适用。这里所有的示例，在任何全面支持DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器。这里的示例代码在IE5中也能正常工作。

这里所提到的DOM方法是第一级文档对象模型定义的核心的一部分。DOM 级别一包括对文档进行访问和处理的方法（DOM 1 核心）和专门为HTML文档定义的方法。

Sample1.html概览

这段文字是通过一个实例代码来介绍了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;j<2;j++) {
            // 创建一个TR元素
            mycurrent_row=document.createElement("TR");
            for(i=0;i<2;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");
    }
</script>
</head>
<body onload="start()">
</body>
</html>

注意我们创建元素和文本节点的顺序：

首先我们创建了TABLE元素。
然后，我们创建了TABLE的子元素--TBODY。
然后，我们使用循环语句创建了TBODY的子元素--TR。
对于每一个TR元素，我们使用一个循环语句创建它的子元素--TD。
对于每一个TD元素，我们创建单元格内的文本节点。

现在，我们创建了TABLE，TBODY，TR，TD等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序：

首先，我们将每一个文本节点接在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);

请记住这个机制。你将会在W3C DOM编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。

下面是由javascript代码生成的HTML代码：

...
<TABLE border=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方法来创建这个表格和它内部的子元素。请在脑海中时刻保留你想要创建的数据结构的树之模型，这样有利于更简便的写出必须的代码。在图1的TABLE树中，TABLE有一个子元素TBODY。TBODY有两个子元素。每一个TR又含有一个子元素（TD）。最后，每一个TD 有一个子元素--文本节点。

基本DOM方法 - Sample2.html

getElementByTagName是文档接口（Document interface）和元素接口（Element interface）的中的方法，所以不管是根文档对象还是所有的元素对象都含有方法getElementByTagName。用来通过它们的标签名称（tag name）来获得某些元素的一系列子元素。你可以使用的方法是：element.getElementsByTagName(tagname)。

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

<html>
<head>
<title>样例代码 - 使用 JavaScript 和 DOM 接口操作 HTML 表格</title>
<script>
    function start() {
        // 获得所有的body元素列表（在这里将只有一个）
        myDocumentElements=document.getElementsByTagName("body");
        // 我们所需要body元素是这个列表的第一个元素
        myBody=myDocumentElements.item(0);
        // 现在，让我们获得body的子元素中所有的p元素
        myBodyElements=myBody.getElementsByTagName("p");
        // 我们所需要的是这个列表中的第二个单元元素
        myP=myBodyElements.item(1);
    }
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>

在这个例子中，我们设置变量myP指向DOM对象body中的第二个p元素：

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

一旦你取得了HTML元素的DOM对象，你就可以设置它的属性了。比如，如果你希望设置背景色属性，你只需要添加：

myP.style.background="rgb(255,0,0)";
// 设置inline的背景色风格

使用document.createTextNode(..)创建文本节点

使用文档对象来调用一个createTextNode方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个展示那个文本节点信息的对象。

myTextNode=document.createTextNode("world");

这表示你已经创建了一个TEXT——NODE（一个文字片断）类型的节点，并且它的内容是“world”，任何你对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元素或者任何其它你想要的元素。比如，如果你想要创建一个新的P作为BODY的子元素，你可以使用前面例子的myBody并给它接上一个新的元素节点。使用 document.createElement("tagname")可以方便的创建一个节点。如下：

myNewPTAGnode=document.createElement("p");
myBody.appendChild(myNewPTAGnode);

使用removeChild(..)方法移除节点

每一个节点都可以被移除.下面的一行代码移除了包含在myP(第二个p元素)下面的文本节点world。

myP.removeChild(myTextNode);

最后你可以将myTextNode（那个包含了world单词的节点）添加给我们最后创建的P元素：

myNewPTAGnode.appendChild(myTextNode);

被修改的对象树的最后的状态如下：

动态创建一个表格(回到Sample1.html)

这一段落的剩余部分我们将继续修改我们sample1.html。下面的图展示了我们在示例中创建的表格的对象树的结构。

复习一下HTML表格结构

创建元素节点并将他们插入到文档树中

sample1.html中创建表格的基本步骤是：

获得body对象（文档对象的第一个元素）
创建所有元素。
最后，根据表格结构（上面图中所示）将每一个孩子节点拼接起来。下面的一段源码是经过修改的sample1.html

在start函数的最后，有一行新代码。使用另一个DOM方法（setAttribute）来设置表格的边界属性。setAttribute有两个参数：属性的名称和属性的值。你可以使用这个方法来设置任意元素的任意属性。

<head>
<title>示例代码 - 使用Javascript和DOM Interfaces来处理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;j<2;j++) {
            // 创建一个标签名称为在TR的元素
            mycurrent_row=document.createElement("TR");
            for(i=0;i<2;i++) {
                // 创建一个标签名称为在TD的元素
                mycurrent_cell=document.createElement("TD");
                // 创建一个文字节点
                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);
        // 设置边界属性为2
        mytable.setAttribute("border","2");
    }
</script>
</head>
<body onload="start()">
</body>
</html>

使用CSS和DOM来操作表格

从表格中获得一个文字节点

示例介绍了两个新的DOM属性。首先，使用childNodes属性来获得mycel的孩子节点列表。childNodes列表包括所有的孩子节点，无论它们的名称或类型是什么。像getElemengByTagName一样，它返回了一个节点列表。不同的是， getElementByTagName只返回指定标签名称的元素。一旦你获得了返回的列表，你可以使用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=mytablebody.getElementsByTagName("tr").item(1);
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。这个调用是用来设置表格的边界属性的。然后是用了getAttribute方法来获得一个属性的值：

mytable.getAttribute("border");

通过改变样式属性来隐藏一列

一旦你在你的javascript变量中保存了一个对象，你就可以直接为它设置样式属性了。下面的代码是修改后的sample1.html，在这里，第二列的每一个单元格都被隐藏了。而且第一列中的每一个单元格改为使用红色背景。注意，样式属性是被直接设置的。

<html>
<body onload="start()">
</body>
<script>
    function start() {
       var mybody=document.getElementsByTagName("body").item(0);
       mytable = document.createElement("TABLE");
       mytablebody = document.createElement("TBODY");
       for(j=0;j<2;j++) {
           mycurrent_row=document.createElement("TR");
           for(i=0;i<2;i++) {
               mycurrent_cell=document.createElement("TD");
               currenttext=document.createTextNode("cell is:"+i+j);
               mycurrent_cell.appendChild(currenttext);
               mycurrent_row.appendChild(mycurrent_cell);
               // 当column为0时，设置单元格背景色；column为1时隐藏单元格
               if(i==0) {
                   mycurrent_cell.style.background="rgb(255,0,0)";
               } else {
                   mycurrent_cell.style.display="none";
               }
           }
           mytablebody.appendChild(mycurrent_row);
       }
       mytable.appendChild(mytablebody);
       mybody.appendChild(mytable);
    }
</script>
</html>