浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript 并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改 HTML 文档和交互。

什么是文档对象模型?

文档对象模型是在浏览器中一切的基础。但它究竟是什么呢?

当我们访问网页时,浏览器会计算出如何解释每个 HTML 元素。这样它就可以创建 HTML 文档的虚拟表示,并保存在内存中。 HTML 页面被转换为树状结构并且每个 HTML 元素都变成一个叶子结点,连接到父分支。看一下这个简单的 HTML 页面:

<!DOCTYPE html>
<html>
  <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 元素都由特定类型(也称为接口)表示,并且可以包含文本或其他嵌套元素:

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();

window是一个全局对象,可以从浏览器中运行的任何JavaScript代码直接访问它。window公开了很多属性和方法,下面是一些:

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

由于这些属性和方法也是全局的,因此你可以像这样访问它们:

alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delay execution
fetch(someUrl); // make XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual user agent
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
  }
}

但是还有更多的方法,不可能涵盖这里的所有内容。要了解更多,请查看MDN文档

现在让我们来操作DOM!

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 生成表格 一文!在没有任何前端框架的帮助的情况下,你会发现实现它都需要什么。

原文地址:https://blog.logrocket.com/es-modules-in-node-js-12-from-experimental-to-release/

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  99人点赞

没有讨论,发表一下自己的看法吧

推荐文章
可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

可视化的JavaScript:作用域(链)

首先,来看看下面的代码:constname="Lydia" constage=21 constcity="SanFrancisco" functiongetPersonInfo(){ constn

可视化的JavaScript:事件循环

首先,事件循环是什么,为什么要理解它?JavaScript是单线程的:一次只能运行一个任务。通常这没什么大不了的,但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中,我们要等待30秒,然后才

Stack Overflow 上最火的一个问题:什么是 NullPointerException

在逛StackOverflow的时候,发现最火的问题竟然是:什么是NullPointerException(java.lang.NullPointerException),它是由什么原因导致的,有没有

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。让我们先从怎样删除数组中的重复项这个简单问题开始。复杂-使用forEach删除重复

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言JavaScript很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中

基础信息:什么是 MySQL?

MySQL是一个开源的深受欢迎的关系型数据库管理系统(简称RDBMS)。目前排名第二,仅次于Oracle数据库。 MySQL可以免费下载,但是,还提供了几个付费版本,这些版本提供了附加功能。 顾名思义

Kubernetes 基础信息:什么是 Kubernetes?

简介 Kubernetes(常简称为K8s,在希腊语意为“舵手”或“驾驶员”)是用于自动部署、扩展和管理容器化(containerized)应用程序的开源系统。 由JoeBeda、BrendanBur

Linux/Unix 基础:什么是 Linux?

简单来讲,Linux是一个操作系统(OS)。我们都很熟悉其他操作系统,就像Microsoftwindows,AppleMacOS,iOS,Googleandroid,等等这些,linux就像它们一样,

在浏览器中使用Vue.js裁剪图像

在本教程中,我们将探讨如何在浏览器中使用JavaScript库来操作图片,为服务器上的存储做准备,并在Web程序中使用。我们将使用Vue.js而不是原生JavaScript来完成此操作。要了本文想要完

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

如何在JavaScript中操作数组?

JavaScript中的数组是什么?在开始之前,你需要先了解数组的真正含义。在JavaScript中,数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中,供以后使用。声明一个数组:l

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

JavaScript基础之 DOM简介

JavascriptDOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中,我们将理解什么是DOM以及如何用Javascript去操作它。本文还可以作为基本DOM操作的参考。

JavaScript的DOM应用笔记

获取a标签:document.links获取img标签:document.images获取form标签:document.forms

JavaScript的DOM应用笔记

通过id获取:document.getElementById()写入HTML:innerHTML()内部outerHTML()外部

JavaScript的DOM应用笔记

操作元素属性:element.attribute=newvalueelement.setAttribute(attribute,value)element.getAttribute(attribute

JavaScript的DOM应用笔记

通过id或标签名获取元素对象:getElementById(‘id’)getElementsByTagName(‘标签名’)getElementsByName(‘name’)getElementByC

JavaScript的DOM应用笔记

这里的修改className属性,因为长度会动态改变,所以需要将修改的下标设为0,