JavaScript DOM(文档对象模型)_ment.domain!=document.domain||(document.referrer-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36432666/article/details/86648931

本文深入讲解DOM（文档对象模型）的基础知识，包括DOM的节点层次、类型与操作方法，如节点的创建、文本节点的处理及动态脚本与样式的加载。同时探讨了DOM在表格构建、NodeList运用等方面的技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描
绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

注意，IE 中的所有DOM 对象都是以COM 对象的形式实现的。这意味着IE 中的DOM 对象与原生JavaScript 对象的行为或活动特点并不一致。

一、节点层次

DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。 以HTML为例：

<html>
	<head>
		<title>Sample Page</title>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

可以将这个简单的HTML 文档表示为一个层次结构,文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点，即<html>元素，我们称之为文档元素。

文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML 页面中，文档元素始终都是<html>元素。在XML 中，没有预定义的元素，因此任何元素都可能成为文档元素。

每一段标记都可以通过树中的一个节点来表示：HTML 元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有12 种节点类型，这些类型都继承自一个基类型。

1.1 Node类型

DOM1 级定义了一个Node接口，该接口将由DOM 中的所有节点类型实现。这个Node 接口在JavaScript 中是作为Node 类型实现的；除了IE 之外，在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自Node 类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个nodeType 属性，用于表明节点的类型。节点类型由在Node 类型中定义的下列12 个数值常量来表示，任何节点类型必居其一：
Node.ELEMENT_NODE(1)；
Node.ATTRIBUTE_NODE(2)；
Node.TEXT_NODE(3)；
Node.CDATA_SECTION_NODE(4)；
Node.ENTITY_REFERENCE_NODE(5)；
Node.ENTITY_NODE(6)；
Node.PROCESSING_INSTRUCTION_NODE(7)；
Node.COMMENT_NODE(8)；
Node.DOCUMENT_NODE(9)；
Node.DOCUMENT_TYPE_NODE(10)；
Node.DOCUMENT_FRAGMENT_NODE(11)；
Node.NOTATION_NODE(12)。

通过比较上面这些常量，可以很容易地确定节点的类型，例如：

if (someNode.nodeType == Node.ELEMENT_NODE){ //在IE 中无效
alert("Node is an element.");
}

由于IE 没有公开Node 类型的构造函数，因此上面的代码在IE 中会导致错误。为了确保跨浏览器兼容，最好还是将nodeType属性与数字值进行比较，如下所示：

if (someNode.nodeType == 1){ //适用于所有浏览器
alert("Node is an element.");
}

1.1.1 nodeName 和nodeValue 属性

要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。在使用这两个值以前，最好是像下面这样先检测一下节点的类型。

if (someNode.nodeType == 1){
value = someNode.nodeName; //nodeName 的值是元素的标签名
}

在这个例子中，首先检查节点类型，看它是不是一个元素。如果是，则取得并保存nodeName 的值。对于元素节点，nodeName 中保存的始终都是元素的标签名，而nodeValue 的值则始终为null。

1.1.2 节点关系

文档中所有的节点之间都存在这样或那样的关系。节点间的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。
在HTML 中，可以将<body>元素看成是<html>元素的子元素；相应地，也就可以将<html>元素看成是<body>元素的父元素。而<head>元素，则可以看成是<body>元素的同胞元素，因为它们都是同一个父元素<html>的直接子元素。

每个节点都有一个childNodes属性，其中保存着一个NodeList 对象。NodeList是一种类数组
对象，用于保存一组有序的节点，可以通过位置来访问这些节点

下面的例子展示了如何访问保存在NodeList 中的节点——可以通过方括号，也可以使用item()
方法。

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

无论使用方括号还是使用item()方法都没有问题，但使用方括号语法看起来与访问数组相似，因此颇受一些开发人员的青睐。

要注意length属性表示的是访问NodeList 的那一刻，其中包含的节点数量。对arguments 对象使用Array.prototype.slice()方法可以将其转换为数组。而采用同样的方法，也可以将NodeList 对象转换为数组。如：

//在IE8 及之前版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

要想在IE 中将NodeList 转换为数组，必须手动枚举所有成员。下列代码在所有浏览器中都
可以运行：

function convertToArray(nodes){
	var array = null;
	try {
	array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器
	} catch (ex) {
		array = new Array();
		for (var i=0, len=nodes.length; i < len; i++){
		array.push(nodes[i]);
	}
	}
		return array;
}

每个节点都有一个parentNode 属性，该属性指向文档树中的父节点。
此外，包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling 属性，可以访问同一列表中的其他节点。

当然，如果列表中只有一个节点，那么该节点的nextSibling 和previousSibling 都为null。

在反映这些关系的所有属性当中，childNodes属性与其他属性相比更方便一些，因为只须使用简单的关系指针，就可以通过它访问文档树中的任何节点。另外，hasChildNodes()也是一个非常有用的方法，这个方法在节点包含一或多个子节点的情况下返回true；应该说，这是比查询childNodes列表的length 属性更简单的方法。

所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。
通过这个属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

1.1.3 操作节点

因为关系指针都是只读的，所以DOM 提供了一些操作节点的方法。其中，最常用的方法是
appendChild()，用于向childNodes列表的末尾添加一个节点。更新完成后，appendChild()返回新增的节点。

如果需要把节点放在childNodes 列表中某个特定的位置上，而不是放在末尾，那么可以使用
insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。
如果参照节点是null，则insertBefore()与appendChild()执行相同的操作。

下面要介绍的replaceChild()方法接受的两个参数是：要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。来看下面的例子。

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

如果只想移除而非替换节点，可以使用removeChild()方法。这个方法接受一个参数，即要移除的节点。

1.1.4 其他方法

有两个方法是所有类型的节点都有的。第一个就是cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false 的情况下，执行浅复制，即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。

最后一个方法是normalize()，这个方法唯一的作用就是处理文档树中的文本节点。如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。

1.2 Document类型

JavaScript 通过Document 类型表示文档。Document 节点具有下列特征：

nodeType 的值为9；
nodeName 的值为"#document"；
nodeValue 的值为null；
parentNode 的值为null；
ownerDocument 的值为 null；
其子节点可能是一个DocumentType（最多一个）、Element（最多一个）ProcessingInstruction或Comment。

1.2.1 文档的子节点

虽然DOM 标准规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment，但还有两个内置的访问其子节点的快捷方式。

第一个就是documentElement属性，该属性始终指向HTML 页面中的<html>元素。
另一个就是通过childNodes列表访问文档元素，但通过documentElement属性则能更快捷、更直接地访问该元素。

1.2.2 文档信息

作为HTMLDocument 的一个实例，document 对象还有一些标准的Document 对象所没有的属性。这些属性提供了document 对象所表现的网页的一些信息。其中第一个属性就是title，包含着<title>元素中的文本,通过这个属性可以取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中。
如：

//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";

接下来要介绍的3 个属性都与对网页的请求有关，它们是URL、domain 和referrer:
URL 属性中包含页面完整的URL（即地址栏中显示的URL）;
domain 属性中只包含页面的域名;
referrer属性中则保存着链接到当前页面的那个页面的URL。
如：

//取得完整的URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的URL
var referrer = document.referrer;

在这3 个属性中，只有domain 是可以设置的。但由于安全方面的限制，也并非可以给domain 设置任何值。不能将这个属性设置为URL 中不包含的域，如下面的例子所示。

//假设页面来自p2p.wrox.com 域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 出错！

当页面中包含来自其他子域的框架或内嵌框架时，能够设置document.domain 就非常方便了。由于跨域安全限制，来自不同子域的页面无法通过JavaScript 通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript 对象了。

例如，假设有一个页面加载自 www.wrox.com，其中包含一个内嵌框架，框架内的页面加载自 p2p.wrox.com。由于document.domain 字符串不一样，内外两个页面之间无法相互访问对方的JavaScript 对象。但如果将这两个页面的document.domain 值都设置为"wrox.com"，它们之间就可以通信了。

浏览器对domain 属性还有一个限制，即如果域名一开始是“松散的”（loose），那么不能将它再设置为“紧绷的”（tight）。换句话说，在将document.domain 设置为"wrox.com“之后，就不能再将其设置回”p2p.wrox.com"，否则将会导致错误

1.2.3 查找元素

说到最常见的DOM 应用，恐怕就要数取得特定的某个或某组元素的引用，然后再执行一些操作了。其中，Document 类型为此提供了两个方法：getElementById()和getElementsByTagName()。

第一个方法，getElementById()，接收一个参数：要取得的元素的ID。如果找到相应的元素则返回该元素，如果不存在带有相应ID 的元素，则返回null。

另一个常用于取得元素引用的方法是getElementsByTagName()。这个方法接受一个参数，即要
取得元素的标签名，而返回的是包含零或多个元素的NodeList。
在HTML 文档中，这个方法会返回一个HTMLCollection 对象，作为一个“动态”集合，该对象与NodeList 非常类似。例如，下列代码会取得页面中所有的<img>元素，并返回一个HTMLCollection。

var images = document.getElementsByTagName("img");

这行代码会将一个HTMLCollection 对象保存在images 变量中。与NodeList 对象类似，可以
使用方括号语法或item()方法来访问HTMLCollection 对象中的项。而这个对象中元素的数量则可以通过其length 属性取得，如下面的例子所示。

alert(images.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的src 特性
aler t(images.item(0).src); //输出第一个图像元素的 src 特性

HTMLCollection 对象还有一个方法，叫做namedItem()，使用这个方法可以通过元素的name
特性取得集合中的项。

假设上面提到的页面中包含如下<img>元素：

<img src="myimage.gif" name="myImage">

那么就可以通过如下方式从images 变量中取得这个<img>元素：

var myImage = images.namedItem("myImage");

在提供按索引访问项的基础上，HTMLCollection 还支持按名称访问项，这就为我们取得实际想要的元素提供了便利。而且，对命名的项也可以使用方括号语法来访问，如下所示：

var images = document.getElementsByTagName("img");
var myImage = images["myImage"];

要想取得文档中的所有元素，可以向getElementsByTagName()中传入"*"。在JavaScript 及CSS中，星号（*）通常表示“全部”。如：

var allElements = document.getElementsByTagName("*");

仅此一行代码返回的HTMLCollection 中，就包含了整个页面中的所有元素——按照它们出现的
先后顺序。

第三个方法，也是只有HTMLDocument 类型才有的方法，是getElementsByName()，顾名思义，这个方法会返回带有给定name 特性的所有元素。最常使用getElementsByName()方法的情况是取得单选按钮；

与getElementsByTagName()类似，getElementsByName()方法也会返回一个HTMLCollectioin。但是，对于这里的单选按钮来说，namedItem()方法则只会取得第一项（因为每一项的name 特性都相同）。

1.2.4 特殊集合

除了属性和方法，document 对象还有一些特殊的集合。这些集合都是HTMLCollection 对象，
为访问文档常用的部分提供了快捷方式，包括：

document.anchors，包含文档中所有带name 特性的<a>元素；
~~document.applets，包含文档中所有的<applet>元素，因为不再推荐使用<applet>元素，所以这个集合已经不建议使用了；~~
document.forms，包含文档中所有的<form>元素，document.getElementsByTagName("form")得到的结果相同；
document.images，包含文档中所有的<img>元素，与document.getElementsByTagName ("img")得到的结果相同；
document.links，包含文档中所有带href 特性的<a>元素。这个特殊集合始终都可以通过HTMLDocument 对象访问到，而且，与HTMLCollection 对象类似，集合中的项也会随着当前文档内容的更新而更新。

1.2.5 DOM 一致性检测

由于DOM 分为多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要了。document.implementation 属性就是为此提供相应信息和功能的对象，与浏览器对DOM的实现直接对应。DOM1 级只为document.implementation规定了一个方法，即hasFeature()。这个方法接受两个参数：要检测的DOM 功能的名称及版本号。如果浏览器支持给定名称和版本的功能，则该方法返回true，如下面的例子所示：

var hasXmlDom = document.implementation.hasFeature("XML", "1.0");

1.2.6 文档写入

有一个document 对象的功能已经存在很多年了，那就是将输出流写入到网页中的能力。这个能力体现在下列4 个方法中：write()、writeln()、open()和close()

其中，write()和writeln()方法都接受一个字符串参数，即要写入到输出流中的文本。write()会原样写入，而writeln()则会在字符串的末尾添加一个换行符（\n）。

此外，还可以使用write()和writeln()方法动态地包含外部资源，例如JavaScript 文件等。在包
含JavaScript 文件时，必须注意不能像下面的例子那样直接包含字符串"</script>"，因为这会导致该字符串被解释为脚本块的结束，它后面的代码将无法执行。

为避免这个问题，只需加入转义字符\即可；

//原：
<html>
	<head>
		<title>document.write() Example 2</title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("<script type=\"text/javascript\" src=\"file.js\">" +
		"</script>");
		</script>
	</body>
</html>

//转义后：
<html>
	<head>
		<title>document.write() Example 3</title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("<script type=\"text/javascript\" src=\"file.js\">" +
		"<\/script>");
	</script>
	</body>
</html>

如果在文档加载结束后再调用document.write()，那么输出的内容将会重写整个页面。

方法open()和close()分别用于打开和关闭网页的输出流。如果是在页面加载期间使用write()或writeln()方法，则不需要用到这两个方法。

严格型XHTML 文档不支持文档写入。对于那些按照application/xml+xhtml内容类型提供的页面，这两个方法也同样无效。

1.3 Element类型

除了Document 类型之外，Element 类型就要算是Web 编程中最常用的类型了,Element 节点具有以下特征：

nodeType 的值为1；
nodeName 的值为元素的标签名；
nodeValue 的值为null；
parentNode 可能是Document 或Element；
其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection 或EntityReference。

在HTML 中，标签名始终都以全部大写表示；而在XML（有时候也包括XHTML）
中，标签名则始终会与源代码中的保持一致。假如你不确定自己的脚本将会在HTML 还是XML 文档中执行，最好是在比较之前将标签名转换为相同的大小写形式：

if (element.tagName == "div"){ //不能这样比较，很容易出错！
//在此执行某些操作
}
if (element.tagName.toLowerCase() == "div"){ //这样最好（适用于任何文档）
//在此执行某些操作
}

1.3.1 HTML元素

所有HTML 元素都由HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。HTMLElement 类型直接继承自Element 并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性。

id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），
也很少使用。
className，与元素的class 特性对应，即为元素指定的CSS类。没有将这个属性命名为class，是因为class 是ECMAScript 的保留字

上述这些属性都可以用来取得或修改相应的特性值。以下面的HTML 元素为例：

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

元素中指定的所有信息，都可以通过下列JavaScript 代码取得：

var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"

当然，像下面这样通过为每个属性赋予新的值，也可以修改对应的每个特性：

div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";

1.3.2 取得特性

每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。

注意，传递给getAttribute()的特性名与实际的特性名相同。因此要想得到class 特性值，应该传入"class"而不是"className"，后者只有在通过对象属性访问特性时才用。如果给定名称的特性不存在，getAttribute()返回null。

通过getAttribute()方法也可以取得自定义特性（即标准HTML 语言中没有的特性）的值，以
下面的元素为例：

<div id="myDiv" my_special_attribute="hello!"></div>

这个元素包含一个名为my_special_attribute的自定义特性，它的值是"hello!"。可以像取
得其他特性一样取得这个值，如下所示：

var value = div.getAttribute("my_special_attribute");

自定义特性my_special_attribute 在Safari、Opera、Chrome 及Firefox 中是不存在的；但IE 却会为自定义特性也创建属性。

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不
相同。第一类特性就是style，用于通过CSS 为元素指定样式。

第二类与众不同的特性是onclick 这样的事件处理程序。

由于存在这些差别，在通过JavaScript 以编程方式操作DOM 时，开发人员经常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法。

1.3.3 设置特性

与getAttribute()对应的方法是setAttribute()，这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute()则创建该属性并设置相应的值。如：

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");

因为所有特性都是属性，所以直接给属性赋值可以设置特性的值，如下所示。

div.id = "someOtherId";
div.align = "left";

要介绍的最后一个方法是removeAttribute()，这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性,这个方法并不常用，但在序列化DOM 元素时，可以通过它来确切地指定要包含哪些特性。

1.3.4 attributes 属性(不方便使用，所以一般用上面介绍的三个方法)

Element 类型是使用attributes属性的唯一一个DOM 节点类型。attributes 属性中包含一个NamedNodeMap，与NodeList 类似，也是一个“动态”的集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap 对象中。

NamedNodeMap 对象拥有下列方法:

getNamedItem(name)：返回nodeName 属性等于name 的节点；
removeNamedItem(name)：从列表中移除nodeName 属性等于name 的节点；
setNamedItem(node)：向列表中添加节点，以节点的nodeName 属性为索引；
item(pos)：返回位于数字pos 位置处的节点。

1.3.5 创建元素

使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML 文档中不区分大小写，而在XML（包括XHTML）文档中，则是区
分大小写的。例如，使用下面的代码可以创建一个<div>元素。

var div = document.createElement("div");

此时，还可以操作元素的特性，为它添加更多子节点，以及执行其他操作。来看下面的例子。

div.id = "myNewDiv";
div.className = "box";

在新元素上设置这些特性只是给它们赋予了相应的信息。由于新元素尚未被添加到文档树中，因此设置这些特性不会影响浏览器的显示。要把新元素添加到文档树，可以使appendChild()、insertBefore()或replaceChild()方法。如：

document.body.appendChild(div);

在IE 中可以以另一种方式使用createElement()，即为这个方法传入完整的元素标签，也可以包含属性，如下面的例子所示。如：

var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");

这种方式有助于避开在IE7 及更早版本中动态创建元素的某些问题。

1.3.6 元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。不同浏览器在看待这些节点方面存在显著的不同。

1.4 Text类型

文本节点由Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含HTML 代码。Text 节点具有以下特征：

nodeType 的值为3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；
parentNode 是一个Element；
不支持（没有）子节点。

可以通过nodeValue 属性或data 属性访问Text 节点中包含的文本，这两个属性中包含的值相同。

使用下列方法可以操作节点中的文本。

appendData(text)：将text 添加到节点的末尾。
deleteData(offset, count)：从offset 指定的位置开始删除count 个字符。
insertData(offset, text)：在offset 指定的位置插入text。
replaceData(offset, count, text)：用text 替换从offset 指定的位置开始到offset+count 为止处的文本。
splitText(offset)：从offset 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count)：提取从offset 指定的位置开始到offset+count 为止处的字符串。

除了这些方法之外，文本节点还有一个length 属性，保存着节点中字符的数目。
在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容在。如：

<!-- 没有内容，也就没有文本节点 -->
<div></div>
<!-- 有空格，因而有一个文本节点 -->
<div> </div>
<!-- 有内容，因而有一个文本节点 -->
<div>Hello World!</div>

可以使用以下代码来访问这些文本子节点。

var textNode = div.firstChild; //或者div.childNodes[0]

在取得了文本节点的引用后，就可以像下面这样来修改它了。

div.firstChild.nodeValue = "Some other message";

1.4.1 创建文本节点

可以使用document.createTextNode()创建新文本节点，这个方法接受一个参数——要插入节点
中的文本。
除非把新节点添加到文档树中已经存在的节点中，否则我们不会在浏览器窗口中看到新节点。下面的代码会创建一个<div>元素并向其中添加一条消息。

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);

