【JavaScript学习|黑马2023课程】Web APIs day01——变量，DOM获取、操作元素内容、表单属性，定时器

1.1 变量声明

1.1 1 选用哪个

变量声明有三个关键字：var、let 和 const。

• var：老派写法，问题很多，已被淘汰。
• let 和 const：现代写法，推荐使用。

1.2 const 优先原则

const 语义化更好，表示变量不可变。建议优先使用 const，实际开发中也是如此，比如 React 框架基本使用 const。如果还在纠结，那么建议有了变量先给 const，如果发现它后面要被修改，再改为 let。

1.3 是否可以修改为 const

const 声明的值不能更改，而且声明时必须初始化。但是对于引用数据类型（如数组和对象），const 声明的变量存储的是地址而非值。因此，对象内部属性值修改不影响 const 声明的变量，因为地址未发生变化。这也意味着，对象值修改了也可以用 const，只要地址不变即可。

具体可参考下面图片以及代码：

const arr = ["1", "2", "2"];
      arr.push("2");
      console.log(arr);

      const names = [];
      //names = [1, 2, 3]; //错误写法，赋了一个新地址
      names[0] = "zhangsan";
      names[2] = "lisi"; //没赋值会变成空白
      console.log(names);

1.4 总结

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

1.2 Web APIs基本认知

1.2.1 作用和分类

Web APIs 的主要作用是允许开发者使用 JavaScript 去操作 HTML 和浏览器。它们为开发者提供了一系列接口和功能，以便与网页和浏览器进行交互。

Web APIs 可以大致分为两类：DOM（文档对象模型）和 BOM（浏览器对象模型）。

1.2.2 什么是DOM

DOM（Document Object Model，文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API。换句话说，DOM 是浏览器提供的一套专门用来操作网页内容的功能。

DOM 的作用：

1. 开发网页内容特效：通过 DOM，开发者可以使用 JavaScript 对网页元素进行添加、删除、修改等操作，从而实现各种动态特效。
2. 实现用户交互：DOM 允许开发者监听和处理用户在网页上进行的各种操作（如点击、滑动等），从而实现丰富的用户交互体验。

稍微补充一点，DOM 是以树形结构组织网页元素的，每个元素都是树形结构中的一个节点。这种结构使得开发者可以方便地遍历和操作网页元素。同时，DOM 还提供了一系列方法和属性，用于获取和修改元素的属性、内容、样式等。

1.3 DOM

1.3.1 DOM树

①DOM树是什么？

DOM树（Document Object Model Tree）是将HTML文档以树状结构直观表现出来的形式，我们也称之为文档树。它是描述网页内容关系的一种名词。

②DOM树的作用：

DOM树的主要作用是直观地体现标签与标签之间的关系。通过将HTML文档转化为树状结构，开发者可以更容易地理解和操作网页元素。每个标签在DOM树中都是一个节点，节点与节点之间通过层级关系连接在一起，形成了一个完整的网页结构。这种树状结构使得开发者可以方便地遍历、查找和修改网页元素，从而实现各种网页交互和动态效果。

1.3.2 DOM对象

DOM对象是浏览器根据HTML标签生成的JavaScript对象。每个HTML标签在DOM中都有一个对应的对象，这些对象的属性和方法可以用来访问和操作网页内容。所有的标签属性都可以在DOM对象上找到，并且修改DOM对象的属性会自动映射到标签上。

DOM的核心思想是把网页内容当做对象来处理。document对象是DOM里提供的一个对象，它提供的属性和方法都是用来访问和操作网页内容的。例如，document.write()方法可以用来向网页中写入内容。

1.3.3 获取DOM对象

要操作某个标签，首先需要选中该标签。获取DOM对象就是利用JavaScript选择页面中的标签元素。

根据CSS选择器来获取DOM元素（重点）

根据CSS选择器来获取DOM元素是一种常用的方法。它可以通过选择器来匹配页面中的元素，并返回对应的DOM对象。

①选择匹配第一个元素

使用document.querySelector()方法可以选择匹配第一个元素。该方法接受一个CSS选择器作为参数，并返回与该选择器匹配的第一个元素。如果没有找到匹配项，则返回null。

语法：

element = document.querySelector(selectors);

②选择匹配多个元素

使用document.querySelectorAll()方法可以选择匹配多个元素。该方法接受一个CSS选择器作为参数，并返回一个NodeList对象，其中包含与该选择器匹配的所有元素。如果没有匹配到任何元素，则返回一个空的NodeList对象。

语法：

elements = document.querySelectorAll(selectors);

需要注意的是，querySelectorAll()方法返回的是一个伪数组，具有长度和索引号，但没有数组的pop()、push()等方法。要遍历该伪数组并访问其中的每个元素，需要使用for循环或其他遍历方法。

其他获取DOM元素方法（了解）

除了根据CSS选择器来获取DOM元素外，还有其他一些方法可以获取DOM元素，如getElementById()、getElementsByTagName()和getElementsByClassName()等。这些方法可以根据元素的ID、标签名或类名来获取对应的DOM元素。

