前言：DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口，在 HTML DOM 中定义了访问和操作 HTML 文档的标准方法，并且 DOM 通过树结构表达 HTML 文档。
一、DOM 是什么？
DOM 全称是 Document Object Model ，通过 DOM 可以把一个文档看作成一棵树，也就是我们常说的 DOM 树，而节点相当于文档树上的树枝和树叶。
- Document 文档，当创建了一个网页并把它加载到 Web 浏览器中时，DOM 就在自动生成，把编写的网页文档转换为一个文档对象；
- Object 对象，是一种自足的数据集合，与某个特定对象相关联的变量被称为这个对象的属性，只能通过某个特定对象去调用的函数被称为这个对象的方法；
- Model 模型，某种事物的表现形式。
Document 文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
</head>
<body>
<h1>标题一</h1>
<p title="p-style">段落1</p>
<ul class="ul-list">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
Model 模型图：
二、DOM 中的节点
文档是由节点构成的集合，在节点中又包含了许多不同类型的节点。
1.常见的节点类型
- 元素节点（element node）
DOM的原子是元素节点。例如刚刚的 Demo 文档中，使用到的 head、body、h1 等标签均属于元素节点；元素可以包含其它的元素；唯一没有被包含在其他元素里的元素是 html 元素，它是节点树的根元素。 - 文本节点（text node）
在刚刚的例子中，h1 元素包含着文本 “标题一” ，这里的文本就是文本节点。 - 属性节点（attrbute node）
属性节点用来对元素作出更具体的描述。例如，几乎所有的元素都有一个 title 属性；属性节点总是被包含在元素节点中。
2.节点操作
1.增
-
createElement()：创建
元素节点。 -
createTextNode()：创建
文本节点。 -
insertBefore()：插入节点。
2.删
- removeChild()：删除节点。
3.查
-
getElementById(id)：根据 id 名去查找，返回
节点对象。 -
getElementsByTagName(tag)：根据标签名去查找，返回
节点对象数组。 -
getElementsByClassName(class)：根据 class 名去查找，返回
节点对象数组。 -
childNode：访问
子节点。 -
parentNode：访问
父节点。
三、获取和设置属性
由于这里介绍到的 getAttribute 和 setAttribute 方法不属于 document 对象，所以不能通过 document 对象调用，只能通过元素节点对象调用。
1.获取
object.getAttribute( attribute )
attribute：打算查询的属性名。
返回值：查询的属性值。
2.设置
object.setAttribute( attribute, value )
attribute：打算设置的属性名。
value：打算设置的属性值。
返回值：undefinde
四、设置class名
| 方法 | 说明 |
|---|---|
| 节点.classList.add(nane) | 增加指定的class |
| 节点.classList.remove(name) | 移除指定的class |
总结
本文介绍了 DOM 提供的五个方法：getElement、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute，这五个方法是将要编写的许多 DOM 脚本的基石，同时也介绍了节点的增删查等相关的方法。
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
