mirror of
https://github.com/apachecn/eloquent-js-3e-zh.git
synced 2025-05-23 20:02:20 +00:00
14.
This commit is contained in:
wizardforcel
parent
993125c921
commit
4862c9cb9c
206
14.md
206
14.md
@ -1,8 +1,12 @@
|
||||
## 十四、文档对象模型
|
||||
|
||||
> Too bad! Same old story! Once you've finished building your house you notice you've accidentally learned something that you really should have known—before you started.
|
||||
>
|
||||
> Friedrich Nietzsche，《Beyond Good and Evil》
|
||||
|
||||
当你在浏览器中打开网页时，浏览器会接收网页的HTML文本并进行解析，其解析方式与第11章中介绍的解析器非常相似。浏览器构建文档结构的模型，并使用该模型在屏幕上绘制页面。
|
||||
|
||||
JavaScript在其沙箱中提供了将文本转换成文档对象模型的功能。你可以读取模型，也可以修改模型。模型是一个所见即所得的数据结构，改变模型会使得屏幕上的页面产生相应变化。
|
||||
JavaScript在其沙箱中提供了将文本转换成文档对象模型的功能。它是你可以读取或者修改的数据结构。模型是一个所见即所得的数据结构，改变模型会使得屏幕上的页面产生相应变化。
|
||||
|
||||
### 13.1 文档结构
|
||||
|
||||
@ -29,21 +33,23 @@ JavaScript在其沙箱中提供了将文本转换成文档对象模型的功能
|
||||
|
||||
浏览器使用与该形状对应的数据结构来表示文档。每个盒子都是一个对象，我们可以和这些对象交互，找出其中包含的盒子与文本。我们将这种表示方式称为文档对象模型（Document Object Model），或简称DOM。
|
||||
|
||||
我们可以通过全局变量document来访问这些对象。该对象的documentElement属性引用了表示<html>标签的对象。而<html>标签对象又提供了属性head和body，分别保存了这些元素对应的对象。
|
||||
我们可以通过全局绑定document来访问这些对象。该对象的documentElement属性引用了表示<html>标签的对象。由于每个 HTML 文档都有一个头部和一个主体，它还具有`head`和`body`属性，指向这些元素。
|
||||
|
||||
### 13.2 树
|
||||
|
||||
回想一下第11章中提到的语法树。其结构与浏览器文档的结构极为相似。每个节点可以使用children引用其他节点，而每个子节点又有各自的children。其形状是一种典型的嵌套结构，每个元素可以包含与其自身相似的子元素。
|
||||
回想一下第12章中提到的语法树。其结构与浏览器文档的结构极为相似。每个节点可以使用children引用其他节点，而每个子节点又有各自的children。其形状是一种典型的嵌套结构，每个元素可以包含与其自身相似的子元素。
|
||||
|
||||
如果一个数据结构有分支结构，而且没有任何回环（一个节点不能直接或间接包含自身），并且有一个单一、定义明确的“根节点”，那么我们将这种数据结构称之为树。就DOM来讲，document.documentElement就是其根节点。
|
||||
|
||||
在计算机科学中，树的应用极为广泛。除了表现诸如HTML文档或程序之类的递归结构，树还可以用于维持数据的有序集合，因为在有序的树中寻找或插入一个节点往往比在有序的数组中更高效。
|
||||
在计算机科学中，树的应用极为广泛。除了表现诸如HTML文档或程序之类的递归结构，树还可以用于维持数据的有序集合，因为在树中寻找或插入一个节点往往比在数组中更高效。
|
||||
|
||||
一棵典型的树有不同类型的节点。Egg语言的语法树有变量、值和应用节点。应用节点常常包含子节点，而变量、值则是叶子节点，也就是没有孩子的节点。
|
||||
一棵典型的树有不同类型的节点。Egg 语言的语法树有标识符、值和应用节点。应用节点常常包含子节点，而标识符、值则是叶子节点，也就是没有孩子的节点。
|
||||
|
||||
DOM中也是一样。正规元素（即HTML标签）的节点用于确定文档结构。这些节点可以包含子节点。这类节点中的一个例子是document.body。其中一些子节点可以是叶子节点，比如文本片段或注释（HTML中注释写在<！-和->之间）。
|
||||
DOM中也是一样。元素（表示 HTML 标签）的节点用于确定文档结构。这些节点可以包含子节点。这类节点中的一个例子是document.body。其中一些子节点可以是叶子节点，比如文本片段或注释。
|
||||
|
||||
每个DOM节点对象都包含nodeType属性，该属性包含一个标识节点类型的数字代码。常规元素的值为1，DOM也将该值定义成一个常量属性document.ELEMENT_NODE。文本节点（表示文档中的一段文本）的nodeType属性值是3（document.TEXT_NODE）。注释的值为8（document.COMMENT_NODE）。因此我们可以使用另一种方法来表示文档树：
|
||||
每个DOM节点对象都包含nodeType属性，该属性包含一个标识节点类型的代码（数字）。元素的值为1，DOM也将该值定义成一个常量属性document.ELEMENT_NODE。文本节点（表示文档中的一段文本）代码为3（document.TEXT_NODE）。注释的代码为8（document.COMMENT_NODE）。
|
||||
|
||||
因此我们可以使用另一种方法来表示文档树：
|
||||
|
||||
|
||||
|
||||
@ -51,15 +57,15 @@ DOM中也是一样。正规元素（即HTML标签）的节点用于确定文档
|
||||
|
||||
### 13.3 标准
|
||||
|
||||
并非只有JavaScript会使用数字代码来表示节点类型。本章随后将会展示其他的DOM接口，你可能会觉得这些接口有些奇怪。这是因为DOM并不是为JavaScript而设计的，它定义了一组语言中性的接口，确保也可用于其他系统中，不只是HTML，还有XML。XML是一种通用数据格式，语法与HTML相近。
|
||||
并非只有JavaScript会使用数字代码来表示节点类型。本章随后将会展示其他的DOM接口，你可能会觉得这些接口有些奇怪。这是因为DOM并不是为JavaScript而设计的，它尝试成为一组语言中立的接口，确保也可用于其他系统中，不只是HTML，还有XML。XML是一种通用数据格式，语法与HTML相近。
|
||||
|
||||
这就比较糟糕了。一般情况下标准都是非常易于使用的。但在这里其优势（跨语言的一致性）并不明显。相较于为不同语言提供类似的接口，如果能够将接口与开发者使用的语言进行适当集成，可以为开发者节省大量时间。
|
||||
|
||||
我们举例来说明一下集成问题。比如DOM中每个元素都有childNodes属性。该属性是一个类似于数组的对象，有length属性，也可以使用数字标签访问对应的孩子节点。但该属性是NodeList类型的实例，而不是真正的数组，因此该类型没有诸如slice和forEach之类的方法。
|
||||
我们举例来说明一下集成问题。比如DOM中每个元素都有childNodes属性。该属性是一个类似于数组的对象，有length属性，也可以使用数字标签访问对应的子节点。但该属性是NodeList类型的实例，而不是真正的数组，因此该类型没有诸如slice和map之类的方法。
|
||||
|
||||
有些问题是由不好的设计导致的。例如，我们无法在创建新的节点的同时立即为其添加孩子和属性。相反，你首先需要创建节点，然后将孩子节点逐个添加到节点中，最后利用副作用逐个设置属性。大量使用DOM的结果就是代码冗长。
|
||||
有些问题是由不好的设计导致的。例如，我们无法在创建新的节点的同时立即为其添加孩子和属性。相反，你首先需要创建节点，然后使用副作用，将子节点和属性逐个添加到节点中。大量使用DOM的代码通常较长、重复和丑陋。
|
||||
|
||||
但这些问题并非无法改善。我们可以使用JavaScript构建自己的抽象，因此可以很容易地编写一些工具函数，以更清晰简短的方式描述你的操作。实际上，许多为浏览器设计的库都提供了这类工具。
|
||||
但这些问题并非无法改善。因为JavaScript允许我们构建自己的抽象，可以设计改进方式来表达您正在执行的操作。 许多用于浏览器编程的库都附带这些工具。
|
||||
|
||||
### 13.4 通过树结构访问节点
|
||||
|
||||
@ -67,19 +73,22 @@ DOM节点包含了许多指向相邻节点的链接。下面的图表展示了
|
||||
|
||||
|
||||
|
||||
尽管图表中每种类型的节点只显示出一条链接，但每个节点都有parentNode属性，用于指向包含该节点的节点。类似的，每个元素节点（节点类型为1）均包含childNodes属性，该属性指向一个类似于数组的对象，用于保存其孩子节点。
|
||||
尽管图表中每种类型的节点只显示出一条链接，但每个节点都有parentNode属性，指向一个节点，它是这个节点的一部分。类似的，每个元素节点（节点类型为1）均包含childNodes属性，该属性指向一个类似于数组的对象，用于保存其子节点。
|
||||
|
||||
理论上，你可以通过父子之间的链接移动到树中的任何地方。但JavaScript也提供了一些更加方便的额外链接。firstChild属性和lastChild属性分别指向第一个孩子和最后一个孩子，若没有孩子则值为null。类似的，previousSibling和nextSibling指向相邻节点，分别指向拥有相同父亲的前一个节点和后一个节点。对于第一个孩子，previousSibling是null，而最后一个孩子的nextSibling则是null。
|
||||
|
||||
递归函数非常适合用于处理这类嵌套数据结构。下面的递归函数会扫描一个文档，搜索包含特定字符串的文本节点，并在找到一个节点时返回true。
|
||||
也存在`children`属性，它就像`childNodes`，但只包含元素（类型为 1）的子节点，而不包含其他类型的子节点。 当您对文本节点不感兴趣时，这可能很有用。
|
||||
|
||||
处理像这样的嵌套数据结构时，递归函数通常很有用。 以下函数在文档中扫描包含给定字符串的文本节点，并在找到一个时返回`true`：
|
||||
|
||||
```html
|
||||
function talksAbout(node, string) {
|
||||
if (node.nodeType == document.ELEMENT_NODE) {
|
||||
for (var i = 0; i < node.childNodes.length; i++) {
|
||||
if (talksAbout(node.childNodes[i], string))
|
||||
for (let i = 0; i < node.childNodes.length; i++) {
|
||||
if (talksAbout(node.childNodes[i], string)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
} else if (node.nodeType == document.TEXT_NODE) {
|
||||
return node.nodeValue.indexOf(string) > -1;
|
||||
@ -90,20 +99,22 @@ console.log(talksAbout(document.body, "book"));
|
||||
// → true
|
||||
```
|
||||
|
||||
文本节点的nodeValue属性指向该节点表示的文本字符串。
|
||||
因为`childNodes`不是真正的数组，所以我们不能用`for/of`来遍历它，并且必须使用普通的`for`循环遍历索引范围。
|
||||
|
||||
文本节点的`nodeValue`属性保存它所表示的文本字符串。
|
||||
|
||||
### 13.5 查找元素
|
||||
|
||||
使用父节点、子节点和兄弟节点之间的连接遍历节点确实非常实用，前面的函数就使用这种方法遍历了整个文档。但是如果我们只想查找文档中的特定节点，那么从document.body开始盲目沿着硬编码的链接路径查找节点并非良策。如果程序通过树结构定位节点，就需要依赖于文档的具体结构，而文档结构随后可能发生变化。另一个复杂的因素是DOM会为不同节点之间的空白字符创建对应的文本节点。例如示例文档中的body标签不止包含3个孩子（<h1>和两个<p>元素），其实包含7个孩子：这三个节点、三个节点前后的空格、以及元素之间的空格。
|
||||
使用父节点、子节点和兄弟节点之间的连接遍历节点确实非常实用。但是如果我们只想查找文档中的特定节点，那么从document.body开始盲目沿着硬编码的链接路径查找节点并非良策。如果程序通过树结构定位节点，就需要依赖于文档的具体结构，而文档结构随后可能发生变化。另一个复杂的因素是DOM会为不同节点之间的空白字符创建对应的文本节点。例如示例文档中的body标签不止包含3个孩子（<h1>和两个<p>元素），其实包含7个孩子：这三个节点、三个节点前后的空格、以及元素之间的空格。
|
||||
|
||||
因此，如果你想获取文档中某个链接的href属性，最好不要去获取文档body元素中第六个孩子的第二个孩子，而最好直接获取文档中的第一个链接，而且这样的操作确实可以实现。
|
||||
|
||||
```html
|
||||
var link = document.body.getElementsByTagName("a")[0];
|
||||
let link = document.body.getElementsByTagName("a")[0];
|
||||
console.log(link.href);
|
||||
```
|
||||
|
||||
所有元素节点都包含getElementsByTagName方法，用于从所有后代节点中（直接或间接孩子节点）搜索包含特定标签名的节点，并返回一个类似于数组的对象。
|
||||
所有元素节点都包含getElementsByTagName方法，用于从所有后代节点中（直接或间接子节点）搜索包含给定标签名的节点，并返回一个类数组的对象。
|
||||
|
||||
你也可以使用document.getElementById来寻找包含特定id属性的某个节点。
|
||||
|
||||
@ -112,7 +123,7 @@ console.log(link.href);
|
||||
<p><img id="gertrude" src="img/ostrich.png"></p>
|
||||
|
||||
<script>
|
||||
var ostrich = document.getElementById("gertrude");
|
||||
let ostrich = document.getElementById("gertrude");
|
||||
console.log(ostrich.src);
|
||||
</script>
|
||||
```
|
||||
@ -121,7 +132,7 @@ console.log(link.href);
|
||||
|
||||
### 13.6 修改文档
|
||||
|
||||
几乎所有DOM数据结构中的元素都可以被修改。元素节点提供了一系列用于修改其内容的方法。removeChild方法用于从文档中移除特定节点。appendChild方法可以添加孩子节点，并将其放置在孩子节点列表末尾，而insertBefore则将第一个参数表示的节点插入到第二个参数表示的节点前面。
|
||||
几乎所有DOM数据结构中的元素都可以被修改。文档树的形状可以通过改变父子关系来修改。 节点的`remove`方法将它们从当前父节点中移除。appendChild方法可以添加子节点，并将其放置在子节点列表末尾，而insertBefore则将第一个参数表示的节点插入到第二个参数表示的节点前面。
|
||||
|
||||
```html
|
||||
<p>One</p>
|
||||
@ -129,20 +140,20 @@ console.log(link.href);
|
||||
<p>Three</p>
|
||||
|
||||
<script>
|
||||
var paragraphs = document.body.getElementsByTagName("p");
|
||||
let paragraphs = document.body.getElementsByTagName("p");
|
||||
document.body.insertBefore(paragraphs[2], paragraphs[0]);
|
||||
</script>
|
||||
```
|
||||
|
||||
每个节点只能存在于文档中的某一个位置。因此，如果将段落Three插入到段落One前，会将该节点从文档末尾移除并插入到文档前面，最后结果为“Three/One/Two”。所有将节点插入到某处的方法都有这种副作用——会将其从当前位置移除（如果存在的话）。
|
||||
|
||||
replaceChild方法用于将一个孩子节点替换为另一个孩子节点。该方法接受两个参数，第一个参数是新节点，第二个参数是待替换的节点。待替换的节点必须是该方法调用者的孩子节点。这里需要注意，replaceChild和insertBefore都将新节点作为第一个参数。
|
||||
replaceChild方法用于将一个子节点替换为另一个子节点。该方法接受两个参数，第一个参数是新节点，第二个参数是待替换的节点。待替换的节点必须是该方法调用者的子节点。这里需要注意，replaceChild和insertBefore都将新节点作为第一个参数。
|
||||
|
||||
### 13.7 创建节点
|
||||
|
||||
在下面的示例中，我们想要编写一个脚本，将文档中所有的图像（<img>标签）替换成包含其alt属性（用于以文本形式展示图片）的文本。
|
||||
假设我们要编写一个脚本，将文档中的所有图像（`<img>`标签）替换为其`alt`属性中的文本，该文本指定了图像的文字替代表示。
|
||||
|
||||
这不仅牵涉到删除图像，还涉及添加新的文本节点，并替换原有图像节点。为此我们使用document.createTextNode方法。
|
||||
这不仅涉及删除图像，还涉及添加新的文本节点，并替换原有图像节点。为此我们使用document.createTextNode方法。
|
||||
|
||||
```html
|
||||
<p>The <img src="img/cat.png" alt="Cat"> in the
|
||||
@ -152,11 +163,12 @@ replaceChild方法用于将一个孩子节点替换为另一个孩子节点。
|
||||
|
||||
<script>
|
||||
function replaceImages() {
|
||||
var images = document.body.getElementsByTagName("img");
|
||||
for (var i = images.length - 1; i >= 0; i--) {
|
||||
let images = document.body.getElementsByTagName("img");
|
||||
for (let i = images.length - 1; i >= 0; i--) {
|
||||
let image = images[i];
|
||||
var image = images[i];
|
||||
if (image.alt) {
|
||||
var text = document.createTextNode(image.alt);
|
||||
let text = document.createTextNode(image.alt);
|
||||
image.parentNode.replaceChild(text, image);
|
||||
}
|
||||
}
|
||||
@ -164,23 +176,22 @@ replaceChild方法用于将一个孩子节点替换为另一个孩子节点。
|
||||
</script>
|
||||
```
|
||||
|
||||
使用字符串调用createTextNode，会得到一个类型为3的DOM节点（文本节点），我们可以将其插入到文档中，展示在屏幕上。
|
||||
给定一个字符串，`createTextNode`为我们提供了一个文本节点，我们可以将它插入到文档中，来使其显示在屏幕上。
|
||||
|
||||
该循环从节点列表末尾开始遍历图像。我们必须这样反向遍历列表，因为getElementsByTagName之类的方法返回的节点列表是动态变化的。该列表会随着文档改变还改变。若我们从列表头开始遍历，移除掉第一个图像会导致列表丢失其第一个元素，第二次循环时，因为集合的长度此时为1，而i也为1，所以循环会停止。
|
||||
该循环从列表末尾开始遍历图像。我们必须这样反向遍历列表，因为getElementsByTagName之类的方法返回的节点列表是动态变化的。该列表会随着文档改变还改变。若我们从列表头开始遍历，移除掉第一个图像会导致列表丢失其第一个元素，第二次循环时，因为集合的长度此时为1，而i也为1，所以循环会停止。
|
||||
|
||||
如果你想要获得一个稳定不变的节点集合，可以使用数组的slice方法将其转换成实际数组。
|
||||
如果你想要获得一个固定的节点集合，可以使用数组的`Array.from`方法将其转换成实际数组。
|
||||
|
||||
```html
|
||||
var arrayish = {0: "one", 1: "two", length: 2};
|
||||
var real = Array.prototype.slice.call(arrayish, 0);
|
||||
real.forEach(function(elt) { console.log(elt); });
|
||||
// → one
|
||||
// two
|
||||
let arrayish = {0: "one", 1: "two", length: 2};
|
||||
let array = Array.from(arrayish);
|
||||
console.log(array.map(s => s.toUpperCase()));
|
||||
// → ["ONE", "TWO"]
|
||||
```
|
||||
|
||||
你可以使用document.createElement方法创建一个正规元素节点（类型为1）。该方法接受一个标签名，返回一个新的空节点，节点类型由标签名指定。
|
||||
你可以使用document.createElement方法创建一个元素节点。该方法接受一个标签名，返回一个新的空节点，节点类型由标签名指定。
|
||||
|
||||
下面的示例定义了一个elt工具，用于创建一个新的元素节点，并将其剩余参数当作该节点的孩子节点。接着使用该函数为引用添加简单的来源信息。
|
||||
下面的示例定义了一个elt工具，用于创建一个新的元素节点，并将其剩余参数当作该节点的子节点。接着使用该函数为引用添加来源信息。
|
||||
|
||||
|
||||
```html
|
||||
@ -191,13 +202,11 @@ real.forEach(function(elt) { console.log(elt); });
|
||||
</blockquote>
|
||||
|
||||
<script>
|
||||
function elt(type) {
|
||||
var node = document.createElement(type);
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var child = arguments[i];
|
||||
if (typeof child == "string")
|
||||
child = document.createTextNode(child);
|
||||
node.appendChild(child);
|
||||
function elt(type, ...children) {
|
||||
let node = document.createElement(type);
|
||||
for (let child of children) {
|
||||
if (typeof child != "string") node.appendChild(child);
|
||||
else node.appendChild(document.createTextNode(child));
|
||||
}
|
||||
return node;
|
||||
}
|
||||
@ -213,90 +222,39 @@ real.forEach(function(elt) { console.log(elt); });
|
||||
|
||||
### 13.8 属性
|
||||
|
||||
我们可以通过元素的DOM对象的同名属性去访问元素的某些属性，比如链接的href属性。但只有常用的标准属性中很少的一部分是这样的。
|
||||
我们可以通过元素的DOM对象的同名属性去访问元素的某些属性，比如链接的href属性。这仅限于最常用的标准属性。
|
||||
|
||||
HTML允许你在节点上设定任何属性。这一特性非常有用，因为这样你就可以在文档中存储额外信息。你自己创建的属性不会出现在元素节点的属性中。你需要使用getAttribute和setAttribute方法来访问这些属性。
|
||||
HTML允许你在节点上设定任何属性。这一特性非常有用，因为这样你就可以在文档中存储额外信息。你自己创建的属性不会出现在元素节点的属性中。你必须使用getAttribute和setAttribute方法来访问这些属性。
|
||||
|
||||
```html
|
||||
<p data-classified="secret">The launch code is 00000000.</p>
|
||||
<p data-classified="unclassified">I have two feet.</p>
|
||||
|
||||
<script>
|
||||
var paras = document.body.getElementsByTagName("p");
|
||||
Array.prototype.forEach.call(paras, function(para) {
|
||||
if (para.getAttribute("data-classified") == "secret")
|
||||
para.parentNode.removeChild(para);
|
||||
});
|
||||
let paras = document.body.getElementsByTagName("p");
|
||||
for (let para of Array.from(paras)) {
|
||||
if (para.getAttribute("data-classified") == "secret") {
|
||||
para.remove();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
我建议在自己创建的属性前加上诸如data-之类的前缀，确保这些属性和其他属性不会冲突。
|
||||
|
||||
我们看一个简单的例子，我们编写一个“语法高亮器”，搜索带有data-language属性的<pre>标签（“预格式化”，用于代码和类似的普通文本），并尝试加亮语言中的关键字。
|
||||
|
||||
```html
|
||||
function highlightCode(node, keywords) {
|
||||
var text = node.textContent;
|
||||
node.textContent = ""; // Clear the node
|
||||
|
||||
var match, pos = 0;
|
||||
while (match = keywords.exec(text)) {
|
||||
var before = text.slice(pos, match.index);
|
||||
node.appendChild(document.createTextNode(before));
|
||||
var strong = document.createElement("strong");
|
||||
strong.appendChild(document.createTextNode(match[0]));
|
||||
node.appendChild(strong);
|
||||
pos = keywords.lastIndex;
|
||||
}
|
||||
var after = text.slice(pos);
|
||||
node.appendChild(document.createTextNode(after));
|
||||
}
|
||||
```
|
||||
|
||||
函数highlightCode接受<pre>节点和一个正则表达式（启用全局选项），用于匹配元素包含的程序设计语言中的关键字。
|
||||
|
||||
我们使用属性textContent从节点中获取所有文本，然后将其设置为空字符串，以清空节点。我们不断循环找出文本中的关键字，并为两个关键字之间的文本创建单独的文本节点，而将匹配的文本（即关键字）包裹在<strong>（粗体）元素内。
|
||||
|
||||
我们可以通过循环遍历所有带有data-language属性的<pre>元素，并使用特定语言正确的正则表达式逐个调用highlightCode。
|
||||
|
||||
```html
|
||||
var languages = {
|
||||
javascript: /\b(function|return|var)\b/g /* … etc */
|
||||
};
|
||||
|
||||
function highlightAllCode() {
|
||||
var pres = document.body.getElementsByTagName("pre");
|
||||
for (var i = 0; i < pres.length; i++) {
|
||||
var pre = pres[i];
|
||||
var lang = pre.getAttribute("data-language");
|
||||
if (languages.hasOwnProperty(lang))
|
||||
highlightCode(pre, languages[lang]);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
以下是示例代码。
|
||||
|
||||
```html
|
||||
<p>Here it is, the identity function:</p>
|
||||
<pre data-language="javascript">
|
||||
function id(x) { return x; }
|
||||
</pre>
|
||||
|
||||
<script>highlightAllCode();</script>
|
||||
```
|
||||
建议为这些组合属性的名称添加`data-`前缀，来确保它们不与任何其他属性发生冲突。
|
||||
|
||||
这里有一个常用的属性：class。该属性是JavaScript中的保留字。因为某些历史原因（某些旧版本的JavaScript实现无法处理和关键字或保留字同名的属性），访问class的属性名为className。你也可以使用getAttribute和setAttribute方法，使用其实际名称“class”来访问该属性。
|
||||
|
||||
### 13.9 布局
|
||||
|
||||
你可能已经注意到不同类型的元素有不同的布局。某些元素，比如段落（<p>）和标题（<h1>）会占据整个文档的宽度，并且在独立的一行中渲染。这些元素被称为块（Block）元素。其他的元素，比如链接（<a>或前面示例中提到的<strong>元素则与周围文本在同一行中渲染。这类元素我们称之为内联（Inline）元素。
|
||||
你可能已经注意到不同类型的元素有不同的布局。某些元素，比如段落（<p>）和标题（<h1>）会占据整个文档的宽度，并且在独立的一行中渲染。这些元素被称为块（Block）元素。其他的元素，比如链接（<a>或<strong>元素则与周围文本在同一行中渲染。这类元素我们称之为内联（Inline）元素。
|
||||
|
||||
对于任意特定文档，浏览器可以根据每个元素的类型和内容计算其尺寸与位置等布局信息。接着使用布局来绘制文档。
|
||||
|
||||
JavaScript中可以访问元素的尺寸与位置。
|
||||
|
||||
属性offsetWidth和offsetHeight给出元素的起始位置（单位是像素）。像素是浏览器中的基本测量单元，一般对应于屏幕上可以显示的最小点。类似的，clientWidth和clientHeight则告知元素内部占据的空间尺寸（忽略边界宽度）。
|
||||
属性offsetWidth和offsetHeight给出元素的起始位置（单位是像素）。像素是浏览器中的基本测量单元。它通常对应于屏幕可以绘制的最小的点，但是在现代显示器上，可以绘制非常小的点，这可能不再适用了，并且浏览器像素可能跨越多个显示点。
|
||||
|
||||
同样，`clientWidth`和`clientHeight`向你提供元素内的空间大小，忽略边框宽度。
|
||||
|
||||
```html
|
||||
<p style="border: 3px solid red">
|
||||
@ -304,17 +262,17 @@ JavaScript中可以访问元素的尺寸与位置。
|
||||
</p>
|
||||
|
||||
<script>
|
||||
var para = document.body.getElementsByTagName("p")[0];
|
||||
let para = document.body.getElementsByTagName("p")[0];
|
||||
console.log("clientHeight:", para.clientHeight);
|
||||
console.log("offsetHeight:", para.offsetHeight);
|
||||
</script>
|
||||
```
|
||||
|
||||
getBoundingClientRect方法是获取屏幕中某个元素精确位置的最有效方法。该方法返回一个对象，包含top、bottom、left和right四个属性，表示元素相对于屏幕左上角的位置（单位是像素）。若你想要知道其相对于整个文档的位置，必须加上其滚动位置，可以通过全局变量pageXOffset和pageYOffset获取。
|
||||
getBoundingClientRect方法是获取屏幕中某个元素精确位置的最有效方法。该方法返回一个对象，包含top、bottom、left和right四个属性，表示元素相对于屏幕左上角的位置（单位是像素）。若你想要知道其相对于整个文档的位置，必须加上其滚动位置，你可以在pageXOffset和pageYOffset绑定中找到。
|
||||
|
||||
我们还需要花些力气才能完成文档的排版工作。为了加快速度，浏览器引擎不会每次立即重新绘制整个文档，而是尽可能等待并推迟重绘操作。当一个修改文档的JavaScript程序结束时，浏览器会计算新的布局，并在屏幕上显示修改过的文档。若程序通过读取offsetHeight和getBoundingClientRect这类属性获取某些元素的位置或尺寸时，为了提供正确的信息，浏览器也需要计算布局。
|
||||
我们还需要花些力气才能完成文档的排版工作。为了加快速度，每次你改变它时，浏览器引擎不会立即重新绘制整个文档，而是尽可能等待并推迟重绘操作。当一个修改文档的JavaScript程序结束时，浏览器会计算新的布局，并在屏幕上显示修改过的文档。若程序通过读取offsetHeight和getBoundingClientRect这类属性获取某些元素的位置或尺寸时，为了提供正确的信息，浏览器也需要计算布局。
|
||||
|
||||
如果程序反复读取DOM布局信息或修改DOM，会引发大量布局计算，导致运行非常缓慢。下面的代码展示了一个示例。该示例包含两个不同的程序，使用X字符构建一条线，其长度是2000像素，并计算每个任务的时间。
|
||||
如果程序反复读取DOM布局信息或修改DOM，会强制引发大量布局计算，导致运行非常缓慢。下面的代码展示了一个示例。该示例包含两个不同的程序，使用X字符构建一条线，其长度是2000像素，并计算每个任务的时间。
|
||||
|
||||
```html
|
||||
<p><span id="one"></span></p>
|
||||
@ -322,24 +280,24 @@ getBoundingClientRect方法是获取屏幕中某个元素精确位置的最有
|
||||
|
||||
<script>
|
||||
function time(name, action) {
|
||||
var start = Date.now(); // Current time in milliseconds
|
||||
let start = Date.now(); // Current time in milliseconds
|
||||
action();
|
||||
console.log(name, "took", Date.now() - start, "ms");
|
||||
}
|
||||
|
||||
time("naive", function() {
|
||||
var target = document.getElementById("one");
|
||||
while (target.offsetWidth < 2000)
|
||||
time("naive", () => {
|
||||
let target = document.getElementById("one");
|
||||
while (target.offsetWidth < 2000) {
|
||||
target.appendChild(document.createTextNode("X"));
|
||||
}
|
||||
});
|
||||
// → naive took 32 ms
|
||||
|
||||
time("clever", function() {
|
||||
var target = document.getElementById("two");
|
||||
let target = document.getElementById("two");
|
||||
target.appendChild(document.createTextNode("XXXXX"));
|
||||
var total = Math.ceil(2000 / (target.offsetWidth / 5));
|
||||
for (var i = 5; i < total; i++)
|
||||
target.appendChild(document.createTextNode("X"));
|
||||
let total = Math.ceil(2000 / (target.offsetWidth / 5));
|
||||
target.firstChild.nodeValue = "X".repeat(total);
|
||||
});
|
||||
// → clever took 1 ms
|
||||
</script>
|
||||
@ -490,7 +448,7 @@ position样式属性是一种强大的布局方法。默认情况下，该属性
|
||||
|
||||
若我们只是在循环中更新DOM，页面会静止不动，页面上也不会显示任何东西。浏览器不会在执行JavaScript程序时刷新显示内容，也不允许页面上的任何交互。这就是我们需要requestAnimationFrame的原因，该函数用于告知浏览器JavaScript程序目前已经完成工作，因此浏览器可以继续执行其他任务，比如刷新屏幕，响应用户动作。
|
||||
|
||||
我们将动画生成函数作为参数传递给requestAnimationFrame。该函数比较现在的时间和上一次时间（lastTime变量），确保每一毫秒猫的移动是稳定的，而且动画是圆滑的。如果仅仅每次走几步，猫的动作可能略显迟钝，例如，另一个在相同电脑上的繁重任务可能使得该函数零点几秒之后才会运行一次。
|
||||
我们将动画生成函数作为参数传递给requestAnimationFrame。该函数比较现在的时间和上一次时间（lastTime绑定），确保每一毫秒猫的移动是稳定的，而且动画是圆滑的。如果仅仅每次走几步，猫的动作可能略显迟钝，例如，另一个在相同电脑上的繁重任务可能使得该函数零点几秒之后才会运行一次。
|
||||
|
||||
我们使用三角函数Math.cos和Math.sin来使猫沿着圆弧移动。你可能不太熟悉这些计算，这些计算是本书第一次提及，因此我在这里对这几个计算进行一个大致的介绍。
|
||||
|
||||
@ -498,7 +456,7 @@ Math.cos和Math.sin非常实用，我们可以利用一个1单元的弧度，计
|
||||
|
||||
|
||||
|
||||
猫的动画代码保存了一个名为angle的计数器，该变量记录猫在圆上的角度，而且每当调用animate函数时，该计数器的值与流逝的时间成比例递增。我们接着使用这个角度来计算图像元素的当前位置。top样式是Math.sin的结果乘以20，表示圆中的垂直弧度。left样式是Math.cos的结果与200的乘积，因此圆的宽度大于其高度，导致最后猫会沿着椭圆轨迹移动。
|
||||
猫的动画代码保存了一个名为angle的计数器，该绑定记录猫在圆上的角度，而且每当调用animate函数时，该计数器的值与流逝的时间成比例递增。我们接着使用这个角度来计算图像元素的当前位置。top样式是Math.sin的结果乘以20，表示圆中的垂直弧度。left样式是Math.cos的结果与200的乘积，因此圆的宽度大于其高度，导致最后猫会沿着椭圆轨迹移动。
|
||||
|
||||
这里需要注意的是样式的值一般需要指定单位。本例中，我们在数字后添加“px”来告知浏览器以像素为计算单位（而非厘米，“ems”，或其他单位）。我们很容易遗漏这个单位。如果我们没有为样式中的数字加上单位，浏览器最后会忽略掉该样式，除非数字是0，在这种情况下使用什么单位，其结果都是一样的。
|
||||
|
||||
@ -533,7 +491,7 @@ DOM的组织就像树一样，DOM根据文档结构来层次化地排布元素
|
||||
|
||||
<table>标签中，每一行包含一个<tr>标签。<tr>标签内部则是单元格元素，分为表头（<th>）和常规单元格（<td>）。
|
||||
|
||||
我们这里使用第6章中已经使用过的源数据，源数据存储在沙箱的MOUNTAINS变量中。你也可以从网站上下载（[http://eloquentjavascript.net/code/](http://eloquentjavascript.net/code/)）数据。
|
||||
我们这里使用第6章中已经使用过的源数据，源数据存储在沙箱的MOUNTAINS绑定中。你也可以从网站上下载（[http://eloquentjavascript.net/code/](http://eloquentjavascript.net/code/)）数据。
|
||||
|
||||
编写一个函数buildTable，调用者指定一个对象数组，数组中每个对象都包含相同的一组属性，该函数根据数组构建出表示表格的DOM结构。表格应该以属性名称作为表头，表头使用<th>元素包围，每一行代表数组中的一个对象，其属性值存放在<td>元素中。
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user