这个例子创建了一个新<div>元素并为它指定了值为"message"的class 特性。然后，又创建了一个文本节点，并将其添加到前面创建的元素中。最后一步，就是将这个元素添加到了文档的<body>元素中，这样就可以在浏览器中看到新创建的元素和文本节点了。

1.4.2 规范化文本节点

能够将相邻文本节点合并的方法。这个方法是由Node 类型定义的（因而在所有节点类型中都存在），名叫normalize()。如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点。

1.4.3 分割文本节点

Text 类型提供了一个作用与normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue 值

1.5 Comment类型

注释在DOM中是通过Comment 类型来表示的。Comment 节点具有下列特征：

nodeType 的值为8；
nodeName 的值为"#comment"；
nodeValue 的值是注释的内容；
parentNode 可能是Document 或Element；
不支持（没有）子节点。

Comment 类型与Text 类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操
作方法。与Text 类型相似，也可以通过nodeValue 或data 属性来取得注释的内容。

1.6 CDATASection类型

CDATASection 类型只针对基于XML 的文档，表示的是CDATA 区域。与Comment 类似，CDATASection 类型继承自Text 类型，因此拥有除splitText()之外的所有字符串操作方法。

CDATASection 节点具有下列特征：

nodeType 的值为4；
nodeName 的值为"#cdata-section"；
nodeValue 的值是CDATA 区域中的内容；
parentNode 可能是Document 或Element；
不支持（没有）子节点。

