JavaScript学习文档（7）：Web API、获取DOM对象、操作元素内容、元素属性、定时器-间歇函数

最新推荐文章于 2024-10-02 21:20:07 发布

码农_小文

最新推荐文章于 2024-10-02 21:20:07 发布

阅读量1k

点赞数 19

文章标签：学习

本文链接：https://blog.csdn.net/m0_58433849/article/details/141572541

版权

（2）操作类名(className) 操作CSS

（3）通过 classList 操作类控制CSS

一、Web API

1、作用和分类

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

2、DOM是什么

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

3、DOM树

DOM树是什么

（1）将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树

（2）描述网页内容关系的名词

（3）作用：文档树直观的体现了标签与标签之间的关系

4、DOM对象

（1）DOM对象如何创建的?

浏览器根据html标签生成的JS对象（DOM对象)
DOM的核心就是把内容当对象来处理

（2）DOM对象怎么创建的?

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

  <div>123</div>
  <script>
    const div = document.querySelector('div')
    // 打印对象
    console.dir(div)  // dom 对象
  </script>

二、获取DOM对象

1、根据CSS选择器来获取DOM元素

（1）选择匹配的第一个元素

语法：

document.querySelector('css选择器')

（2）选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

得到的是一个伪数组：

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

    // 1. 获取匹配的第一个元素
    // const box = document.querySelector('div')
    // const box = document.querySelector('.box')
    // console.log(box)
    // const nav = document.querySelector('#nav')
    // console.log(nav)
    // nav.style.color = 'red'
    // 1. 我要获取第一个小 ulli
    // const li = document.querySelector('ul li:first-child')
    // console.log(li)
    // 2. 选择所有的小li
    // const lis = document.querySelectorAll('ul li')
    // console.log(lis)

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

2、其他获取DOM元素方法

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

三、操作元素内容

1、元素innerText 属性

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

2、元素innerHTML 属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

示例代码如下：

<div class="box">我是文字的内容</div>
  <script>
    // const obj = {
    //   name: 'pink'
    // }
    // console.log(obj.name)
    // obj.name = 'red'
    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. 修改文字内容  对象.innerText 属性
    // console.log(box.innerText)  // 获取文字内容
    // // box.innerText = '我是一个盒子'  // 修改文字内容
    // box.innerText = '<strong>我是一个盒子</strong>'  // 不解析标签

    // 3. innerHTML 解析标签
    console.log(box.innerHTML)
    // box.innerHTML = '我要更换'
    box.innerHTML = '<strong>我要更换</strong>'
  </script>

四、操作元素属性

1、操作元素常用属性

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

对象.属性 = 值

（1）图片随机更换

需求：当我们刷新页面，页面中的图片随机显示不同的图片

①：随机显示，则需要用到随机函数

②：更换图片需要用到图片的 src 属性，进行修改

示例代码如下：

  <img src="./images/1.webp" alt="">
  <script>
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    // 1. 获取图片对象
    const img = document.querySelector('img')
    // 2. 随机得到序号
    const random = getRandom(1, 6)
    // 3. 更换路径
    img.src = `./images/${random}.webp`
  </script>

2、操作元素样式属性

（1）通过 style 属性操作CSS

语法：

对象.style.样式属性 = 值

示例代码如下：

    // 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'

案例：页面随机更换背景图片

需求：当我们刷新页面，页面中的背景图片随机显示不同的图片

示例代码如下：

  <style>
    body {
      background: url(./images/desktop_1.jpg) no-repeat top center/cover;
    }
  </style>


  <script>
    // console.log(document.body)
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    // 随机数
    const random = getRandom(1, 10)
    document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
  </script>

（2）操作类名(className) 操作CSS

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

元素.className = ' active '

    // 1. 获取元素
    const div = document.querySelector('div')
    // 2.添加类名  class 是个关键字 我们用 className
    div.className = 'nav box'

