首页 > 代码库 > 第10章 DOM （2 DOM操作技术）

第10章 DOM （2 DOM操作技术）

2024-10-11 06:48:38   219人阅读

10.2 DOM操作技术

10.2.1 动态脚本

使用<script>元素可以向页面中插入JavaScript 代码，一种方式是通过其src 特性包含外部文件，另一种方式就是用这个元素本身来包含代码。而这一节要讨论的动态脚本，指的是在页面加载时不存在，但将来的某一时刻通过修改DOM 动态添加的脚本。跟操作HTML 元素一样，创建动态脚本也有两种方式：插入外部文件和直接插入JavaScript 代码。

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

<script type="text/javascript" src="http://www.mamicode.com/client.js"></script>

这个<script>元素包含了第9 章的客户端检测脚本。而创建这个节点的DOM 代码如下所示：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);

显然，这里的DOM 代码如实反映了相应的HTML 代码。不过，在执行最后一行代码把<script>元素添加到页面中之前，是不会下载外部文件的。也可以把这个元素添加到<head>元素中，效果相同。整个过程可以使用下面的函数来封装：

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>

从逻辑上讲，下面的DOM代码是有效的：

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert(‘hi‘);}"));
document.body.appendChild(script);

但在IE 中，则会导致错误。IE 将<script>视为一个特殊的元素，不允许DOM 访问其子节点。不过，可以使用<script>元素的
text 属性来指定JavaScript 代码，像下面的例子这样：

var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function sayHi(){alert(‘hi‘);}";
document.body.appendChild(script);

可以使用下列的兼容代码：

var script = document.createElement("script");
script.type = "text/javascript";
var code = "function sayHi(){alert(‘hi‘);}";
try {
    script.appendChild(document.createTextNode("code"));
} catch (ex){
    script.text = "code";
}
document.body.appendChild(script);

整个过程可以用以下函数来表示：

function loadScriptString(code){
　　var script = document.createElement("script");
　　script.type = "text/javascript";
　　try {
　　　　script.appendChild(document.createTextNode(code));
　　} catch (ex){
　　　　script.text = code;
　　}
　　document.body.appendChild(script);
}

//下面是调用这个函数的示例：
loadScriptString("function sayHi(){alert(‘hi‘);}");

以这种方式加载的代码会在全局作用域中执行，而且当脚本执行后将立即可用。实际上，这样执行代码与在全局作用域中把相同的字符串传递给eval()是一样的。

10.2.2  动态样式

能够把CSS 样式包含到HTML 页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。与动态脚本类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。

我们以下面这个典型的<link>元素为例：

<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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");

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

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

按照相同的逻辑，下列DOM 代码应该是有效的：

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

IE 将<style>视为一个特殊的、与<script>类似的节点，不允许访问其子节点。事实上，IE 此时抛出的错误与向<script>
元素添加子节点时抛出的错误相同。解决IE 中这个问题的办法，就是访问元素的styleSheet 属性，该属性又有一个cssText 属性，可以接受CSS 代码。因此，通用的解决方案如下。

function loadStyleString(css){
　　var style = document.createElement("style");
　　style.type = "text/css";
　　try{
　　　　style.appendChild(document.createTextNode(css));
　　} catch (ex){
　　　　style.styleSheet.cssText = css;
　　}
　　var head = document.getElementsByTagName("head")[0];
　　head.appendChild(style);
}

//调用这个函数的示例如下：
loadStyleString("body{background-color:red}");

10.2.3 操作表格

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

<table border="1" width="100%">
　　<tbody>
　　　　<tr>
　　　　　　<td>Cell 1,1</td>
　　　　　　<td>Cell 2,1</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>Cell 1,2</td>
　　　　　　<td>Cell 2,2</td>
　　　　</tr>
　　</tbody>
</table>

要使用核心DOM方法创建这些元素，得需要像下面这么多的代码：

//创建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);

//创建第二行
var row2 = document.createElement("tr");
tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2= document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);

//将表格添加到文档主体中
document.body.appendChild(table);