// 根据id获取一个元素
document.getElementById("nav");
// 根据标签获取一类元素获取页面 所有div
document.getElementsByTagName("div");
// 根据类名获取元素获取页面所有类名为w的
document.getElementsByClassName("w");

获取多个元素所形成的都是伪数组

1.4 操作元素内容

DOM对象是根据HTML标签生成的JavaScript对象，因此操作HTML标签实际上就是操作DOM对象。在操作DOM对象时，我们通常使用点语法来访问和修改对象的属性。

要修改标签元素的内容，可以使用以下两种方法：

1.4.1 元素.innerText 属性

innerText属性可以用来获取或设置元素的纯文本内容。当使用该属性时，它会返回元素及其所有子元素的纯文本内容，不包括任何HTML标签。这意味着，如果该元素包含其他HTML标签，这些标签将被视为文本而不是HTML代码。因此，innerText属性通常用于获取或设置元素的纯文本内容，而不是HTML代码。

1.4.2 元素.innerHTML 属性

innerHTML属性可以用来获取或设置元素的HTML内容，包括标签和文本。当使用该属性时，它可以返回元素的HTML代码，包括所有子元素的HTML代码。这意味着，如果该元素包含其他HTML标签，这些标签将被视为HTML代码而不是纯文本。innerHTML属性非常适合用于向页面动态添加HTML内容，因为它允许您直接将HTML代码插入到元素中。

1.4.3 区别

• 元素.innerText属性只识别文本，不能解析标签。如果元素中包含HTML标签，这些标签将被视为纯文本。
• 元素.innerHTML属性能识别文本，并且能够解析标签。如果元素中包含HTML标签，这些标签将被视为HTML代码并执行。

在选择使用innerText还是innerHTML时，应根据具体情况而定。如果您只需要获取或设置元素的纯文本内容，可以使用innerText属性；如果您需要向页面动态添加HTML内容或处理包含HTML标签的元素内容，则应使用innerHTML属性。

案例：抽奖案例

需求：从数组随机抽取一等奖、二等奖和三等奖，显示到对应的标签里面

const array = ["赵世伟", "豆浆伟", "shit伟", "厨伟", "Beyond伟"];
      function getName(arr) {
        let i = Math.floor(Math.random() * arr.length);
        let name = arr[i];
        arr.splice(i, 1);
        return name;
      }
      let n1 = getName(array);
      let n2 = getName(array);
      let n3 = getName(array);
      const N1 = document.querySelector("#one");
      N1.innerHTML = n1;
      const N2 = document.querySelector("#two");
      N2.innerHTML = n2;
      const N3 = document.querySelector("#three");
      N3.innerHTML = n3;

1.5 操作元素属性

1.5.1 操作元素常用属性

通过JavaScript，我们可以设置或修改HTML标签元素的属性，如href、title、src等。这是一种常见的DOM操作，可以实现动态的网页效果。

语法：

要设置或修改元素的属性，可以使用以下语法：

元素.属性名 = 值;

其中，“元素”是通过前面介绍的方法获取到的DOM对象，“属性名”是要设置或修改的属性的名称，“值”是要设置或修改的属性值。

示例：

例如，如果我们有一个图像元素，想要通过JavaScript来更改其src属性，可以使用以下代码：

var img = document.querySelector(".myImage"); // 获取图像元素
img.src = "new_image.jpg"; // 设置新的src属性值

在这个例子中，我们首先使用document.querySelector()方法获取到了类名为“myImage”的图像元素，并将其存储在变量img中。然后，我们使用点语法来设置该元素的src属性值为“new_image.jpg”。

案例：生成随机图片

//1.获取图片对象
      const p1 = document.querySelector("img");
      //2.生成随机数
      let index = Math.floor(Math.random() * 3) + 1;
      //3.修改属性
      p1.src = `imgs/${index}.png`;

1.5.2 操作元素样式属性

除了设置和修改HTML标签元素的属性和内容，JavaScript还可以用来设置和修改元素的样式属性。这可以实现动态的样式效果，如轮播图小圆点自动更换颜色样式，点击按钮滚动图片等。

①通过style属性操作CSS

通过JavaScript的style属性，我们可以直接设置或修改HTML元素的CSS样式。具体的语法如下：

对象.style.样式属性 = 值;

需要注意的是：

1. 修改样式需要通过style属性引出；
2. 如果属性有“-”连接符，需要转换为小驼峰命名法，如“backgroundColor”；
3. 赋值的时候，如果需要，不要忘记加CSS单位，如“px”、“%”等。

②操作类名(className)操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于CSS类名的形式来实现。具体的语法如下：

元素.className = 新类名;

需要注意的是：

1. 由于class是关键字，所以使用className去代替；
2. className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名。

③通过classList操作类控制CSS

为了解决className容易覆盖以前的类名的问题，我们可以通过classList方式来追加和删除类名。具体的语法如下：

