DOW：文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
- 文档：一个页面就是一个文档，DOM中使用doucument来表示
- 元素：页面中的所有标签都是元素，DOM中使用 element 表示
- 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示
DOM 把以上内容都看做是对象
1、首先要获取元素
- 1.根据 ID 获取：使用 doucument.getElementByld('id名') 方法可以获取带ID的元素对象
- 2.根据标签名获取：根据标签名获取，使用doucument.getElementsByTagName('标签名');方法可以返回带有指定标签名的对象的集合
- 3.通过 HTML5 新增的方法获取：
- 1.根据类名返回元素对象合集：document.getElementsByClassName('类名')
- 2.根据指定选择器返回第一个元素对象：document.querySelector('选择器');
- 3.根据指定选择器返回所有元素对象：document.querySelectorAll('选择器');
注意：
querySelector 和 querySelectorAll 里面的选择器需要加符号,比如: document.querySelector('#nav');
- 4.特殊元素获取：
- ①获取body元素：document.body;
- ②获取html元素：document.documentElement;
2、其次注册事件：
事件三要素：事件源(谁)；事件类型(什么事件)；事件处理程序(做啥)
- 1.获取事件源：var div = document.querySelector('div');
- 2.注册事件(绑定事件)：div.onclick = function() {}
- 3.添加事件处理程序(采取函数赋值形式)：function（）｛添加程序｝
3、最后操作元素：
- 1.改变元素内容：
- 1.element.innerText：从起始位置到终止位置的内容，但它去
- 2.element.innerHTML：起始位置到终止位置的全部内容
- 2.改变元素属性：
- 如：img.src = "xxx"; input.value = "xxx"; input.type = "xxx"; input.checked = "xxx";
- 3.改变样式属性：
- 行内样式操作：div.style.backgroundColor = 'pink'；
- 类名样式操作：div.className=‘xxx’;
注意：
- 1.JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
- 2.JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高
- 3.如果样式修改较多，可以采取操作类名方式更改元素样式
- 4.class 因为是个保留字，因此使用className来操作元素类名属性
- 5.className 会直接更改元素的类名，会覆盖原先的类名