DOM

DOM 文档对象模型，就是当前网页里面的所有内容。

因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分

BOM 就是 window对象 DOM 就是 document对象

1、使用DOM获取网页元素

querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素。例：

获取的就是 巧克力，并将巧克力修改为 苹果

而querySelectorAll()方法，是根据选择器规则，获取对应的所有元素，例：

这里获取的就是巧克力和薯片，并将这两个元素的背景颜色样式改为了粉色

2、操作DOM元素的样式

1）通过style属性直接设置

例：

注意：如果样式名称是多个单词的组合，需要使用小驼峰命名规则  font-size ==>fontSize

2）通过className属性设置类选择器

例：

在body里面设置一个div标签：<div id='b'>好好学习，天天向上</div>；style里面设置一个.class1 样式，通过className属性就可以实现.class1样式

3）也可以通过classList属性添加多个类选择器

在body里面设置一个div标签：<div id='c'>好好学习，天天向上</div>；style里面设置一个.color 样式,通过鼠标点击事件来添加样式（add方法）和移除样式（remove方法）

3、操作DOM元素的属性

获取和设置标签自定义的属性，需要通过getAttribute()和setAttribute()方法

setAttribute()方法，设置元素的属性值，需要传两个参数（属性名和属性值）

getAttribute()方法，获取元素的属性值，只需要传一个参数（属性名）

4、创建和删除DOM元素

（一）、创建

1）createElement()方法，用于创建DOM元素

2）appendChild()方法，用于在当前DOM元素中添加子元素

（二）、删除

1）自删 remove()方法，是元素删除自己

2）通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素