前端学习 | DOM学习(1)预变量声明优先使用const ，只要地址不变，就可以使用。以后声明变量我们优先使用哪

预变量声明

优先使用const ，只要地址不变，就可以使用。

以后声明变量我们优先使用哪个?
- const
- 有了变量先给const，如果发现它后面是要被修改的，再改为let
为什么const声明的对象可以修改里面的属性?
- 因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错建议数组和对象使用const来声明
什么时候使用let声明变量?
- 如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let比如一个变量进行加减运算，比如for循环中的i++

1. Web API基本认知

1.1 作用和分类

作用：就是使用JS去操作html和浏览器
分类：DOM(文档对象模型)、BOM（浏览器对象模型)

1.2 什么是DOM

DOM(Document Object Model——文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用：开发网页内容特效和实现用户交互

2. 获取Dom元素（标签）

1.选择匹配的第一个元素(记住：第一个)

语法： document.querySelector('css选择器')
参数： 包含一个或多个css选择器字符串
返回值： CSS选择器匹配的第一个元素，一个HTMLElement对象。

2.选择匹配的多个元素

语法： document.querySelectorAll('css选择器')
参数： 包含一个或多个css选择器字符串
返回值： CSS选择器匹配NodeList，对象集合。

得到的是一个伪数组：

有长度有索引号的数组
但是没有pop() push()等数组方法

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

2. 其他获取Dom元素的方法（标签）

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

3. 操作元素内容

目标:能够修改元素的文本更换内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
学习路径：
- 对象.innerText属性（不解析标签）
- 对象.innerHTML属性（解析标签）

3. 操作元素属性

3.1 操作元素常用属性

还可以通过js设置/修改标签元素属性，比如通过src更换图片
最常见的属性比如: href、title、src等
语法：对象.属性=值

<body>
    <img src="./img/1.jpg" alt="">
    <script>
        function getRandom(N,M){
            return Math.floor(Math.random()*(M-N+1))+N
        }
        // 获取图片对象元素
        const img = document.querySelector('img')
        const random = getRandom(1,8)
        // 重新赋值，更换路径
        img.src=`./img/${random}.jpg`
    </script>
</body>

3.2 操作元素样式属性

1 通过style属性修改样式

语法：对象.style.样式属性='值'

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: #f8ad9d;
    }
</style>
<body>
    <div class="box"></div>
    <script>
        //1.获取元素
        const box = document.querySelector('.box')
        //2.修改样式属性 对象.style.样式属性='值'
        box.style.width='400px'
        box.style.backgroundColor='hotpink'
    </script>

</body>

2 通过类名修改样式

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

语法： 元素.className = 'active' //active是一个css类名
注意:
- 由于class是关键字,所以使用className去代替
- className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: #f8ad9d;
    }
    .box{
        width: 400px;
        height: 600px;
        background-color: #003049;
        margin: fill;
    }
</style>
<body>
    <div></div>
    <script>
        const div = document.querySelector('div')
        div.className = 'box'
    </script>
</body>

2 通过classList修改样式

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
元素.clssList.add('类名')
元素.clssList.remove('类名')
元素.clssList.toggle('类名')

<style>
    .box{
        width: 200px;
        height: 200px;
        color: #f8ad9d;
    }
    .active{
        background-color: pink;
    }
</style>
<body>
    <dic class="box">文字</dic>
    <script>
        //1.获取元素
        const box = document.querySelector('.box')
        //2.修改样式 追加类 add() 类名不加点，而且是字符串
        box.classList.add('active')
        box.classList.remove('box')
        //有还是没有 有就删掉 没有就加上
        box.classList.toggle('active')
    </script>
</body>

前端学习 | DOM学习(1)

预 变量声明