【JS 口袋书】第 9 章：使用 JS 操作 HTML 元素

作者：valentinogagliardi
译者：前端小智
来源：github

阿里云最近在做活动，低至2折，真心觉得很划算了，可以点击本条内容或者链接进行参与：
https://promotion.aliyun.com/...

文档对象模型(DOM)

JS 有很多地方让咱们吐槽，但没那么糟糕。作为一种在浏览器中运行的脚本语言，它对于处理web页面非常有用。在本中，我们将看到我们有哪些方法来交互和修改HTML文档及其元素。但首先让我们来揭开文档对象模型的神秘面纱。

文档对象模型是一个基本概念，它是咱们在浏览器中所做的一切工作的基础。但那到底是什么? 当咱们访问一个 web 页面时，浏览器会指出如何解释每个 HTML 元素。这样它就创建了 HTML 文档的虚拟表示，并保存在内存中。HTML 页面被转换成树状结构，每个 HTML 元素都变成一个叶子，连接到父分支。考虑这个简单的HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A super simple title!</title>
</head>
<body>
<h1>A super simple web page!</h1>
</body>
</html

当浏览器扫描上面的 HTML 时，它创建了一个文档对象模型，它是HTML结构的镜像。在这个结构的顶部有一个 document 也称为根元素，它包含另一个元素:html。html 元素包含一个 head，head 又有一个 title。然后是含有 h1的 body。每个 HTML 元素由特定类型(也称为接口)表示，并且可能包含文本或其他嵌套元素

document (HTMLDocument)
  |
  | --> html (HTMLHtmlElement)
          |  
          | --> head (HtmlHeadElement)
          |       |
          |       | --> title (HtmlTitleElement)
          |                | --> text: "A super simple title!"
          |
          | --> body (HtmlBodyElement)
          |       |
          |       | --> h1 (HTMLHeadingElement)
          |              | --> text: "A super simple web page!"

每个 HTML 元素都是从 Element 派生而来的，但是它们中的很大一部分是进一步专门化的。咱们可以检查原型，以查明元素属于什么“种类”。例如，h1 元素是 HTMLHeadingElement

document.quertSelector('h1').__proto__
// 输出： HTMLHeadingElement

HTMLHeadingElement 又是 HTMLElement 的“后代”

document.querySelector('h1').__proto__.__proto__

// Output: HTMLElement

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。

在这一点上(特别是对于初学者)，document 和 window 之间可能有些混淆。window 指的是浏览器，而 document 指的是当前的 HTML 页面。window 是一个全局对象，可以从浏览器中运行的任何 JS 代码直接访问它。它不是 JS 的“原生”对象，而是由浏览器本身公开的。window 有很多属性和方法，如下所示：

window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delays execution
window.fetch(someUrl); // makes XHR requests
window.open(); // Opens a new tab
window.location; // Browser location
window.history; // Browser history
window.navigator; // The actual device
window.document; // The current page

由于这些属性是全局属性，因此也可以省略 window：

alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delays execution
fetch(someUrl); // makes XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual device
document; // The current page

你应该已经熟悉其中的一些方法，例如 setTimeout()或 window.navigator，它可以获取当前浏览器使用的语言：

if (window.navigator) {
  var lang = window.navigator.language;
  if (lang === "en-US") {
    // show something
  }

  if (lang === "it-IT") {
    // show something else
  }
}

要了解更多 window 上的方法，请查看MDN文档。在下一节中，咱们深入地研究一下 DOM。

节点、元素和DOM 操作

document 接口有许多实用的方法，比如 querySelector()，它是用于选择当前 HTML 页面内的任何 HTML 元素：

document.querySelector('h1');

window 表示当前窗口的浏览器，下面的指令与上面的相同：

window.document.querySelector('h1');

不管怎样，下面的语法更常见，在下一节中咱们将大量使用这种形式：

document.methodName();

除了 querySelector() 用于选择 HTML 元素之外，还有很多更有用的方法

// 返回单个元素
document.getElementById('testimonials'); 

// 返回一个 HTMLCollection
document.getElementsByTagName('p'); 

// 返回一个节点列表
document.querySelectorAll('p');

咱们不仅可以选择HTML 元素，还可以交互和修改它们的内部状态。例如，希望读取或更改给定元素的内部内容：

