【web APIs】1、（学习笔记）有案例！

TechMasterPlus

已于 2024-02-27 11:07:07 修改

阅读量1.2k

点赞数 38

文章标签：前端学习笔记 web3

于 2024-02-26 20:42:35 首次发布

本文链接：https://blog.csdn.net/qq_46644680/article/details/136307850

版权

本文详细介绍了ECMAScript在浏览器中的应用，包括DOM和BOM的概念，以及如何通过DOM对象进行内容修改、属性设置、样式控制、类名操作、表单元素交互和自定义属性使用。还展示了如何使用setInterval实现间歇函数，以及三个实际案例：随机抽奖、用户注册倒计时和轮播图定时播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。

一、概念

1.ECMAScript 与 JavaScript 的关系
在这里插入图片描述
ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。

2.DOM 树
在这里插入图片描述

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
【根节点】特指 html 标签。
其它…

二、使用步骤

1.获取DOM对象

querySelector 满足条件的第一个元素
querySelectorAll 满足条件的元素集合返回伪数组
了解其他方式
getElementById
getElementsByTagName

代码如下（示例）：

const p = document.querySelector('p')  // 获取第一个p元素
const lis = document.querySelectorAll('li')  // 获取第一个p元素

2.操作元素内容

通过修改 DOM 的文本内容，动态改变网页的内容。

innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

代码如下（示例）：

intro.innerHTML = '嗨~ 我叫韩梅梅！'
intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'

3.属性修改

3.1.常用属性修改

直接能过属性名修改，最简洁的语法

 pic.src = './images/lion.webp'
 pic.width = 400;
 pic.alt = '图片不见了...'

3.2.控制样式属性

应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。如要遇到 css 属性中包含字符 - 时，要将 -
去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor

// 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.style.color = 'red'
    box.style.width = '300px'
// css 属性的 - 连接符与 JavaScript 的 减运算符
// 冲突，所以要改成驼峰法
    box.style.backgroundColor = 'pink'

3.3.操作类名(className) 操作CSS

// 获取 DOM 节点
     const box = document.querySelector('.intro')
     box.className = 'pink'
     let box = document.querySelector('div')
// add是个方法 添加  追加
     box.classList.add('active')
// remove() 移除 类
     box.classList.remove('one')
// 切换类
     box.classList.toggle('one')

3.4.操作表单元素属性

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

// 1. 获取元素
        let input = document.querySelector('input')
// 2. 取值或者设置值  得到input里面的值可以用 value
        // console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'

// 2. 启用按钮
        let btn = document.querySelector('button')
// disabled 不可用   =  false  这样可以让按钮启用
        btn.disabled = false
 // 3. 勾选复选框
        let checkbox = document.querySelector('.agree')
        checkbox.checked = false

3.5.自定义属性

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

 <div data-id="1"> 自定义属性 </div>
    <script>
        // 1. 获取元素
        let div = document.querySelector('div')
        // 2. 获取自定义属性值
        console.log(div.dataset.id)
    </script>

4.间歇函数

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

<script>
  // 1. 定义一个普通函数
  function repeat() {
     
    console.log('不知疲倦的执行下去....')
  }

  // 2. 使用 setInterval 调用 repeat 函数
  // 间隔 1000 毫秒，重复调用 repeat
  setInterval(repeat, 1000)
</script>

5.案例举例

5.1.随机抽奖

<!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>年会抽奖</title>
  <style>
    .wrapper {
     
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <strong>传智教育年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id