// 1. 追加类 add() 类名不加点，并且是字符串
classList.add('active');
// 2. 删除类 remove() 类名不加点，并且是字符串
classList.remove('box');
// 3. 切换类 toggle() 有就删掉，没有就加上
classList.toggle('active');

案例：轮播图随机版

需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式

模块:

①：图片会随机变换

②：底部盒子背景颜色和文字内容会变换

③：小圆点随机一个高亮显示

// 1. 需要一个随机数 
const random = parseInt(Math.random() * sliderData.length)
// console.log(sliderData[random])
// 2. 把对应的数据渲染到标签里面
// 2.1 获取图片
const img = document.querySelector('.slider-wrapper img')
// 2.2. 修改图片路径  =  对象.url
img.src = sliderData[random].url
// 3. 把p里面的文字内容更换
// 3.1 获取p
const p = document.querySelector('.slider-footer p')
// 3.2修改p
p.innerHTML = sliderData[random].title
// 4. 修改背景颜色
const footer = document.querySelector('.slider-footer')
footer.style.backgroundColor = sliderData[random].color
// 5. 小圆点
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
// 让当前这个小li 添加 active这个类
li.classList.add('active')

1.6 操作表单元素属性

1.6.1 表单属性的操作：

• 获取属性：DOM对象.属性名
• 设置属性：DOM对象.属性名 = 新值

1.6.2 特殊的表单属性：

有些表单属性是布尔属性，意味着它们只要存在就有效果，不存在则没有效果。例如：disabled、checked、selected。

• 如果属性值为true，代表添加了该属性。
• 如果属性值为false，代表移除了该属性。

示例：

// 获取一个输入框元素
var inputElement = document.querySelector(".myInput");

// 设置disabled属性，使输入框不可输入
inputElement.disabled = true;

// 移除disabled属性，使输入框可输入
inputElement.disabled = false;

---

1.7 自定义属性

标准属性与自定义属性的区别：

• 标准属性：标签天生自带的属性，如class、id、title等。可以直接使用点语法操作。
• 自定义属性：在HTML5中推出了专门的data-自定义属性。在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取。

如何使用自定义属性：

1. 在HTML标签中添加自定义属性，如：<div data-my-attribute="value"></div>。
2. 在JavaScript中通过element.dataset.myAttribute来获取属性值。注意，多单词的属性名应该使用驼峰命名法，而不是连字符。例如，对于data-my-attribute，应使用dataset.myAttribute来访问。

示例：

HTML:

<div id="myDiv" data-my-attribute="Hello World!">This is a div.</div>

JavaScript:

var divElement = document.getElementById("myDiv");
console.log(divElement.dataset.myAttribute); // 输出 "Hello World!" 到控制台。

1.8 定时器——间歇函数

1.8.1 概述

在Web开发中，我们经常需要定时执行某些任务，例如轮播图自动切换、定时刷新页面数据等。为了实现这类需求，JavaScript提供了两种定时器函数：间歇函数和延时函数。这次是间歇函数。

1.8.2 开启定时器

语法：

setInterval(函数, 间隔时间);

setInterval() 方法用于开启一个定时器，它接受两个参数：

1. 要执行的函数。这里只需要提供函数名，不需要加括号。
2. 每次执行函数的间隔时间，单位是毫秒。

例如，下面的代码会每隔1秒（1000毫秒）在控制台输出 “Hello, World!”：

setInterval(function() {
  console.log("Hello, World!");
}, 1000);

注意：setInterval() 方法会返回一个唯一的定时器ID，这个ID可以用于关闭定时器。

1.8.3 关闭定时器

语法：

let 变量名 = setInterval(函数,间隔时间);
clearInterval(变量名);

clearInterval() 方法用于关闭一个已经开启的定时器，它接受一个参数：要关闭的定时器的ID。这个ID就是setInterval()` 方法返回的那个唯一的定时器ID。

例如，下面的代码展示了如何开启一个定时器并在5秒后关闭它：

let timerId = setInterval(function() {
  console.log("Hello, World!");
}, 1000);

setTimeout(function() {
  clearInterval(timerId);
  console.log("Timer stopped.");
}, 5000);

案例：阅读注册协议

需求：按钮5秒之后才可以使用

let i = 5;
      const btn = document.querySelector(".btn");

      // 使用setInterval方法每隔1000毫秒（1秒）执行一次函数
      let n = setInterval(function () {
        // 每次执行时，i的值减1
        i--;
        // 如果i的值等于0
        if (i === 0) {
          // 清除之前设置的定时器，确保后续不再重复执行
          clearInterval(n);
          // 将按钮设为可用状态
          btn.disabled = false;
          // 设置按钮的文本内容为"同意"
          btn.innerHTML = "同意";
        } else {
          // 如果i的值不等于0，设置按钮的文本内容为"我已阅读用户协议(当前的i值)"
          btn.innerHTML = `我已阅读用户协议(${i})`;
        }
      }, 1000);