1.DOM 的基本概念

DOM: 文档对象模型

其实就是操作 html 中标签的一些能力比如:

获取一个元素(标签)
移除一个元素
创建一个元素
向页面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些css样式
....

DOM 的核心就是 document 对象

document 对象是 JS 内置的一个对象, 里边存储着专门用来操作元素的各种方法

DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM对象(DOM节点)

<div id="box">我是 ID 名为 box 的 div 标签</div>
<div class="box_cla">我是 class 为 box_cla 的 div 标签1</div>
<div class="box_cla">我是 class 为 box_cla 的 div 标签2</div>
<div class="box_cla">我是 class 为 box_cla 的 div 标签3</div>

2.获取元素

2.1 获取非常规元素

document.documentElement -> html 标签

document.head -> head 标签

document.body -> body 标签

html 标签
```
 console.log(document.documentElement)
```
head 标签
```
console.log(document.head)
```
body 标签
```
 console.log(document.body)
```

2.2 获取常规元素

2.2.1 通过 ID 名获取标签

语法:

    document.getElementById('ID名')

     var box = document.getElementById('box')
    console.log(box)

2.2.2 通过 class 名获取标签

语法:

    document.getElementsByClassName('class名')

注意: 因为页面中可能会有多个元素的 class 相同, 所以获取到的是一组元素

获取到后会把元素放在一个长得很像数组一样的数据结构内, 但它并不是数组

我们管这种数据解构叫做伪数组

伪数组: 长得很像数组, 也是通过索引排列, 但是没有数组的方法

     var box_cla = document.getElementsByClassName('box_cla')
    console.log(box_cla)
    console.log(box_cla[0])
    console.log(box_cla[1])
    console.log(box_cla[2])

2.2.3 通过标签名获取

语法:

    document.getElementsByTagName('标签名')

注意: 获取到的也是一个长得很像数组一样的数据结构, 其实就是获取到了一个伪数组

想要准确的获取到标签元素, 我们需要通过索引来帮助我们拿到

     var divs = document.getElementsByTagName('div')
    console.log(divs)

2.2.4 按照选择器的形式来获取元素

2.2.4.1 querySelector

这个方法允许我们想写 css 的时候的选择器一样获取标签

注意: 这个方法只能获取到一个元素, 就是满足条件的第一个元素

语法:

    document.querySelector('选择器')
    
    var box2 = document.querySelector('.box_cla')
    console.log(box2)
    var box3 = document.querySelector('div')
    console.log(box3)

2.2.4.2 querySelectorAll

该方法与 querySelector 选择器类似, 只不过会将所有满足条件的元素都获取到,也是放在一个伪数组内

     var box4 = document.querySelectorAll('.box_cla')
    var box5 = document.querySelectorAll('div')

    console.log(box4)
    console.log(box5)

3.回到顶部案例

    <style>
    * {
        padding: 0;
        margin: 0;
    }
    #header {
        width: 100%;
        height: 200px;
        background-color: pink;
        position: fixed;
        top: -200px;
        transition: top 0.5s;
    }
    #btn {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: fixed;
        right: 50px;
        bottom: 50px;
        display: none;
    }
</style>

body中代码

    <div id="header">顶部</div>
    <ul>
        <li>*200
    </ul>
<button id="btn">回到顶部</button>

1. 当页面滚动的距离大于 300 的时候, 让 header 和 btn 展示

header 的 top 设置为 0 就能看到了,btn 的 display 设置为 block 就能看到了

2. 当页面滚动的距离小于等于 300 的时候, 让 header 和 btn 取消展示

header 的 top 设置为 200 就能看到了 btn 的 display 设置为 none 就能看到了

想设置元素的属性, 一定要先获取标签

    var header = document.getElementById('header')
    var btn = document.querySelector('#btn')

监听页面的滚动距离, 从而决定是否展示 header 和 btn

     window.onscroll = function () {
     console.log(document.documentElement.scrollTop)
        if (document.documentElement.scrollTop > 300) {
           
            header.style.top = 0
            btn.style.display = 'block'
        } else {
            header.style.top = -200 + 'px'
            btn.style.display = 'none'
        }
    }

DOM基本及获取元素