CDATA 区域只会出现在XML 文档中，因此多数浏览器都会把CDATA 区域错误地解析为Comment或Element。

在真正的XML 文档中，可以使用document.createCDataSection()来创建CDATA 区域，只需为其传入节点的内容即可。

1.7 DocumentType类型

DocumentType 类型在Web 浏览器中并不常用，仅有Firefox、Safari 和Opera 支持它。
IE9 会给document.doctype 赋正确的对象，但仍然不支持访问DocumentType 类型。

1.8 DocumentFragment类型

在所有节点类型中，只有DocumentFragment 在文档中没有对应的标记。DOM 规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。
要创建文档片段，可以使用document.createDocumentFragment()方法，如下所示：

var fragment = document.createDocumentFragment();

1.9 Attr类型

元素的特性在DOM 中以Attr 类型来表示。在所有浏览器中（包括IE8），都可以访问Attr 类型
的构造函数和原型。
从技术角度讲，特性就是存在于元素的attributes 属性中的节点。特性节点具有下列特征：

nodeType 的值为2；
nodeName 的值是特性的名称；
nodeValue 的值是特性的值；
parentNode 的值为null；
在HTML 中不支持（没有）子节点；
在XML 中子节点可以是Text 或EntityReference。

尽管它们也是节点，但特性却不被认为是DOM 文档树的一部分。开发人员最常使用的是getAttribute()、setAttribute()和remveAttribute()方法，很少直接引用特性节点。

