Web前端开发技术

Appearance

文档对象模型 ​

元信息 ​

  • 目标：理解同一份 HTML 在磁盘/网络/内存中的不同形态，为何操纵它要走"节点树 + 标准接口"而非字符串匹配；能用 document 对象做节点查找与读写，分清 DOM 的接口与浏览器实现
  • 关键概念：DOM、DOM树、节点（Document/Element/Text/Attr）、NodeList、document对象、API接口与实现、HTML DOM API、CSSOM、服务端/客户端动态页面
  • 关联阶段：cp3
  • 常见误区：把 DOM 等同于"js 的一部分"（DOM 是独立标准，浏览器之外的语言也实现它）；用正则/字符串处理改文档（节点树接口才是标准做法）；分不清 Element 与 Text 节点；以为改了 html 源文件（改的是内存中的树）

HTML文档的不同形态 ​

  • 存储在磁盘上: 是一个文本文件,即源代码字符串,供后续编辑或传输
  • 在网络中传输: 是一个字符流,供各种路由机器进行接收和转发
  • 在浏览器的内存中: 被解析成树状结构，供后续处理
  • 从开发者的角度，如何使用js脚本去操纵和修改这个html字符串或树？

文档对象模型 ​

  • 将html文档视作一个字符串（字符集合），使用子串匹配或正则表达式等方式进行查找和替换。
    • 编程复杂，不同的实现可能有不同的处理模式。
  • 将html文档视作一个节点树（对象集合），同时提供一组标准化的操作接口，对节点进行增删改查。
    • 简化编程，不同的实现均遵循统一的接口协议，易于跨语言实现

文档对象模型 Document Object Model ，是针对 XML 文档的 的应用程序编程接口（API，Application Programming Interface）。浏览器运行环境提供了DOM的实现，允许开发者使用 JavaScript 脚本以读取、修改 HTML、XHTML 以及 XML 文档。

DOM 树 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

在线DOM树查看 图片渲染 3D渲染

更多工具:

节点遍历 ​

在javascript中，浏览器为程序员提供了一个document对象来代表dom树，可以通过调用该对象的各类方法来查找节点，获得一个节点element对象,调用这个节点对象的各个方法，可以读写该节点的内容，譬如：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

更多节点遍历方法 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

由上述例子，Dom API 提供了一组方法和属性，便于程序员处理网页文档

节点类型 ​

DOM API(如querySelector方法)通常会返回一个节点对象(node)，节点一般包含四种子类型：

  • Document : 代表整个节点树
  • Element : 元素结点，即标记
  • Text: 即内容，或叶子结点，相当于一个匿名的特殊标记
  • Attr: 即属性

此外，DOM API的集合类函数，如 document.querySelectorAll，还支持返回一个NodeList对象，代表一组节点的集合。

DOM的 接口 与 实现 ​

  • DOM 本身仅是一个关于XML文档对象的逻辑模型或接口，并不包含具体的代码实现
  • 各浏览器默认提供了 DOM 的实现和javascript接口绑定。但由于早期各浏览器对DOM 标准接口支持的程度各自不一，导致了严重的兼容性问题
  • 在浏览器之外同样可以提供DOM的实现，如各编程语言中的xml库。比如编写爬虫之类的工具时都需要调用这些库中提供的 DOM API。

详见 https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

HTML DOM API 与 HTML Document 对象 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
  • DOM 适用于各类XML文档，如 HTML、SVG、MS office xml、open office xml等文档类型
  • HTML DOM API 则是为便于处理 HTML 文档类型提供的扩展接口，它提供了 XML 文档（即核心 DOM API 接口或XML DOM）里没有的一些功能

XML是一种元标记语言（定义标记语言的标记语言），可以简单理解为是所有标记语语，如HTML、SVG、MathML、office xml的超集

CSS对象模型 CSSOM ​

CSS 对象模型是一组允许用 JavaScript 操纵 CSS 的 API。与 DOM 类似，但针对的是 CSS 而不是 HTML。它允许用户动态地读取和修改 CSS 样式。

CSS 的值使用无类型的 String 对象来表示

https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Object_Model

服务端动态页面 与 客户端动态页面 ​

  • 使用服务端脚本编程技术（ASP/PHP/JSP + Nginx/Apache ），在服务端生成动态生成 HTML 文档，然后发送到至客户端的浏览器，称之为服务端动态页面
  • 使用客户端脚本编程技术，在客户端（浏览器）里动态修改或生成的 HTML 文档 ，称之为客户端动态页面
  • 现代架构： 在服务端生成基本的 HTML 文档及脚本，发送至客户端后；再由浏览器执行页面中的脚本，对文档结构进行二次生成或修改。

参考 ​

HTML DOM ​