// Read or write
document.querySelector('h1').innerHtml; // Read
document.querySelector('h1').innerHtml = ''; // Write! Ouch!

DOM 中的每个 HTML 元素也是一个“节点”，实际上咱们可以像这样检查节点类型：

document.querySelector('h1').nodeType;

上述结果返回 1，表示是 Element 类型的节点的标识符。咱们还可以检查节点名：

document.querySelector('h1').nodeName;

"H1"

这里，节点名以大写形式返回。通常我们处理 DOM 中的四种类型的节点

document: 根节点(nodeType 9)
类型为Element的节点：实际的HTML标签（nodeType 1）,例如 <p> 和 <div>
类型属性的节点：每个HTML元素的属性（属性）
Text 类型的节点:元素的实际文本内容(nodeType 3)

由于元素是节点，节点可以有属性(properties )(也称为attributes)，咱们可以检查和操作这些属性：

// 返回 true 或者 false
document.querySelector('a').hasAttribute('href');

// 返回属性文本内容，或 null
document.querySelector('a').getAttribute('href');

// 设置给定的属性
document.querySelector('a').setAttribute('href', 'someLink');

前面我们说过 DOM 是一个类似于树的结构。这种特性也反映在 HTML 元素上。每个元素都可能有父元素和子元素，我们可以通过检查元素的某些属性来查看它们:

// 返回一个 HTMLCollection
document.children;

// 返回一个节点列表
document.childNodes;

// 返回一个节点
document.querySelector('a').parentNode;

// 返回HTML元素
document.querySelector('a').parentElement;

了解了如何选择和查询 HTML 元素。那创建元素又是怎么样?为了创建 Element 类型的新节点，原生 DOM API 提供了 createElement 方法：

var heading = document.createElement('h1');

使用 createTextNode 创建文本节点：

var text = document.createTextNode('Hello world');

通过将 text 附加到新的 HTML 元素中，可以将这两个节点组合在一起。最后，还可以将heading元素附加到根文档中:

var heading = document.createElement('h1');
var text = document.createTextNode('Hello world');
heading.appendChild(text);
document.body.appendChild(heading);

还可以使用 remove() 方法从 DOM 中删除节点。在元素上调用方法，该节点将从页面中消失：

document.querySelector('h1').remove();

这些是咱们开始在浏览器中使用 JS 操作 DOM 所需要知道的全部内容。在下一节中，咱们将灵活地使用 DOM，但首先要绕个弯，因为咱们还需要讨论“DOM事件”。

DOM 和事件

DOM 元素是很智能的。它们不仅可以包含文本和其他 HTML 元素，还可以“发出”和响应“事件”。浏览任何网站并打开浏览器控制台。使用以下命令选择一个元素：

document.querySelector('p')

看看这个属性

document.querySelector('p').onclick

它是什么类型:

typeof document.querySelector('p').onclick // "object"

"object"! 为什么它被称为“onclick”? 凭一点直觉我们可以想象它是元素上的某种神奇属性，能够对点击做出反应? 完全正确。

如果你感兴趣，可以查看任何 HTML 元素的原型链。会发现每个元素也是一个 Element，而元素又是一个节点，而节点又是一个EventTarget。可以使用 instanceof 来验证这一点。

document.querySelector('p') instanceof EventTarget // true

我很乐意称 EventTarget 为所有 HTML 元素之父，但在JS中没有真正的继承，它更像是任何 HTML 元素都可以看到另一个连接对象的属性。因此，任何 HTML 元素都具有与 EventTarget 相同的特性:发布事件的能力。

但事件到底是什么呢?以 HTML 按钮为例。如果你点击它，那就是一个事件。有了这个.onclick对象，咱们可以注册事件，只要元素被点击，它就会运行。传递给事件的函数称为“事件监听器”或“事件句柄”。

事件和监听

在 DOM 中注册事件监听器有三种方法。第一种形式比较陈旧，应该避免，因为它耦合了逻辑操作和标签

<!-- 不好的方式 -->
<button onclick="console.log('clicked')">喜欢，就点点我</button>

第二个选项依赖于以事件命名的对象。例如，咱们可以通过在对象.onclick上注册一个函数来监听click事件：

document.querySelector("button").onclick = handleClick;

