什么是Web开发中的文档对象模型(DOM)
网络人先锋 2018-10-29 13:19:29
做过Web开发的人应该都听说过DOM(文档对象模型)，但是很少有人去深入的理解文档对象模型的概念。本章将对这一概念进行讲解，对DOM理解的越深，就越有利于你的Web开发。
做过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内容。
