1. 什么是DOM?

DOM （Document Object Model——文档对象模型）是用来呈现以及与任意 HTML或 XML文档交互的API

白话文: DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用

开发网页内容特效和实现用户交互

2. DOM树

DOM树是什么？

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

3. DOM对象 (重要)

DOM 对象：浏览器根据 html 标签生成的 JS对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

DOM 的核心思想

把网页内容当做对象来处理

document 对象

是 DOM 里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的

例: document.write()

网页所有内容都在 document 里面

4. 根据CSS选择器来获取DOM元素

1.选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数：

包含一个或多个有效的CSS选择器字符串

返回值:

CSS选择器匹配的第一个元素，一个 HTMLElement对象

如果没有匹配到，则返回null。

2.选择匹配的多个元素

语法:

document.querySelectorAll('css选择器')

参数:

包含一个或多个有效的CSS选择器字符串

返回值:

CSS选择器匹配的 NodeList 对象集合

例如:

    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
    <script>
        const lis = document.querySelectorAll('ul li')
        console.dir(lis)
    </script>

得到的是一个伪数组：

有长度有索引号的数组

但是没有 pop() push()等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得。

注意事项

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已。

5. 其他获取DOM元素方法（了解）

// 根据id获取第一个元素
document.getElementById('nav')
// 根据标签获取一类元素 获取页面所有的div
document.getElementsByTagName('div')
// 根据类名获取元素 获取页面所有类名为kk的
document.getElementsByClassName('kk')

6. 操作元素内容

1.元素innerText 属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

举例说明：

    <div class="info"> 我是坤坤 </div>
    <script>
        const info = document.querySelector('.info')
        // 获取标签内部的文字
        console.log(info.innerText)     // 我是坤坤
        // 添加/修改标签内部文字内容
        info.innerText = '嗨喽，我是鸡仔~'
        info.innerText = '<h1>hello world!</h1>' // 不解析html标签
    </script>

2.元素innerHTML 属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

举例说明：

    <div class="info"> 我是坤坤 </div>
    <script>
        const info = document.querySelector('.info')
        // 获取标签内部的文字
        console.log(info.innerHTML)     // 我是坤坤
        info.innerHTML = '<h1>hello world!</h1>' // 会解析html标签  hello world!
    </script>

7. 操作元素样式属性

1.通过 style 属性操作CSS

语法：

对象.style.样式属性 = 值

举例说明：

const div = document.querySelector('div')
div.style.width = '300px'
div.style.backgroundColor = 'yellow'
div.style.borderBottom = '4px solid blue'

注意：

修改样式通过 style 属性引出

如果属性有-连接符，需要转换为小驼峰命名法

赋值的时候，需要的时候不要忘记加css单位

2.操作类名(className)操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法:

// active 是一个css类名
元素.className = 'active'

例如：

const div = document.querySelector('div')
div.className = 'box'

注意:

由于 class 是关键字，所以使用 className 去代替

className 是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

3.通过 classList 操作类控制CSS

为了解决 className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

例如：

const div = document.querySelector('div')
div.classList.add('box')
div.classList.remove('box')
div.classList.toggle('box')

8. 操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的跟其他的标签属性没有任何区别

获取：DOM对象属性名

设置：DOM对象属性名 = 新值

表单.value = 用户名
表单.type = password

例如：

    <input type='input' value="123456"/>
    <script>
        const input = document.querySelector('input')
        input.type = 'password'
    </script>

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true 代表添加了该属性，如果是false 代表移除了该属性

比如: disabled、checked、selected

例如：

    <button>按钮</button>
    <script>
        const button = document.querySelector('button')
        button.disabled = true
    </script>

9. 自定义属性

标准属性：标签天生自带的属性比如 class id title 等，可以直接使用点语法操作

比如：disaled、checked、selected

自定义属性:

在 html5 中推出来了专门的 data- 自定义属性

在标签上一律以 data- 开头

在 DOM 对象上一律以 dataset 对象方式获取

    <div data-id="1" data-name="kunkun">1</div>
    <div>2</div>
    <div>3</div>
    <script>
        const div = document.querySelector('div')
        console.log(div.dataset.id);    // 1
        console.log(div.dataset.name);  // kunkun
    </script>