变量声明const优先。

有变量先给const，后面发现变量可变，就用let。

const声明的值不能更改，而且const声明变量的时候需要里面进行初始化。
但是对于引用数据类型，const声明的变量，里面存的不是值·，是地址

Web API基本认知

1.1作用和分类

作用：就是使用JS去操作html和浏览器。

分类：DOM（文档对象模型），BOM（浏览器对象模型）。

1.2什么是DOM？

DOM（Document Object Medel----文档对象模型）就是用来呈现以及任意HTML或XML文档实现用户交互。

1.3DOM树

DOM树是什么？

将HTML文档以树状结构直观地表达出来，我们称之为文档树或DOM树。
文档树直观地体现出了标签与标签之间的关系。

1.4DOM对象(重要)

DOM对象：浏览器根据html标签生成JS对象。所有的标签属性都可以在这个对象上面找到。修改这个对象的属性都会映射到这个标签身上。
DOM的核心思想把网页内容当做一个对象来处理。
document对象是DOM里提供的一个对象所以他提供的属性和方法都是用来访问和操作网页内容的。网页所有内容都在document里面。

获取DOM对象

根据CSS选择器来获取DOM元素（重点）。1.选择匹配的第一个元素。语法：

const div = document.querySelector('css选择器')

参数：包含一个或多个有效的CSS选择器字符串。返回值：CSS选择器匹配第一个元素，一个 HTMLElement对象。如果没有匹配到，则返回null。2.选择多个元素，语法：

  const li = document.querySelectorAll('css选择器')

参数：

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

返回值：

css选择器匹配的Nodelist对象集合。

2.根据css选择器来获取DOM元素（重点）

const li = document.querySelectorAll('css选择器')

得到的是一个伪数组：

有长度索引号的数组。
但是没有 pop(),push()等数组方法。要得到里面的每一个对象，则需要遍历（for）的方式获得。

注意事项：哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素。

<body>
    <div class="box"></div>
    <p id="nav">导航栏</p>
    <ul>
        <li>测试</li>
        <li>测试</li>
        <li></li>
    </ul>
    <script>
        //const box = document.querySelector('div')
        //const box = document.querySelector('.box')
        //console.log(box);

        // const nav = document.querySelector('#nav')
        // console.log(nav);

        // const li = document.querySelector('ul li:first-child')
        // console.log(li);


        // const li = document.querySelectorAll('ul li')
        // console.log(li);

        //1.获取元素
        const lis = document.querySelectorAll('.nav li')
        for(let i = 0;i < lis.length;i++){
            console.log(lis[i]);
        }

        const p = document.querySelectorAll('#nav')
        console.log(p);
        p[0].style.color = 'red'
    </script>
</body>

操作元素内容

1.对象.innerText属性

将文本添加/更新到任意标签位置。
显示纯文本，不会解析标签。

2.元素innerHTML属性

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

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

<body>
    <div class="box">我是文字的内容</div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.innerText);
        // box.innerText = '我是一个盒子'
        box.innerText = '<strong>我是一个盒子</strong>'//不会解析标签

        //3.innerHTML解析标签
        console.log(box.innerHTML);
        //box.innerHTML = '<strong>我是一个盒子</strong>'
    </script>
</body>

随机抽奖

<body>
    <div class="wrapper">
        <strong>传智教育年会抽奖</strong>
        <h1>一等奖：<span id="one">???</span></h1>
        <h3>二等奖：<span id="two">???</span></h3>
        <h5>三等奖：<span id="three">???</span></h5>
      </div>
      <script>
        //1.声明数组
        const arr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']
        //2.先做一等奖
        //2.1随机数 数组的下标
        const random = Math.floor(Math.random()*arr.length)
        //2.2获取one元素
        const one = document.querySelector('#one')
        one.innerHTML = arr[random]
        arr.splice(random,1)
        console.log(arr);
        //2.先做二等奖
        //2.1随机数 数组的下标
        const random1 = Math.floor(Math.random()*arr.length)
        //2.2获取one元素
        const two = document.querySelector('#two')
        two.innerHTML = arr[random1]
        arr.splice(random1,1)
        console.log(arr);

        //2.先做二等奖
        //2.1随机数 数组的下标
        const random2 = Math.floor(Math.random()*arr.length)
        //2.2获取one元素
        const three = document.querySelector('#three')
        three.innerHTML = arr[random2]




      </script>
</body>

操作元素属性

操作元素常用属性

可以通过js设置修改元素属性，比如通过src更换图片。

最常见的属性：href，title，src属性。

语法：

对象.属性 = 值

<body>
    <img src="./1.webp" alt="">
    <script>
        //1.获取图片元素
        const img = document.querySelector('img')
        //2.修改图片对象属性    对象.属性 = 值
        img.src = './2.webp'
        img.title = 'pink老师的艺术照'
    </script>
</body>

操作元素style属性

可以通过js设置修改标签元素的样式属性。比如轮播图小圆点更换颜色或样式。点击按钮可以滚动图片，这是移动的图片的位置left等等。

学习路径通过style属性操作CSS。

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color:pink;
        }
    </style>
<body>
    <div class="box"></div>
    <script>
        //1.获取元素
        const box = document.querySelector('.box')
        //2.修改样式属性    对象.style.样式属性 = '值'
        box.style.width = '300px'
        //多组单词的采取小驼峰命名
        //一定要加单位
        box.style.backgroundColor = 'hotpink'
        box.style.border = '2px solid blue'
        box.style.borderTop = '2px solid red'

    </script>
</body>

## 通过类名（className）操作css 。

如果修改的样式比较多，直接通过style属性修改比较繁琐，就用css类名形式。
语法元素.className = 'active'
注意：1.由于class是关键字，所以用className代替。2.className是使用新值换旧值，如果要添加一个类就保留之前的类名。

## 通过classList操作控制css。

语法：

 78bc4f1a69f1410b98dc1ad7ff8d8154转存失败，建议直接上传图片文件

<style>
        .box{
            width: 200px;
            height: 200px;
            color: #333;

        }
        .active{
            color: red;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
    <script>
        //通过classList来添加
        //1.获取元素
        const box = document.querySelector('.box')
        //2.修改样式
        box.classList.add('active')//类名不加点
        //3.删除样式
        box.classList.remove('active')
        //4.切换类  有还是没有，有就删去，没有就加上
        box.classList.toggle('active')
    </script>
</body>

 b468d1ea1b564a9d84e770210cc71aa1转存失败，建议直接上传图片文件

WebAPI|青训营