什么是DOM？以及DOM与Javascript间的关系
什么是DOM？
文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。
网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。
例如，DOM 中指定下面代码中的 querySelectorAll 方法必须要返回文档中所有 <p> 元素组成的列表：
const paragraphs = document.querySelectorAll("p");
// paragraphs[0] 是第一个 <p> 元素
// paragraphs[1] 是第二个 <p> 元素，依此类推
alert(paragraphs[0].nodeName);
所有可用于操作和创建网页的属性、方法和事件都被组织到对象中。例如，代表文档本身的 document 对象，任何实现 HTMLTableElement 访问 HTML 表格的 table 对象等，都是对象。
DOM 是使用多个 API 构建的，它们一起工作。核心 DOM 定义了描述任何文档和其中对象的实体。其他 API 会根据需要对其进行扩展，为 DOM 增加新的特性和功能。例如，HTML DOM API 为核心 DOM 增加了对表示 HTML 文档的支持，而 SVG API 增加了对表示 SVG 文档的支持。
DOM 和 JavaScript
上一个简短的例子，和几乎所有的例子一样，是 JavaScript。也就是说，它是用 JavaScript 写的，但却使用 DOM 来访问文档及其元素。DOM 不是一种编程语言，但如果没有它，JavaScript 语言就不会有任何关于网页、HTML 文档、SVG 文档及其组成部分的模型或概念。文档作为一个整体，标题、文档中的表格、表头、表格单元中的文本以及文档中的所有其他元素都是该文档对象模型的一部分。它们都可以使用 DOM 和像 JavaScript 这样的脚本语言进行访问和操作。
DOM 不是 JavaScript 语言的一部分，而是用于建立网站的 Web API。JavaScript 也可以在其他情况下使用。例如，Node.js 在计算机上运行 JavaScript 程序，但提供了一套不同的 API，而且 DOM API 不是 Node.js 运行时的核心部分。
DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的 API 获得。尽管我们在本参考文档中会专注于使用 JavaScript，但 DOM 也可以使用其他的语言来实现，以 Python 为例，代码如下：
# Python DOM 示例 import xml.dom.minidom as m doc = m.parse(r"C:\Projects\Py\chap1.xml") doc.nodeName # 文档对象的 DOM 属性 p_list = doc.getElementsByTagName("para")
访问 DOM
在使用 DOM 时，不需要做任何其他特殊的操作。你可以在脚本中直接使用 JavaScript 的 API，这是一个由浏览器运行的程序。
当你创建一个脚本时，无论是内联到 <script> 元素中还是包含在网页中，你都可以立即开始使用 document 或 window 对象的 API 来操作文档本身，或网页中的任何元素（文档的子元素）。你的 DOM 编程可能就像下面这个示例一样简单，通过使用 console.log() 函数在控制台显示一条信息：
<body onload="console.log('欢迎来到我的主页！');"> … </body>
由于一般不建议将页面的结构（用 HTML 编写）和对 DOM 的操作（用 JavaScript编写）混在一起，所以 JavaScript 部分将在这里分组，并与 HTML 分开。
例如，以下函数创建了一个新的 h1 元素，向该元素添加文本，然后将其添加到文档的树中：
<html lang="zh-CN"> <head> <script> // 当文档加载时，运行这段函数 window.onload = () => { // 在空 HTML 页面中创建一系列元素 const heading = document.createElement("h1"); const headingText = document.createTextNode("Big Head!"); heading.appendChild(headingText); document.body.appendChild(heading); }; </script> </head> <body></body> </html>
