1.DOM选择器
什么是DOM
- 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
- W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
- DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
DOM树
DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
- 文档：一个页面就是一个文档，DOM中使用document表示
- 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
- 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
1.1 获取元素
为什么要获取页面元素？
- 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。
常规方法
示例:
使用querySelector() 和 querySelectorAll()
第二种方法是使用 querySelector() 和 querySelectorAll() ，需要了解selector语法，然后使用条件来获取节点，更加方便：
- querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代
语法
document.querySelector(CSS selectors)
document.querySelectorAll(CSS selectors)
示例:
// 通过querySelector获取ID为q1的结点：
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取所有class为item的结点：
var item = q1.querySelectorAll('.item');