10-12 | 读JavaScript 高程

这一篇呢是第10章到第12章的汇总，DOM 的相关知识，这些东西让 JavaScript 有了操作网页的能力，但像Vue等框架的出现，让开发工作不再直接地操作 DOM，这部分地知识相对会弱化一些，不过一些 API 还是要熟悉一下地。这就是将这几章汇总的原因。

1. 什么是DOM?
2. DOM 是用来干什么的？
3. 如何选取DOM元素？
4. 如何访问节点的属性？

1. 什么是DOM?

DOM 的全称是 Document Object Model，中文名叫文档对象模型。

来自维基百科

和原型链作用域链有那么些相似。

这种类型或者说是关系是很常见的，比如历史上的中央集权制度。

中央集权制度

以及现在的公司架构也是类型的结构。

公司架构

这种关系在数据结构和算法中有个术语叫做树结构，抽象之后长下面的样子。

树结构
图片来源： https://www.cnblogs.com/QG-whz/p/5168620.html

2. DOM 是用来干什么的？

讲了这么多，那么 DOM 有何用? 有了 MVVM 框架，现在直接操作 DOM 的地方确实是少了，取而代之的是通过控制数据来改变页面的视图层。所以这里也不多介绍。

3.如何选取DOM元素？

选择使用

• querySelector()
• querySelectorAll()

书中还提到一个方法叫做 matchesSelector()，但搜索一下可以发现，这个东西被改成了 matches()。所以看这本书时还是要小心一点的，有些东西已经随着时间发生了改变。没什么能躲过时间的摧残。

综上，选取元素可以使用 querySelector() querySelectorAll() matches()，具体用法自行探索。

matches

H5

元素选取相关：

• getElementsByClassName()
• getElementById()

对类的增删改查

• add
• contains
• remove
• toggle

---

4. 如何访问节点的属性？

对于连字符的属性名转换成驼峰命名。

// 访问
const color = demo.style.backgroundColor

// 修改
demo.style.backgroundColor = '#f40'

当然了，一般很少直接使用 js 修改样式值，这样的需求一般是通过切换 class 名实现的。因为直接使用 js 修改样式，js 和 css 代码会混杂在一起，不符合结构行为样式相分离的规范。

接下来是元素尺寸相关的问题。和 BOM 尺寸放在一起有空看。

好嘞，就这些。