（3）通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：

    // 通过classList添加
    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. 修改样式
    // 2.1 追加类 add() 类名不加点，并且是字符串
    // box.classList.add('active')
    // 2.2 删除类  remove() 类名不加点，并且是字符串
    // box.classList.remove('box')
    // 2.3 切换类  toggle()  有还是没有啊， 有就删掉，没有就加上
    box.classList.toggle('active')

注意：使用 className 和classList的区别？

修改大量样式的更方便
修改不多样式的时候方便
classList 是追加和删除不影响以前类名

3、操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性
比如： disabled、checked、selected

示例代码如下：

// 1 获取元素
    // const uname = document.querySelector('input')
    // 2. 获取值  获取表单里面的值 用的  表单.value
    // console.log(uname.value) // 电脑
    // console.log(uname.innerHTML)  innertHTML 得不到表单的内容
    // 3. 设置表单的值
    // uname.value = '我要买电脑'
    // console.log(uname.type)
    // uname.type = 'password'
    // 1. 获取
    const ipt = document.querySelector('input')
    // console.log(ipt.checked)  // false   只接受布尔值
    ipt.checked = true
    // ipt.checked = 'true'  // 会选中，不提倡  有隐式转换
    // 1.获取
    const button = document.querySelector('button')
    // console.log(button.disabled)  // 默认false 不禁用
    button.disabled = true   // 禁用按钮

4、自定义属性

标准属性：标签天生自带的属性比如class id title等, 可以直接使用点语法操作比如： disabled、checked、 selected
自定义属性：在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获

示例代码如下：

  <div data-id="1" data-spm="不知道">1</div>
  <div data-id="2">2</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)  // 1
    console.log(one.dataset.spm)  // 不知道
  </script>

五、定时定时器-间歇函数

1、定时器函数介绍

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发 l
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种，今天我先讲间歇函数

2、定时器函数基本使用

（1）开启定时器

setInterval(函数, 间隔时间)

作用：每隔一段时间调用这个函数
间隔时间单位是毫秒

（2）关闭定时器

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

3、阅读注册协议案例

需求：按钮60秒之后才可以使用（时间可以修改）

分析：

①：开始先把按钮禁用（disabled 属性）

②：一定要获取元素

③：函数内处理逻辑

秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器里面文字变为同意最后

示例代码如下：

<textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(5)</button>
    <script>
        // 1. 获取元素
        const btn = document.querySelector('.btn')
        // console.log(btn.innerHTML)  butto按钮特殊用innerHTML
        // 2. 倒计时
        let i = 5
        // 2.1 开启定时器
        let n = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                clearInterval(n)  // 关闭定时器
                // 定时器停了，我就可以开按钮
                btn.disabled = false
                btn.innerHTML = '同意'
            }
        }, 1000)

    </script>

4、轮播图定时器

需求：每隔一秒钟切换一个图片

分析：

①：准备一个数组对象，里面包含详细信息（素材包含）

②：获取元素

③：设置定时器函数

设置一个变量++
找到变量对应的对象
更改图片、文字信息
激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类

④：处理图片自动复原从头播放（放到变量++后面，紧挨）

如果图片播放到最后一张，就是大于等于数组的长度则把变量重置为0

示例代码如下：

    // 1. 获取元素 
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    let i = 0  // 信号量 控制图片的张数
    // 2. 开启定时器
    // console.log(sliderData[i])  拿到对应的对象啦
    setInterval(function () {
      i++
      // 无缝衔接位置  一共八张图片，到了最后一张就是 8， 数组的长度就是 8
      if (i >= sliderData.length) {
        i = 0
      }
      // console.log(i)
      // console.log(sliderData[i])
      // 更换图片路径  
      img.src = sliderData[i].url
      // 把字写到 p里面
      p.innerHTML = sliderData[i].title
      // 小圆点
      // 先删除以前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      // 只让当前li添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)