JS认识DOM1、DOM的基本概念 2、获取元素 * ①. 获取非常规元素 * ②. 获取常规元素 2.1 通过ID名获

1、DOM的基本概念

 *    DOM：文档对象模型
 *        其实就是操作 html 中标签的一些能力
 *    比如：
 *        获取一个元素(标签)
 *        移除一个元素
 *        创建一个元素
 *        向页面添加一个元素
 *        给元素绑定一些事件
 *        获取元素的属性
 *        给元素添加一些css样式
 *        ...
 * 
 * DOM的核心就是document对象
 *    document对象是JS内置的一个对象，里边存储着专门用来操作元素的各种方法
 * DOM:页面中的标签，我们通过JS获取到以后，就把这个对象叫做DOM对象(DOM节点)

2、获取元素

`  <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>`

* ①. 获取非常规元素

 * document.documentElement   ->   html标签
 * document.head              ->   head标签
 * document.body              ->   body标签
```js
    // 1.html标签
    console.log(document.documentElement)
    // 2.head标签
    console.log(document.head)
    // 3.body标签
    console.log(document.body)
```

* ②. 获取常规元素

2.1 通过ID名获取标签

语法：document.getElementById('ID名')

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

2.2 通过class名获取标签

语法：document.getElementsByClassName('class名')

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

获取到后会把元素放在一个长得很像数组一样的数据结构内,但它并不是数组，我们管这种数据结构叫做伪数组

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

    //2.2 获取到页面中class为box的标签
    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.3 通过标签名获取

语法：document.getElementsByTagName('标签名')

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

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

    // 2.3 获取到页面中标签名为div的标签
    var divs = document.getElementsByTagName('div')
    console.log(divs)

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

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

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

语法：document.querySelector('选择器')

    // 2.4.1 querySelector 获取到满足条件的第一个元素
    var box2 = document.querySelector('.box_cla')
    console.log(box2)
    var box3 = document.querySelector('div')
    console.log(box3)

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

    // 2.4.2 querySelectorAll满足条件的元素都获取到
    var box4 = document.querySelectorAll('.box_cla')
    console.log(box4)
    var box5 = document.querySelectorAll('div')
    console.log(box5)

3、课堂案例(半成品)

`  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    #header {
        width: 100%;
        height: 200px;
        background-color: pink;
        position: fixed;
        top: -200px;
        transition: all 0.5s;
    }
    li{
        height:1000px;
    }
    #btn {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: fixed;
        right: 50px;
        bottom: 50px;
        display: none;
    }
    </style>
</head>
<body>
<div id="header">顶部</div>
<ul>
    <li>1</li>
</ul>
<button id="btn">回到顶部</button>
<script>
    /**
     * 1.当页面的距离大于300的时候，让header和btn展示
     *        header 的 top设置为0就能看到了
     *        btn 的 display设置为block就能看到了
     * 2.当页面滚动的距离小于300的时候，让 header 和 btn 取消展示
     *        header 的 top设置为200就能看到了
     *        btn 的 display设置为none就能看到了
     * */ 
    // 0.想设置元素的属性。一定要先获取标签
    var header = document.getElementById('header')
    var btn = document.querySelector('#btn')

    // 1.监听页面的滚动距离，从而决定是否展示header和btn
    window.onscroll = function() {
      console.log(document.scrollingElement.scrollTop)
      if(document.scrollingElement.scrollTop > 300) {
        // console.log('展示header和btn')
        header.style.top = 0
        btn.style.display = 'block'
      } else {
        header.style.top = -200 + 'px'
        btn.style.display = 'none'
      }
    }
</script>
</body>
</html>  `