什么是 DOM

发布时间：2023-03-09 08:53:10 所属栏目：教程来源：

导读：文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

DOM (Document Object Model，文档对象模型) 是 W3C 制定的访问、操作 HTML 和XML的标准。

1. 理解 DOM
对于前端开发者，主要需要关心操作 HTML 的部分，即 HTML DOM 标准。

DOM 标准定义了如何去增加、删除、查询、修改HTML的元素。

实际上 HTML 只是一个带有格式的文本，经过浏览器解析后，会变成一颗树（因为 HTML 也是树形的），通常会叫他 DOM树，根节点叫文档节点(document) ，树上的每个节点就叫 DOM节点。

DOM 标准提供了一系列方法对这些节点进行操作。

DOM 节点是契合HTML标准的，可以对其细分：

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

如果没有 DOM ，JavaScript 也就在网页开发中就失去了活力。

2. 操作 DOM
通常前端开发者指的操作 DOM ，就是操作 DOM 节点。

如有以下结构的 HTML：

<div>
<p>我是一段文本</p>
<a id="link" href="//imooc.com">我是一个超链接</a>
<div>
经过浏览器后，上面三个元素就都是 DOM 节点了。

这时候想修改 a 标签里的文案，就需要操作 DOM 节点来修改。

通过 getElementById 方法就可以根据 id 获取到一个 DOM 节点，所有 DOM 节点都具有这个方法。

在不知道某个元素的父级对象的时候，就可以使用 document.getElementById 来获取，意思是在 document 下根据 id 查找一个 DOM 节点。

<div>
<p>我是一段文本</p>
<a id="link" href="//imooc.com">我是一个超链接</a>
<div>
<script>
var aEle = document.getElementById('link');
aEle.innerText = '前往网';
</script>
通过修改dom节点的innerText属性就可以改掉文案。

实际上这一段文案，就是一个文本节点。

其实具有id属性的dom节点不需要获取，也可以直接通过JavaScript访问，如id为container的元素，就可以直接在JavaScript中使用container访问。

因为具有id的节点会以id为属性名，作为window的属性存在，值就是这个DOM节点。

但通常不建议这么做，因为他人阅读代码的时候可能会找不到声明的地方，二是名字被固定了。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!