Attr 对象有3 个属性：name、value 和specified。其中，name 是特性名称（与nodeName 的值相同），value 是特性的值（与nodeValue 的值相同），而specified 是一个布尔值，用以区别特性是在代码中指定的，还是默认的。

我们并不建议直接访问特性节点。实际上，使用getAttribute()、setAttribute()和removeAttribute()方法远比操作特性节点更为方便。

二、DOM操作技术

很多时候，DOM 操作都比较简明，因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦。不过，也有一些时候，操作DOM 并不像表面上看起来那么简单。由于浏览器中充斥着隐藏的陷阱和不兼容问题，用JavaScript 代码处理DOM 的某些部分要比处理其他部分更复杂一些。

2.1 动态脚本

使用<script>元素可以向页面中插入JavaScript 代码，一种方式是通过其src 特性包含外部文件，另一种方式就是用这个元素本身来包含代码。这里要讨论的动态脚本，指的是在页面加载时不存在，但将来的某一时刻通过修改DOM 动态添加的脚本。

跟操作HTML 元素一样，创建动态脚本也有两种方式：插入外部文件和直接插入JavaScript 代码。

动态加载的外部JavaScript 文件能够立即运行，比如下面的<script>元素：

<script type="text/javascript" src="client.js"></script>

这个<script>元素包含了前面的的客户端检测脚本
整个过程可以使用下面的函数来封装：

