什么是Web开发中的文档对象模型(DOM)

做过Web开发的人应该都听说过DOM(文档对象模型)，但是很少有人去深入的理解文档对象模型的概念。本章将对这一概念进行讲解，对DOM理解的越深，就越有利于你的Web开发。

DOM的理论基础

我们都知道HTML是web网页的标记语言，它有特定的语法和规则。在HTML中的基本元素是tag标签，这些标签都用尖括号包起来，例如：<img>标签。

浏览器在将HTML文本信息渲染成具体的界面之前，会先将所有的标签都转为对象，每个对象都有自己的属性(例如：坐标位置，大小等)，对象和对象之间还可以形成父子关系，从而构成一个对象树。那么哪些标签要被渲染成哪类对象？这些对象又支持哪些具体的属性，以及对象之间可以有什么样的树形层次关系，这些标准和依据都是由DOM(文档对象模型)来定义的。

DOM(文档对象模型)中的文档表示HTML文档，对象即HTML标签转成的对象，模型指的是这些对象之间构成的树形结构：

文档对象模型示例

那么文档对象模型有什么好处，为什么浏览器都要先将HTML标记文本转为具有树形结构的对象模型？

这是因为，当转成对象树结构后，你就可以在不修改HTML内容的情况下，对界面上的元素进行调整。例如，假设你想在两个p标签段落元素之间，再动态的插入一个段落的话，只需在这两个段落元素的对象之间插入一个新的段落对象即可，而不需要去重新修改和编译HTML文本。

此外，只有转为了文档对象模型，javascript脚本语言才能操作界面上的元素，例如：如果你想对某个界面元素的大小进行调整的话，只需通过javascript脚本设置该元素对象的大小属性即可。再比如你要删除某个界面元素的话，只需通过js脚本将该对象从对象树中移除即可。

DOM定义了对象中的各种方法和事件，通过对象方法可以对这些对象进行各种操作(例如添加对象，删除对象，修改对象属性等)。通过事件可以让对象响应用户的操作，例如用户点击按钮时，如果按钮绑定了点击事件，那么该事件对应的脚本函数就会被执行，事件让界面元素具备了基本的交互能力。

DOM的一些常见操作(方法中的斜体表示需要设定的可变内容)

1. 查找HTML元素

方法	描述
document.getElementById(id)	根据元素ID查找HTML元素，找到则返回对应的DOM对象。
document.getElementByTagName(name)	根据标签名返回所有此标签的元素对象集合。
document.getElementByClassName(name)	根据类名返回所有包含此类名的元素对象集合。

2. 修改HTML元素

方法	描述
element.innerHTML = new html content	设置element元素内部的html内容
element.attribute = new value	设置element元素的attribute属性值
element.setAttribute(attribute, value)	设置element元素的attribute属性值
element.style.property = new style	修改element元素的style样式

3. 添加和删除元素

方法	描述
document.createElement(element)	创建一个HTML元素
document.removeChild(element)	移除一个HTML元素
document.appendChild(element)	追加一个HTML元素
document.replaceChild(element)	替换一个HTML元素
document.write(text)	向文档中写入HTML表达式或JavaScript代码

4. 添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	添加事件处理代码到onclick事件

下面是一个简单的DOM操作示例：

<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

上面示例就通过js脚本在demo元素内部设置了html内容。

上下篇

下一篇： 10个简单的适合初学者的编程语言

上一篇： Lua：一种快速，可扩展的功能强大的编程语言

用于图像识别的顶级编程语言

适合区块链开发的5种编程语言

5个最好的Java反编译器，用于将程序转换为源代码

用于数据科学的流行的Python库

10个简单的适合初学者的编程语言

快速学习任何编程语言的5个技巧