DOM（Document Object Model，文档对象模型）

DOM（Document Object Model，文档对象模型）是一个跨平台和语言独立的接口，它允许程序和脚本能够动态地访问和更新文档的内容、结构和样式。DOM 将文档解析为一个由节点（nodes）和对象（objects）组成的结构集合，这种结构集合是表示文档内容的树形结构。通过 DOM，开发者可以创建动态网页，并通过 JavaScript 等脚本语言来操作 HTML 和 XML 文档。

DOM 的主要特性包括：

树形结构：DOM 将文档表示为树形结构，其中每个节点都可能是元素节点、属性节点、文本节点等。这允许开发者通过遍历树形结构来访问和修改文档的内容。

动态性：DOM 是动态的，这意味着当文档发生变化时（例如，用户与页面交互或脚本修改了文档），DOM 会自动更新以反映这些变化。

平台独立性：DOM 是跨平台的，它可以在不同的操作系统和浏览器上实现相同的功能。

语言独立性：DOM 可以用多种语言实现，包括 JavaScript、Python、Java 等。这意味着开发者可以选择自己熟悉的语言来操作 DOM。

DOM 的主要组成部分包括：

元素节点：表示文档中的 HTML 或 XML 元素，如

、

等。
属性节点：表示元素的属性，如 class、id 等。
文本节点：表示元素或属性中的文本内容。
文档节点：代表整个文档，是 DOM 树的根节点。
通过 JavaScript，我们可以使用 DOM API 来创建、修改、删除节点，以及触发事件等。这使得构建动态、交互式的网页变得相对简单。

例如，以下是一个简单的 JavaScript 代码片段，它使用 DOM API 来获取一个元素并修改其内容：

javascript
// 获取页面上的某个元素
var element = document.getElementById('myElement');

// 修改该元素的内容
element.textContent = '新的内容';
在这个例子中，document.getElementById 是一个 DOM API，用于根据元素的 ID 获取对应的元素节点。然后，通过修改 textContent 属性来改变元素的内容。

将标记语言的各个组成部分封装为对应的对象：
1、Document：整个文档对象
2、Element：元素对象
3、Attribute：属性对象
4、Text：文本对象
5、Comment：注释对象

Document：
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
1、根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
2、根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
3、根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
4、根据class属性值获取，返回Element对象数组
var class = document.getElementsByClassName('cls');