function loadScript(url){
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = url;
	document.body.appendChild(script);
}

然后，就可以通过调用这个函数来加载外部的JavaScript 文件了：

loadScript("client.js");

加载完成后，就可以在页面中的其他地方使用这个脚本了。

另一种指定JavaScript 代码的方式是行内方式，如下面的例子所示：

<script type="text/javascript">
	function sayHi(){
	alert("hi");
}
</script>

2.2 动态样式

能够把CSS 样式包含到HTML 页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。

与动态脚本类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。
我们以下面这个典型的<link>元素为例：

<link rel="stylesheet" type="text/css" href="styles.css">

使用DOM 代码可以很容易地动态创建出这个元素：

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

以上代码在所有主流浏览器中都可以正常运行。需要注意的是，必须将<link>元素添加到<head>
而不是<body>元素，才能保证在所有浏览器中的行为一致。整个过程可以用以下函数来表示：

function loadStyles(url){
	var link = document.createElement("link");
	link.rel = "stylesheet";
	link.type = "text/css";
	link.href = url;
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(link);
}

调用loadStyles()函数的代码如下所示：

loadStyles("styles.css");

加载外部样式文件的过程是异步的，也就是加载样式与执行JavaScript 代码的过程没有固定的次序。

另一种定义样式的方式是使用<style>元素来包含嵌入式CSS，如下所示：

