DOM 文档对象模型 Document Object Model

HTML文档的不同形态

  • 存储在磁盘上: 是一个文本文件,即源代码字符串,供后续编辑或传输
  • 在网络中传输: 是一个字符流,供各种路由机器进行接收和转发
  • 在浏览器管理的内存中: 被解析成树状结构，供后续处理

问题的提出

如何程序化的修改html文档？

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

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

DOM 树

<html lang="en-US"><body> <div id="main"><ul><li>one</li><li>two</li><li>three</li> 
</ul><h2>标题1</h2><p>段落1</p><h2>标题2</h2><p>段落2</p></div></body></html>

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

更多工具:

节点遍历

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

<div id="infoBlock">
  <h2 class="title">Hello!</h2>
  <div class="content">Hello Dom! </div>  
</div>

<script>
  //注意style属性名，采用的是驼峰式命名,和css的写法有区别
  var o1 = document.getElementById('infoBlock')
  o1.style.backgroundColor = 'red'; 

  var o2 = document.getElementsByClassName('content')[0]
  o2.textContent = 'what is dom? '

  var o3 =  document.getElementsByTagName('h2')[0]
  o3.style.backgroundColor = 'blue';
</script>

更多节点遍历方法

<main>
  <div><div> <p>Hello!</p>  </div></div>
  <div><div> <p>Hello!</p>  </div></div>
  <div><div> <p>Hello!</p>  </div></div>
</main>
<script>
  var main = document.getElementsByTagName('main')[0]
  var div = main.children[1]
  p.textContent = "Goodbye!"
</script>

由上述例子，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 对象

// xml dom api
 var form = document.getElementById("formCheckBox")
// html dom api
 var form = document.forms[0]
  • DOM 适用于各类XML文档，如 HTML、SVG、MS office xml、open office xml等文档类型
  • HTML DOM API 则是为便于处理 HTML 文档类型提供的扩展接口，它提供了 XML 文档（即核心 DOM API 接口或XML DOM）里没有的一些功能

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

results matching ""

    No results matching ""