从今天开始，我们来学习DOM

1、什么是DOM

DOM，即文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口

W3C定义了一系列DOM接口，通过这些接口可以改变页面的内容、结构和样式

对于DOM，我们主要针对元素的增、删、改、查、属性操作、事件操作

DOM树

• 文档：一个页面就是一个文档，DOM中使用**document** 表示
• 元素：页面中所有标签都是元素，DOM中使用 **element**表示
• 节点：页面中所有的内容都是节点（标签、属性、文本、注释），DOM中使用**node**表示

2、获取元素

DOM 在我们实际操作中主要用来操作元素，获取页面中的元素有以下四种方式：

1. 根据 ID 获取
2. 根据标签名获取
3. 通过 HTML5 新增的方法获取
4. 特殊元素获取

2.1 根据 ID 获取

使用元素对象：document.getElementById('ID名字')

<div class="miss" id="you">在未来的某一天</div>

let miss = document.getElementById('you')
console.log(miss);  // <div class="miss" id="you">在未来的某一天</div>

2.2 根据标签名获取

document.getElementsByTagName('标签名')：返回带有指定标签名的对象的集合

<ul>
    <li class="day">在未来的某一天</li>
    <li class="day">我希望可以拿起你手中的利剑</li>
    <li class="day">替你斩妖除魔</li>
</ul>

let lis = document.getElementsByTagName('li')
console.log(lis);   // 返回一个集合，包含所有li
console.log(lis[0]);  // <li>在未来的某一天</li>

2.3 通过 HTML5 新增的方法获取

1、类名

根据类名返回元素对象集合

document.getElementsByClassName('类名'); 

栗子：

<ul>
    <li class="day">在未来的某一天</li>
    <li class="day">我希望可以拿起你手中的利剑</li>
    <li class="day">替你斩妖除魔</li>
</ul>

let lis = document.getElementsByClassName('day')
console.log(lis);
console.log(lis[0]);  // <li class="day">在未来的某一天</li>

2、选择器 -- 第一个

document.querySelector('选择器');  // 根据指定选择器返回第一个元素

• 选择器可以是标签名、类名、id名
• 只获取第一个

let li = document.querySelector('.day')
console.log(li);  // <li class="day">在未来的某一天</li>

3、选择器 -- 所有元素

document.querySelectorAll(‘选择器’);  // 根据指定选择器返回所有元素

栗子：

let lis = document.querySelectorAll('.day')
console.log(lis);  // 返回一个数组包括所有的元素

4、获取特殊元素

获取 body 元素

console.log(document.body);

获取html元素

console.log(document.documentElement);

注意：获取这两个元素时，里面必须要有标签，不能是一个空的body