浏览器中的JavaScript：文档对象模型与 DOM 操做

时间 2019-12-05

原文原文链接

翻译：疯狂的技术宅
原文： https://www.valentinog.com/bl...

JavaScript 并无那么糟糕。做为运行在浏览器中的脚本语言，它对于网页操做很是有用。在本文中，咱们将看到能够用哪些手段来修改 HTML 文档和交互。javascript

什么是文档对象模型？

文档对象模型是在浏览器中一切的基础。但它到底是什么呢？html

当咱们访问网页时，浏览器会计算出如何解释每一个 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 元素包含一个 head ，而 head 内又有一个 title。而后 body 中包含一个 h1。每一个 HTML 元素都由特定类型（也称为接口）表示，而且能够包含文本或其余嵌套元素：java

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：node

document.querySelector('h1').__proto__
// Output: HTMLHeadingElement

而 HTMLHeadingElement 又是 HTMLElement 的“后代”：jquery

document.querySelector('h1').__proto__.__proto__
// Output: HTMLElement

这时（特别是初学者）可能会对 document 和 window 之间的区别产生一些混淆。让咱们看看它们有什么不一样！程序员

window和document之间的区别

window 是指浏览器，而 document 是你当前正在操做的 HTML 页面，即当前文档。文档界面有许多实用功能，好比 querySelector()，一种用于选择给定页面内任何 HTML 元素的方法：web

document.querySelector('h1');

window 表示当前窗口的浏览器，如下代码效果与上述相同：面试

window.document.querySelector('h1');

不管如何，如下语法更常见，你还会看到更多：segmentfault

document.methodName();

DOM 操做

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

document.querySelector('h1').nodeType;

上面的代码会返回 1，它是 Element 类型的节点的标识符。你还能够检查节点名称：

document.querySelector('h1').nodeName;
"H1"

上面的例子用大写的形式返回节点名称。须要理解的也是最重要的概念是，咱们主要使用 DOM 中的两种类型的节点：

Element 类型的节点（HTML 元素）
Text 类型的节点（文本节点）

为了建立 Element 类型的新节点，本机 DOM API 为咱们提供了 createelement 方法，你一般会这样调用：

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

为了建立文本，咱们能够用 createTextNode：

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

经过在新的 HTML 元素中附加文本，能够将两个节点组合在一块儿。最后须要注意的是，咱们还能够将标题元素附加到根文档：

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

在浏览器中使用 JavaScript 时，你须要了解这三种方法。在技术圈中，咱们将这些指令称为 DOM 操做。

当以这种方式建立和操做元素时，咱们谈论的是“命令式” DOM操做。现代前端库正在经过支持“声明”方法来解决这个问题。咱们不是一步一步地去命令浏览器，而是声明咱们须要什么 HTML 元素，而库能够处理剩下的部分。

DOM 操做和 jQuery

此时你可能会想：“我能够只使用jQuery吗？为何要用 createElement？“ 我常常会被问到这些问题。

好吧，请注意 jQuery 正逐渐消失。 Bootstrap 5 将从依赖项中删除它，还有更多的库或框架正在删除它。这背后有一个十分正当的理由：原生 DOM API 已经很是完整且成熟到足以使 jQuery 过期。

若是你想坚持用原生 JavaScript 实现简单的交互和操做。甚至能够建立本身的迷你框架来抽象出最多见的操做：建立元素、追加、建立文本等。

结论

文档对象模型是浏览器建立并保留在内存中的网页的虚拟副本。在建立、修改、删除 HTML 元素时，咱们会碰到 “DOM 操做”。在过去即便对于更简单的任务，咱们也要依赖于 jQuery，但今天本机 API 已经互相兼容而且足够成熟以使 jQuery 过期。

虽然 jQuery 不会很快的消失，但每一个 JavaScript 程序员都必须知道该如何使用本机 API 去操做 DOM。这样作有不少理由，其余库会增长 JavaScript 程序的加载时间和大小，更不用说 DOM 操做在技术面试中出现的愈来愈多。

DOM 中可用的每个HTML 元素都有一个暴露必定数量属性和方法的接口。若是对使用什么方法有疑问，能够参考 MDN上的优秀文档。

操做 DOM 最经常使用的方法是 document.createElement() 用于建立新的 HTML 元素，document.createTextNode() 用于在 DOM 内建立文本节点。须要注意的是 .appendChild() 用于将新的 HTML 元素或文本节点附加到现有元素。

虽然很好的了解本机 API 是很好的，可是现代前端库也提供了不容置疑的好处。尽管用“原生” JavaScript 去构建大型JavaScript 程序确实是可行的，但有时 Angular、React、Vue能够提供不少帮助。仅使用 JavaScript 来处理更简单的原型和中小型应用也是明智之举。

资源

若是你想了解更多关于文档对象模型的内容，那么 Aderinokun 还有另外一篇好文章。很是详细，值得一读：文档对象模型到底是什么？

若是你想回到基础知识，请查看如何使用原生 JavaScript 生成表格一文！在没有任何前端框架的帮助的状况下，你会发现实现它都须要什么。

浏览器中的JavaScript：文档对象模型与 DOM 操做

什么是文档对象模型？

window和document之间的区别

DOM 操做

DOM 操做和 jQuery

结论

资源

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：