显然，DOM代码很长，还有点不太好懂。为了方便构建表格，HTML DOM 还为<table>、<tbody>和<tr>元素添加了一些属性和方法。

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

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

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

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

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

? cells：保存着<tr>元素中单元格的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);

在这次的代码中，创建<table>和<tbody>的代码没有变化。不同的是创建两行的部分，其中使用了HTML DOM 定义的表格属性和方法。在创建第一行时，通过<tbody>元素调用了insertRow()方法，传入了参数0——表示应该将插入的行放在什么位置上。执行这一行代码后，就会自动创建一行并将其插入到<tbody>元素的位置0 上，因此就可以马上通过tbody.rows[0]来引用新插入的行。

创建单元格的方式也十分相似，即通过<tr>元素调用insertCell()方法并传入放置单元格的位置。然后，就可以通过tbody.rows[0].cells[0]来引用新插入的单元格，因为新创建的单元格被插入到了这一行的位置0 上。

10.2.4 使用NodeList

理解NodeList 及其“近亲”NamedNodeMap 和HTMLCollection，是从整体上透彻理解DOM的关键所在。这三个集合都是“动态的”；换句话说，每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着最新、最准确的信息。从本质上说，所有NodeList 对象都是在访问DOM文档时实时运行的查询。例如，下列代码会导致无限循环：

var divs = document.getElementsByTagName("div"),
    i,
    div;

for (i=0; i < divs.length; i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}

第一行代码会取得文档中所有<div>元素的HTMLCollection。由于这个集合是“动态的”，因此只要有新<div>元素被添加到页面中，这个元素也会被添加到该集合中。浏览器不会将创建的所有集合都保存在一个列表中，而是在下一次访问集合时再更新集合。结果，在遇到上例中所示的循环代码时，就会导致一个有趣的问题。每次循环都要对条件i < divs.length 求值，意味着会运行取得所有<div>元素的查询。考虑到循环体每次都会创建一个新<div>元素并将其添加到文档中，因此divs.length 的值在每次循环后都会递增。既然i 和divs.length 每次都会同时递增，结果它们的值永远也不会相等。

如果想要迭代一个NodeList，最好是使用length 属性初始化第二个变量，然后将迭代器与该变量进行比较，如下面的例子所示：

var divs = document.getElementsByTagName("div"),
    i,
    len,
    div;

for (i=0, len=divs.length; i < len; i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}

这个例子中初始化了第二个变量len。由于len 中保存着对divs.length 在循环开始时的一个快照，因此就会避免上一个例子中出现的无限循环问题。

一般来说，应该尽量减少访问NodeList 的次数。因为每次访问NodeList，都会运行一次基于文档的查询。所以，可以考虑将从NodeList 中取得的值缓存起来。

10.3 小结

DOM是语言中立的API，用于访问和操作HTML 和XML 文档。DOM1 级将HTML 和XML 文档形象地看作一个层次化的节点树，可以使用JavaScript 来操作这个节点树，进而改变底层文档的外观和结构。

DOM 由各种节点构成，简要总结如下。

? 最基本的节点类型是Node，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自Node。
? Document 类型表示整个文档，是一组分层节点的根节点。在JavaScript 中，document 对象是Document 的一个实例。使用document 对象，有很多种方式可以查询和取得节点。
? Element 节点表示文档中的所有HTML 或XML 元素，可以用来操作这些元素的内容和特性。
? 另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA 区域和文档片段。

访问DOM 的操作在多数情况下都很直观，不过在处理<script>和<style>元素时还是存在一些复杂性。由于这两个元素分别包含脚本和样式信息，因此浏览器通常会将它们与其他元素区别对待。这些区别导致了在针对这些元素使用innerHTML 时，以及在创建新元素时的一些问题。

理解DOM的关键，就是理解DOM 对性能的影响。DOM操作往往是JavaScript 程序中开销最大的部分，而因访问NodeList 导致的问题为最多。NodeList 对象都是“动态的”，这就意味着每次访问NodeList 对象，都会运行一次查询。有鉴于此，最好的办法就是尽量减少DOM操作。

 

第10章 DOM （2 DOM操作技术）


联系
我们