JavaScript（Web APIs 作用和分类，DOM数是什么，document是什么，根据css选择器来获取DOM元素，修改DOM元素的方式，边量声明）

变量声明

变量声明有三个 var let 和 const
建议： const 优先，尽量使用const，原因是：

Ø const 语义化更好
Ø 很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
Ø 实际开发中也是，比如react框架，基本const

什么时候使用let声明变量？

Ø 如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let Ø 比如一个变量进行加减运算，比如 for循环中的 i++

1. Web API作用和分类

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

2. 什么是DOM

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

2.1获取DOM元素练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <!-- html标签 盒子 -->
    <div class="box">666</div>
    <div class="top">
        <ul>
            <li>123</li>
            <li>456</li>
            <li>789</li>
            <li>173</li>
            <li>643</li>
        </ul>
    </div>
    <script>
// querySelector 查询选择器
      // 获取DOM元素   
      //选择匹配第一个元素: document.querySelecto
      const box1 = document.querySelector('.box')
    //   参数：包含一个或多个有效的css选择器字符串
     // 返回值：css选择器匹配的第一个元素，一个对象
      console.log(box1);




    //   选择匹配多个元素  document.querySelectorAll
    const top1 = document.querySelectorAll('.top ul li')
    // 一定记得打印 打印出数组 对象集合
    console.log(top1);
    </script>
</body>
</html>

3.DOM树是什么

Ø 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
Ø 描述网页内容关系的名词
Ø 作用：文档树直观的体现了标签与标签之间的关系

3.1 依次获取DOM对象练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="nav">

        <li>你好</li>
        <li>我是</li>
        <li>Superman</li>
    </ul>

    <script>
        // 第一种方法
        // 伪类选择器
        // first-child ：获取的第一行元素
        // nth-child(2)：第二行元素，括号里写几就是第几行，也可以用2n等来表示
        // last-child：最后一行元素

        // const nav1 = document.querySelector('.nav li:first-child')
        // console.log(nav1);
        // const nav2 = document.querySelector('.nav li:nth-child(2)')
        // console.log(nav2);
        // const nav3 = document.querySelector('.nav li:last-child')
        // console.log(nav3);

        // 第二种方法
        // 可以用循环输出每个元素 for循环
        // 获取所有元素，再循环输出
        const nav1 = document.querySelectorAll('.nav li')

        // 伪数组，所以有数组长度，就是获取 对象名.length
        for (let i = 0; i < nav1.length; i++) {
        console.log(nav1[i]);  //每个小li

        }
    </script>
</body>
</html>

4.document 是什么？

Ø 是 DOM 里提供的一个对象
Ø 网页所有内容都在document里面

2. 根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素

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

参数:包含一个或多个有效的CSS选择器字符串
返回值：
- CSS选择器匹配的第一个元素,一个 HTMLElement对象。
- 如果没有匹配到，则返回null。
选择器匹配多个元素
语法：document.querySelectorAll('css选择器')
参数:包含一个或多个有效的CSS选择器字符串
返回值：css选择器匹配的NodeList 对象集合

获取一个DOM元素我们使用谁？能直接操作修改吗?

Ø querySelector() Ø 可以 2. 获取多个DOM元素我们使用谁？能直接修改吗？如果不能可以怎么做到修改？ Ø querySelectorAll() Ø 不可以，只能通过遍历的方式一次给里面的元素做修改

1.设置/修改DOM元素内容有哪2钟方式？

Ø 元素.innerText 属性
Ø 元素.innerHTML 属性

1.1操作元素内容，修改元素练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">想要修改的内容</div>
    <div class="first">可以解析标签</div>
    <script>
        // 第一步：获取元素
        const box1 = document.querySelector('.box')
        console.log(box1);

        // 修改内容 对象.innerText   显示存文本，不解析标签
        console.log(box1.innerText ); //获取要修改的文字内容
        box1.innerText = '哈哈'

 
        // 第一步：获取元素    对象.innerHTML 会解析标签，多标签建议使用模版字符
        const first1 = document.querySelector('.first')
        first1.innerHTML='<strong>我能修改标签</strong>'

    </script>
</body>
</html>

2. 两者者的区别是什么？

Ø 元素.innerText 属性只识别文本，不能解析标签
Ø 元素.innerHTML 属性能识别文本，能够解析标签

抽奖练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            width: 500px;
            height: 300px;
            border:1px solid rgb(245, 131, 150);
        }
        .one{
            color:red;
        }
        .two{
            color: blue;
        }
        .three{
            color: green;
        }
        
    </style>
</head>
<body>
    <div class="all">
    <h1>幸福小区业主抽奖活动</h1>
        <h2><span class="one">一等奖：？</span></h2>
        <h3><span class="two">二等奖：？</span></h3>
        <h4><span class="three">三等奖：？</span></h4>
    </div>
    <script>
         //  创建一个数组储存 
          const arr = [ '张三', '李四', '王五', '赵六', '田七'] 
            //  生成数组随机数
            let random = Math.floor(Math.random() * arr.length)
          //  获取对象元素
          const one = document.querySelector('.one') 
          one.innerHTML=`一等奖：${arr[random]}`
           arr.splice(random,1)
           console.log(arr);
           
        //   生成第二个随机数
          let random1=Math.floor(Math.random() * arr.length)
            // 获取对象
            const two = document.querySelector('.two')
            //  对象名.innerHTML='值' 修改内容，修改里面的值
            two.innerHTML=`二等奖：${arr[random1]}`
            // 删除随机数中获取到的元素
            arr.splice(random1,1)

            // 生成第三个随机数
            let random2=Math.floor(Math.random() *arr.length)
            //  获取对象
            const three = document.querySelector('.three')
            three.innerHTML=`三等奖：${arr[random2]}`
            arr.splice(random2,1)
</script> 
   
</body>
</html>

秒客网