Hello, I am Marijn and this is my home page.
I also wrote a book! Read it here.
``` 该页面结构如下所示。  浏览器使用与该形状对应的数据结构来表示文档。每个盒子都是一个对象，我们可以和这些对象交互，找出其中包含的盒子与文本。我们将这种表示方式称为文档对象模型（Document Object Model），或简称 DOM。 我们可以通过全局绑定`document`来访问这些对象。该对象的`documentElement`属性引用了``标签对象。由于每个 HTML 文档都有一个头部和一个主体，它还具有`head`和`body`属性，指向这些元素。 ## 树 回想一下第 12 章中提到的语法树。其结构与浏览器文档的结构极为相似。每个节点使用`children`引用其他节点，而每个子节点又有各自的`children`。其形状是一种典型的嵌套结构，每个元素可以包含与其自身相似的子元素。 如果一个数据结构有分支结构，而且没有任何环路（一个节点不能直接或间接包含自身），并且有一个单一、定义明确的“根节点”，那么我们将这种数据结构称之为树。就 DOM 来讲，`document.documentElement`就是其根节点。 在计算机科学中，树的应用极为广泛。除了表现诸如 HTML 文档或程序之类的递归结构，树还可以用于维持数据的有序集合，因为在树中寻找或插入一个节点往往比在数组中更高效。 一棵典型的树有不同类型的节点。Egg 语言的语法树有标识符、值和应用节点。应用节点常常包含子节点，而标识符、值则是叶子节点，也就是没有子节点的节点。 DOM中也是一样。元素（表示 HTML 标签）的节点用于确定文档结构。这些节点可以包含子节点。这类节点中的一个例子是`document.body`。其中一些子节点可以是叶子节点，比如文本片段或注释。 每个 DOM 节点对象都包含`nodeType`属性，该属性包含一个标识节点类型的代码（数字）。元素的值为 1，DOM 也将该值定义成一个常量属性`document.ELEMENT_NODE`。文本节点（表示文档中的一段文本）代码为 3（`document.TEXT_NODE`）。注释的代码为 8（`document.COMMENT_NODE`）。 因此我们可以使用另一种方法来表示文档树：  叶子节点是文本节点，而箭头则指出了节点之间的父子关系。 ## 标准 并非只有 JavaScript 会使用数字代码来表示节点类型。本章随后将会展示其他的 DOM 接口，你可能会觉得这些接口有些奇怪。这是因为 DOM 并不是为 JavaScript 而设计的，它尝试成为一组语言中立的接口，确保也可用于其他系统中，不只是 HTML，还有 XML。XML 是一种通用数据格式，语法与 HTML 相近。 这就比较糟糕了。一般情况下标准都是非常易于使用的。但在这里其优势（跨语言的一致性）并不明显。相较于为不同语言提供类似的接口，如果能够将接口与开发者使用的语言进行适当集成，可以为开发者节省大量时间。 我们举例来说明一下集成问题。比如 DOM 中每个元素都有`childNodes`属性。该属性是一个类数组对象，有`length`属性，也可以使用数字标签访问对应的子节点。但该属性是`NodeList`类型的实例，而不是真正的数组，因此该类型没有诸如`slice`和`map`之类的方法。 有些问题是由不好的设计导致的。例如，我们无法在创建新的节点的同时立即为其添加子节点和属性。相反，你首先需要创建节点，然后使用副作用，将子节点和属性逐个添加到节点中。大量使用 DOM 的代码通常较长、重复和丑陋。 但这些问题并非无法改善。因为 JavaScript 允许我们构建自己的抽象，可以设计改进方式来表达你正在执行的操作。 许多用于浏览器编程的库都附带这些工具。 ## 沿着树移动 DOM 节点包含了许多指向相邻节点的链接。下面的图表展示了这一点。  尽管图表中每种类型的节点只显示出一条链接，但每个节点都有`parentNode`属性，指向一个节点，它是这个节点的一部分。类似的，每个元素节点（节点类型为 1）均包含`childNodes`属性，该属性指向一个类数组对象，用于保存其子节点。 理论上，你可以通过父子之间的链接移动到树中的任何地方。但 JavaScript 也提供了一些更加方便的额外链接。`firstChild`属性和`lastChild`属性分别指向第一个子节点和最后一个子节点，若没有子节点则值为`null`。类似的，`previousSibling`和`nextSibling`指向相邻节点，分别指向拥有相同父亲的前一个节点和后一个节点。对于第一个子节点，`previousSibling`是`null`，而最后一个子节点的`nextSibling`则是`null`。 也存在`children`属性，它就像`childNodes`，但只包含元素（类型为 1）子节点，而不包含其他类型的子节点。 当你对文本节点不感兴趣时，这可能很有用。 处理像这样的嵌套数据结构时，递归函数通常很有用。 以下函数在文档中扫描包含给定字符串的文本节点，并在找到一个时返回`true`： ```html function talksAbout(node, string) { if (node.nodeType == document.ELEMENT_NODE) { 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; } } console.log(talksAbout(document.body, "book")); // → true ``` 因为`childNodes`不是真正的数组，所以我们不能用`for/of`来遍历它，并且必须使用普通的`for`循环遍历索引范围。 文本节点的`nodeValue`属性保存它所表示的文本字符串。 ## 查找元素 使用父节点、子节点和兄弟节点之间的连接遍历节点确实非常实用。但是如果我们只想查找文档中的特定节点，那么从`document.body`开始盲目沿着硬编码的链接路径查找节点并非良策。如果程序通过树结构定位节点，就需要依赖于文档的具体结构，而文档结构随后可能发生变化。另一个复杂的因素是 DOM 会为不同节点之间的空白字符创建对应的文本节点。例如示例文档中的`body`标签不止包含 3 个子节点（``元素），其实包含 7 个子节点：这三个节点、三个节点前后的空格、以及元素之间的空格。 因此，如果你想获取文档中某个链接的`href`属性，最好不要去获取文档`body`元素中第六个子节点的第二个子节点，而最好直接获取文档中的第一个链接，而且这样的操作确实可以实现。 ```html let link = document.body.getElementsByTagName("a")[0]; console.log(link.href); ``` 所有元素节点都包含`getElementsByTagName`方法，用于从所有后代节点中（直接或间接子节点）搜索包含给定标签名的节点，并返回一个类数组的对象。 你也可以使用`document.getElementById`来寻找包含特定`id`属性的某个节点。 ```html
My ostrich Gertrude:
One
Two
Three
``` 每个节点只能存在于文档中的某一个位置。因此，如果将段落`Three`插入到段落`One`前，会将该节点从文档末尾移除并插入到文档前面，最后结果为`Three/One/Two`。所有将节点插入到某处的方法都有这种副作用——会将其从当前位置移除（如果存在的话）。 `replaceChild`方法用于将一个子节点替换为另一个子节点。该方法接受两个参数，第一个参数是新节点，第二个参数是待替换的节点。待替换的节点必须是该方法调用者的子节点。这里需要注意，`replaceChild`和`insertBefore`都将新节点作为第一个参数。 ## 创建节点 假设我们要编写一个脚本，将文档中的所有图像（`The 
in the
.
No book can ever be finished. While working on it we learn just enough to find it immature the moment we turn away from it.``` ## 属性 我们可以通过元素的 DOM 对象的同名属性去访问元素的某些属性，比如链接的`href`属性。这仅限于最常用的标准属性。 HTML 允许你在节点上设定任何属性。这一特性非常有用，因为这样你就可以在文档中存储额外信息。你自己创建的属性不会出现在元素节点的属性中。你必须使用`getAttribute`和`setAttribute`方法来访问这些属性。 ```html
The launch code is 00000000.
I have two feet.
``` 建议为这些组合属性的名称添加`data-`前缀，来确保它们不与任何其他属性发生冲突。 这里有一个常用的属性：`class`。该属性是 JavaScript 中的保留字。因为某些历史原因（某些旧版本的 JavaScript 实现无法处理和关键字或保留字同名的属性），访问`class`的属性名为`className`。你也可以使用`getAttribute`和`setAttribute`方法，使用其实际名称`class`来访问该属性。 ## 布局 你可能已经注意到不同类型的元素有不同的布局。某些元素，比如段落（``）和标题（`
I'm boxed in
``` `getBoundingClientRect`方法是获取屏幕中某个元素精确位置的最有效方法。该方法返回一个对象，包含`top`、`bottom`、`left`和`right`四个属性，表示元素相对于屏幕左上角的位置（单位是像素）。若你想要知道其相对于整个文档的位置，必须加上其滚动位置，你可以在`pageXOffset`和`pageYOffset`绑定中找到。 我们还需要花些力气才能完成文档的排版工作。为了加快速度，每次你改变它时，浏览器引擎不会立即重新绘制整个文档，而是尽可能等待并推迟重绘操作。当一个修改文档的 JavaScript 程序结束时，浏览器会计算新的布局，并在屏幕上显示修改过的文档。若程序通过读取`offsetHeight`和`getBoundingClientRect`这类属性获取某些元素的位置或尺寸时，为了提供正确的信息，浏览器也需要计算布局。 如果程序反复读取 DOM 布局信息或修改 DOM，会强制引发大量布局计算，导致运行非常缓慢。下面的代码展示了一个示例。该示例包含两个不同的程序，使用`X`字符构建一条线，其长度是 2000 像素，并计算每个任务的时间。 ```html
``` ## 样式 我们看到了不同的 HTML 元素的绘制是不同的。一些元素显示为块，一些则是以内联方式显示。我们还可以添加一些样式，比如使用``加粗内容，或使用``使内容变成蓝色，并添加下划线。 `
Nice text
``` 一些样式属性名包含破折号，比如`font-family`。由于这些属性的命名不适合在 JavaScript 中使用（你必须写成`style["font-family"]`），因此在 JavaScript 中，样式对象中的属性名都移除了破折号，并将破折号之后的字母大写（`style.fontFamily`）。 ## 层叠样式 我们把 HTML 的样式化系统称为 CSS，即层叠样式表（Cascading Style Sheets）。样式表是一系列规则，指出如何为文档中元素添加样式。可以在`Now strong text is italic and gray.
``` 所谓层叠指的是将多条规则组合起来产生元素的最终样式。在示例中，``标签的默认样式`font-weight:bold`，会被`
```