摘要：作为运行在浏览器中的脚本语言，它对于网页操作非常有用。在技术圈中，我们将这些指令称为操作。结论文档对象模型是浏览器创建并保留在内存中的网页的虚拟副本。资源如果你想了解更多关于文档对象模型的内容，那么还有另一篇好文章。
翻译：疯狂的技术宅
原文：https://www.valentinog.com/bl...
JavaScript 并没有那么糟糕。作为运行在浏览器中的脚本语言，它对于网页操作非常有用。在本文中，我们将看到可以用哪些手段来修改 HTML 文档和交互。
什么是文档对象模型？文档对象模型是在浏览器中一切的基础。但它究竟是什么呢？
当我们访问网页时，浏览器会计算出如何解释每个 HTML 元素。这样它就可以创建 HTML 文档的虚拟表示，并保存在内存中。 HTML 页面被转换为树状结构并且每个 HTML 元素都变成一个叶子结点，连接到父分支。看一下这个简单的 HTML 页面：
A super simple title!
A super simple web page!
在这个结构的顶部有一个文档，也称为根元素，它包含另一个元素：html。 html 元素包含一个 head ，而 head 内又有一个 title。然后 body 中包含一个 h1。每个 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.querySelector("h1").__proto__
// Output: HTMLHeadingElement
而 HTMLHeadingElement 又是 HTMLElement 的“后代”：
document.querySelector("h1").__proto__.__proto__
// Output: HTMLElement
这时（特别是初学者）可能会对 document 和 window 之间的区别产生一些混淆。让我们看看它们有什么不同！
window和document之间的区别window 是指浏览器，而 document 是你当前正在操作的 HTML 页面，即当前文档。文档界面有许多实用功能，比如 querySelector()，一种用于选择给定页面内任何 HTML 元素的方法：
document.querySelector("h1");
window 表示当前窗口的浏览器，以下代码效果与上述相同：
window.document.querySelector("h1");
无论如何，以下语法更常见，你还会看到更多：
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 生成表格 一文！在没有任何前端框架的帮助的情况下，你会发现实现它都需要什么。
本文首发微信公众号：前端先锋 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章 欢迎继续阅读本专栏其它高赞文章：12个令人惊叹的CSS实验项目
必须要会的 50 个React 面试题
世界顶级公司的前端面试都问些什么
11 个最好的 JavaScript 动态效果库
CSS Flexbox 可视化手册
从设计者的角度看 React
过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！
CSS粘性定位是怎样工作的
一步步教你用HTML5 SVG实现动画效果
程序员30岁前月薪达不到30K，该何去何从
14个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩展插件
Node.js 多线程完全指南
把HTML转成PDF的4个方案及实现
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104026.html
摘要：中主要关注的就是，对象的主要功能就是处理网页内容。中文翻译模型，如果你把这个词从中抽离出来，看下面的图片是不是就很好理解。年月制定的标准，由两大部分组成核心和。扩展鼠标和用户界面事件范围遍历，增加了对支持。 往期回顾 在上一期的《JavaScript的组成 | 核心-ECMAScript 》☜里，我们有说到JavaScript 是由三大部分组成，分别是：核心ECMAScript、文档对...
摘要：发布后不久，微软就在其中加入了名为的实现命名为是为了避开与有关的授权问题。以现在的眼光来看，微软年月为进入浏览器领域而实施的这个重大举措，是导致日后蒙羞的一个标志性时间。微软推出其实现意味着有了两个不同的版本中的中的。 JavaScript简介 前言：最近在细读Javascript高级程序设计，对于我而言，中文版，书中很多地方一笔带过，所以用自己所理解的，尝试细致解读下。如有纰漏或错...
摘要：浏览器只是实现的宿主环境之一，其他宿主环境包括和。年月，版发布，成为国际标准。事件定义了事件和事件处理的接口。对于已经正式纳入标准的来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。 JavaScript 是面向 Web 的编程语言，绝大多数现代网站都使用了 JavaScript，并且所有的现代 Web 浏览器（电脑，手机，平板）均包含了 JavaScri...
摘要：由于计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的，级一般指的是最初支持的。 这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写，全程是 European Computer Manufacturers Ass...
摘要：诞生于年，它的主要目的是处理以前由服务器端语言负责的一些输入验证操作。的不同版本又称为版次，以第版表示。目前最新的是简称文档对象模型文档对象模型，是针对但经过拓展用于的应用程序接口，。元素当浏览器不支持或被禁用时，显示里面的内容。 JavaScript诞生于1995年，它的主要目的是处理以前由服务器端语言负责的一些输入验证操作。 完整的JavaScript实现由下列三个不同的部分组成：...
阅读 866·2021-09-29 09:35
阅读 1229·2021-09-28 09:36
阅读 1494·2021-09-24 10:38
阅读 1039·2021-09-10 11:18
阅读 613·2019-08-30 15:54
阅读 2483·2019-08-30 13:22
阅读 1939·2019-08-30 11:14
阅读 674·2019-08-29 12:35