function handleClick() {
  console.log("Clicked!");
}

此语法更加简洁，是内联处理程序的不错替代方案。还有另一种基于addEventListener的现代形式：

document.querySelector("button").addEventListener("click", handleClick);

function handleClick() {
  console.log("Clicked!");
}

就我个人而言，我更喜欢这种形式，但如果想争取最大限度的浏览器兼容性，请使用 .on 方式。现在咱们已经有了一个 HTML 元素和一个事件监听器，接着进一步研究一下 DOM 事件。

事件对象、事件默认值和事件冒泡

作为事件处理程序传递的每个函数默认接收一个名为“event”的对象

var button = document.querySelector("button");
button.addEventListener("click", handleClick);

function handleClick() {
  console.log(event);
}

它可以直接在函数体中使用，但是在我的代码中，我更喜欢将它显式地声明为参数：

function handleClick(event) {
  console.log(event);
}

事件对象是“必须要有的”，因为咱们可以通过调用事件上的一些方法来控制事件的行为。事件实际上有特定的特征，尤其是“默认”和“冒泡”。考虑一个HTML 链接。使用以下标签创建一个名为click-event.html的新HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Click event</title>
</head>
<body>
<div>
    <a href="/404.html">click me!</a>
</div>
</body>
<script src="click-event.js"></script>
</html>

在浏览器中运行该文件并尝试单击链接。它将跳转到一个404的界面。链接上单击事件的默认行为是转到href属性中指定的实际页面。但如果我告诉你有办法阻止默认值呢?输入preventDefault()，该方法可用于事件对象。使用以下代码创建一个名为click-event.js的新文件：

var button = document.querySelector("a");
button.addEventListener("click", handleClick);

function handleClick(event) {
  event.preventDefault();
}

在浏览器中刷新页面并尝试现在单击链接:它不会跳转了。因为咱们阻止了浏览器的“事件默认” 链接不是默认操作的惟一HTML 元素，表单具有相同的特性。

当 HTML 元素嵌套在另一个元素中时，还会出现另一个有趣的特性。考虑以下 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nested events</title>
</head>
<body>
<div id="outer">
    I am the outer div
    <div id="inner">
        I am the inner div
    </div>
</div>
</body>
<script src="nested-events.js"></script>
</html>

和下面的 JS 代码：

// nested-events.js

var outer = document.getElementById('inner');
var inner = document.getElementById('outer');

function handleClick(event){
    console.log(event);
}

inner.addEventListener('click', handleClick);
outer.addEventListener('click', handleClick);

有两个事件监听器，一个用于外部 div，一个用于内部 div。准确地点击内部div，你会看到：

两个事件对象被打印。这就是事件冒泡在起作用。它看起来像是浏览器行为中的一个 bug，使用 stopPropagation() 方法可以禁用，这也是在事件对象上调用的

//
function handleClick(event) {
  event.stopPropagation();
  console.log(event);
}
///

尽管看起来实现效果很差，但在注册过多事件监听器确实对性能不利的情况下，冒泡还是会让人眼前一亮。考虑以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event bubbling</title>
</head>
<body>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>
</body>
<script src="event-bubbling.js"></script>
</html>

如果要兼听列表的点击事件，需要在列表中注册多少事件监听器?答案是:一个。只需要一个在ul上注册的侦听器就可以截获任何li上的所有单击:

// event-bubbling.js

var ul = document.getElementsByTagName("ul")[0];

function handleClick(event) {
  console.log(event);
}

ul.addEventListener("click", handleClick);

可以看到，事件冒泡是提高性能的一种实用方法。实际上，对浏览器来说，注册事件监听器是一项昂贵的操作，而且在出现大量元素列表的情况下，可能会导致性能损失。

用 JS 生成表格

现在咱们开始编码。给定一个对象数组，希望动态生成一个HTML 表格。HTML 表格由 <table> 元素表示。每个表也可以有一个头部，由 <thead> 元素表示。头部可以有一个或多个行 <tr>，每个行都有一个单元格，由一个 <th>元 素表示。如下所示：

<table>
    <thead>
    <tr>
        <th>name</th>
        <th>height</th>
        <th>place</th>
    </tr>
    </thead>
    <!-- more stuff here! -->
</table>

