学习HTML DOM

1. 什么是DOM

DOM（Document Object Model，文档对象模型），是HTML和XML文档的编程接口。它是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。简言之，DOM会将web页面和脚本或程序语言连接起来。

什么是文档呢？一个web页面是一个文档，这个文档可以在浏览器窗口或作为HTML源码显示出来。

2. DOM和JavaScript的关系

paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

上面这段示例，包括一些文档虽然是用JavaScript编写的， 却可以通过 DOM 来访问文档和其中的元素。我们需要明白DOM 并不是一个编程语言，但如果没有DOM， JavaScript 语言也不会有任何网页。文档中的每个元素— 包括整个文档，文档头部， 文档中的表格，表头，表格中的文本 — 都是文档所属于的文档对象模型（DOM）的一部分，因此它们可以使用DOM和一个脚本语言如 JavaScript，来访问和处理。

最开始，JavaScript和DOM是交织在一起的，但它们最终演变成了两个独立的实体。

当前，DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的API获得。DOM不仅可以用JavaScript实现，也可以使用其他编程语言实现，例如：

# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");

总结一下：API (web 或 XML 页面) = DOM +脚本语言 (JS或其他 )

3. HTML DOM 节点

3.1 什么是HTML DOM？

HTML DOM 是：

• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

3.2 什么是DOM 节点？

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

3.3 HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树

 一个例子：

 

参考文档：

DOM概述

HTML DOM 教程