<style type="text/css">
	body {
	background-color: red;
	}
</style>

2.3 操作表格

<table>元素是HTML 中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行、单元格、表头等方面的标签。由于涉及的标签多，因而使用核心DOM 方法创建和修改表格往往都免不了要编写大量的代码。

为了方便构建表格，HTML DOM 还为<table>、<tbody>和<tr>元素添加了一些属性和方法。

为<table>元素添加的属性和方法如下。

caption：保存着对元素（如果有）的指针。
tBodies：是一个元素的HTMLCollection。
tFoot：保存着对元素（如果有）的指针。
tHead：保存着对元素（如果有）的指针。
rows：是一个表格中所有行的HTMLCollection。
createTHead()：创建元素，将其放到表格中，返回引用。
createTFoot()：创建元素，将其放到表格中，返回引用。
createCaption()：创建元素，将其放到表格中，返回引用。
deleteTHead()：删除元素。
deleteTFoot()：删除元素。
deleteCaption()：删除元素。
deleteRow(pos)：删除指定位置的行。
insertRow(pos)：向rows 集合中的指定位置插入一行。

为<tbody>元素添加的属性和方法如下。

rows：保存着元素中行的HTMLCollection。
deleteRow(pos)：删除指定位置的行。
insertRow(pos)：向rows 集合中的指定位置插入一行，返回对新插入行的引用。

为<tr>元素添加的属性和方法如下。

cells：保存着元素中单元格的HTMLCollection。
deleteCell(pos)：删除指定位置的单元格。
insertCell(pos)：向cells 集合中的指定位置插入一个单元格，返回对新插入单元格的引用。

例如，使用以上属性创建表格：

//创建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//将表格添加到文档主体中
document.body.appendChild(table);