不止这样，大多数情况下，每个表都有一个主体，由 <tbody> 定义，而 <tbody> 又包含一组行<tr>。每一行都可以有包含实际数据的单元格。表单元格由<td>定义。完整如下所示：

<table>
    <thead>
    <tr>
        <th>name</th>
        <th>height</th>
        <th>place</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Monte Falco</td>
        <td>1658</td>
        <td>Parco Foreste Casentinesi</td>
    </tr>
    <tr>
        <td>Monte Falterona</td>
        <td>1654</td>
        <td>Parco Foreste Casentinesi</td>
    </tr>
    </tbody>
</table>

现在的任务是从 JS 对象数组开始生成表格。首先，创建一个名为build-table.html的新文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build a table</title>
</head>
<body>
<table>
<!-- here goes our data! -->
</table>
</body>
<script src="build-table.js"></script>
</html>

在相同的文件夹中创建另一个名为build-table.js的文件，并使用以下数组开始：

"use strict";

var mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
  { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
  { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
  { name: "Monte Amiata", height: 1738, place: "Siena" }
];

考虑这个表格。首先，咱们需要一个 <thead>：

document.createElement('thead')

这没有错，但是仔细查看MDN的表格文档会发现一个有趣的细节。<table> 是一个 HTMLTableElement，它还包含有趣方法。其中最有用的是HTMLTableElement.createTHead()，它可以帮助创建咱们需要的 <thead>。

首先，编写一个生成 thead 标签的函数 generateTableHead

function generateTableHead(table) {
  var thead = table.createTHead();
}

该函数接受一个选择器并在给定的表上创建一个 <thead>:

function generateTableHead(table) {
  var thead = table.createTHead();
}

var table = document.querySelector("table");

generateTableHead(table);

在浏览器中打开 build-table.html:什么都没有.但是，如果打开浏览器控制台，可以看到一个新的 <thead> 附加到表。

接着填充 header 内容。首先要在里面创建一行。还有另一个方法可以提供帮助:HTMLTableElement.insertRow()。有了这个，咱们就可以扩展方法了：

function generateTableHead (table) {
  var thead = table,createThead();
  var row = thead.insertRow();
}

此时，我们可以生成我们的行。通过查看源数组，可以看到其中的任何对象都有咱们需要信息：

var mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
  { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
  { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
  { name: "Monte Amiata", height: 1738, place: "Siena" }
];

这意味着咱们可以将另一个参数传递给我们的函数:一个遍历以生成标题单元格的数组：

function generateTableHead(table, data) {
  var thead = table.createTHead();
  var row = thead.insertRow();
  for (var i = 0; i < data.length; i++) {
    var th = document.createElement("th");
    var text = document.createTextNode(data[i]);
    th.appendChild(text);
    row.appendChild(th);
  }
}

不幸的是，没有创建单元格的原生方法，因此求助于document.createElement("th")。同样值得注意的是，document.createTextNode(data[i])用于创建文本节点，appendChild()用于向每个标记添加新元素。

当以这种方式创建和操作元素时，我们称之为“命令式” DOM 操作。现代前端库通过支持“声明式”方法来解决这个问题。我们可以声明需要哪些 HTML 元素，而不是一步一步地命令浏览器，其余的由库处理。

回到我们的代码，可以像下面这样使用第一个函数

var table = document.querySelector("table");
var data = Object.keys(mountains[0]);
generateTableHead(table, data);

现在我们可以进一步生成实际表的数据。下一个函数将实现一个类似于generateTableHead的逻辑，但这一次咱们需要两个嵌套的for循环。在最内层的循环中，使用另一种原生方法来创建一系列td。方法是HTMLTableRowElement.insertCell()。在前面创建的文件中添加另一个名为generateTable的函数

function generateTable(table, data) {
  for (var i = 0; i < data.length; i++) {
    var row = table.insertRow();
    for (var key in data[i]) {
      var cell = row.insertCell();
      var text = document.createTextNode(data[i][key]);
      cell.appendChild(text);
    }
  }
}

调用上面的函数，将 HTML表和对象数组作为参数传递：

generateTable(table, mountains);

咱们深入研究一下 generateTable 的逻辑。参数 data 是一个与 mountains 相对应的数组。最外层的 for 循环遍历数组并为每个元素创建一行：

function generateTable(table, data) {
  for (var i = 0; i < data.length; i++) {
    var row = table.insertRow();
    // omitted for brevity
  }
}

最内层的循环遍历任何给定对象的每个键，并为每个对象创建一个包含键值的文本节点

function generateTable(table, data) {
  for (var i = 0; i < data.length; i++) {
    var row = table.insertRow();
    for (var key in data[i]) {
      // inner loop
      var cell = row.insertCell();
      var text = document.createTextNode(data[i][key]);
      cell.appendChild(text);
    }
  }
}

最终代码：

var mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
  { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
  { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
  { name: "Monte Amiata", height: 1738, place: "Siena" }
];

function generateTableHead(table, data) {
  var thead = table.createTHead();
  var row = thead.insertRow();
  for (var i = 0; i < data.length; i++) {
    var th = document.createElement("th");
    var text = document.createTextNode(data[i]);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTable(table, data) {
  for (var i = 0; i < data.length; i++) {
    var row = table.insertRow();
    for (var key in data[i]) {
      var cell = row.insertCell();
      var text = document.createTextNode(data[i][key]);
      cell.appendChild(text);
    }
  }
}

其中调用：

var table = document.querySelector("table");
var data = Object.keys(mountains[0]);
generateTable(table, mountains);
generateTableHead(table, data);

执行结果：

当然，咱们的方法还可以该进，下个章节将介绍。

总结

DOM 是 web 浏览器保存在内存中的 web 页面的虚拟副本。DOM 操作是指从 DOM 中创建、修改和删除 HTML 元素的操作。在过去，咱们常常依赖 jQuery 来完成更简单的任务，但现在原生 API 已经足够成熟，可以让 jQuery 过时了。另一方面，jQuery 不会很快消失，但是每个 JS 开发人员都必须知道如何使用原生 API 操作 DOM。

这样做的理由有很多，额外的库增加了加载时间和 JS 应用程序的大小。更不用说 DOM 操作在面试中经常出现。

DOM 中每个可用的 HTML 元素都有一个接口，该接口公开一定数量的属性和方法。当你对使用何种方法有疑问时，参考MDN文档。操作 DOM 最常用的方法是 document.createElement() 用于创建新的 HTML 元素，document.createTextNode() 用于在 DOM 中创建文本节点。最后但同样重要的是 .appendchild()，用于将新的 HTML 元素或文本节点附加到现有元素。

HTML 元素还能够发出事件，也称为DOM事件。值得注意的事件为“click”、“submit”、“drag”、“drop”等等。DOM 事件有一些特殊的行为，比如“默认”和冒泡。

JS 开发人员可以利用这些属性，特别是对于事件冒泡，这些属性对于加速 DOM 中的事件处理非常有用。虽然对原生 API 有很好的了解是件好事，但是现代前端库提供了不容置疑的好处。用 Angular、React 和 Vue 来构建一个大型的JS应用程序确实是可行的。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://github.com/valentinog...

交流

阿里云最近在做活动，低至2折，有兴趣可以看看：https://promotion.aliyun.com/...

干货系列文章汇总如下，觉得不错点个Star，欢迎加群互相学习。

https://github.com/qq44924588...

因为篇幅的限制，今天的分享只到这里。如果大家想了解更多的内容的话，可以去扫一扫每篇文章最下面的二维码，然后关注咱们的微信公众号，了解更多的资讯和有价值的内容。

每次整理文章，一般都到2点才睡觉，一周4次左右，挺苦的，还望支持，给点鼓励

【JS 口袋书】第 9 章：使用 JS 操作 HTML 元素

文档对象模型(DOM)

节点、元素和DOM 操作

DOM 和事件

事件和监听

事件对象、事件默认值和事件冒泡

用 JS 生成表格

总结

交流

王大冶

引用和评论

Next.js 15.1 发布：全面升级开发体验

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

在Java程序中监听mysql的binlog

【JS 口袋书】第 9 章：使用 JS 操作 HTML 元素

文档对象模型(DOM)

节点、元素 和DOM 操作

DOM 和事件

事件和监听

事件对象、事件默认值和事件冒泡

用 JS 生成表格

总结

交流

王大冶

引用和评论

Next.js 15.1 发布：全面升级开发体验

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

在Java程序中监听mysql的binlog

节点、元素和DOM 操作