Web APIs

前端-公瑾

已于 2022-06-05 20:33:06 修改

阅读量118

点赞数 1

文章标签： javascript web

于 2022-04-06 20:02:47 首次发布

本文链接：https://blog.csdn.net/qq_49029709/article/details/123997116

版权

文章目录

学习目标
一、Web API 基本认知
二、获取DOM对象
三、操作元素内容
四、操作元素属性
五、定时器-间歇函数
总结

学习目标

1. 掌握DOM属性操作，完成元素内容设置

2. 元素属性设置，控制元素样式

一、Web API 基本认知

变量声明

建议：const优先，尽量使用const，原因是：

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

const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化

但是对于引用数据类型，const声明的变量，里面存的不是值，不是值，不是值，是地址。

作用和分类

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

分类：DOM (文档对象模型)、BOM（浏览器对象模型）

在这里插入图片描述
什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用：开发网页内容特效和实现用户交互

DOM树

DOM是什么

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

在这里插入图片描述
DOM对象（重要）

DOM对象：浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

DOM的核心思想 ：
把网页内容当做对象来处理

document对象：
是DOM里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write（）
所以它提供的属性和方法都是用来访问和操作网页内容的

二、获取DOM对象

目标：能查找/获取DOM对象

提问：我们想要操作某个标签首先做什么？
 肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作

查找元素DOM元素就是利用 JS 选择页面中标签元素

学习路径：

根据CSS选择器来获取DOM元素 (重点)
其他获取DOM元素方法（了解）

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

1. 选择匹配的第一个元素

语法：
在这里插入图片描述
参数：包含一个或多个有效的css选择器字符串

返回值： css选择器匹配的第一个元素，一个HTMLELement对象。
如果没有匹配到，则返回null。

2. 选择匹配的多个元素

语法：
在这里插入图片描述
参数：包含一个或多个有效的css选择器字符串

返回值：css选择器匹配的NodeList 对象集合
例如：
在这里插入图片描述
这得到的是一个伪数组：
有长度有索引号的数组
但是没有pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。

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

三、操作元素内容

目标：能够修改元素的文本更换内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。

就是操作对象使用的点语法。

如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
学习路径：

1. 对象.innerText 属性

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

2. 对象.innerHTML 属性

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

四、操作元素属性

操作元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片

最常见的属性比如： href、title、src 等

语法：
在这里插入图片描述
操作元素样式属性

通过 style 属性操作CSS

语法：
在这里插入图片描述

操作类名(className) 操作CSS

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

语法：
在这里插入图片描述
注意：

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

通过 classList 操作类控制CSS

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

语法：
在这里插入图片描述
1. 使用 className 和classList的区别？
修改大量样式的更方便
修改不多样式的时候方便
classList 是追加和删除不影响以前类名

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别

获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
在这里插入图片描述
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移
除了该属性：比如： disabled、checked、selected

自定义属性

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
在这里插入图片描述

五、定时器-间歇函数

目标：能够说出定时器函数在开发中的使用场景

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

定时器函数可以开启和关闭定时器

开启定时器

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

在这里插入图片描述
一般不会刚创建就停止，而是满足一定条件再停止

注意：

函数名字不需要加括号
定时器返回的是一个id数字

需求：每隔一秒钟切换一个图片
分析：
①：准备一个数组对象，里面包含详细信息（素材包含）
②：获取元素
③：设置定时器函数
设置一个变量++
找到变量对应的对象
更改图片、文字信息
激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
④：处理图片自动复原从头播放（放到变量++后面，紧挨）
如果图片播放到最后一张，就是大于等于数组的长度
则把变量重置为0

<!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>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script src="./public.js"></script>
  <script>
    // 1. 初始数据
    const data = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    // 2.获取对应的元素
    const img = document.querySelector('.slider-wrapper img')
    const footer = document.querySelector('.slider-footer')
    const p = document.querySelector('.slider-footer p')

    // 3.定义一个变量 i = 0
    let i = 0
    setInterval(function () {
      i++
      // 如果i > 7
      if (i > data.length - 1) {
        i = 0
      }
      // 根据i获取数组里面的元素 对象
      const obj = data[i]
      // 更换图片的src属性值
      img.src = obj.url
      // 更改footer的背景颜色
      footer.style.backgroundColor = obj.color
      // 往p标签里面写入内容
      p.innerHTML = obj.title
      // 让当前的li有高亮的效果 其他的li身上没有高亮的效果
      // 1.移除 其他小li身上有active这个类名 通过css选择器找到 有active 这个标签 将其移除即可
      document.querySelector('.slider-indicator li.active').classList.remove('active')
      // console.log(document.querySelector('.slider-indicator li.active'))
      // 2.给自己添加active的类名
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')

    }, 1000)
  </script>
</body>

</html>

总结

在这里插入图片描述

前端-公瑾

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web APIs

文章目录学习目标一、Web API 基本认知二、获取DOM对象三、操作元素内容四、操作元素属性五、定时器-间歇函数总结学习目标1. 掌握DOM属性操作，完成元素内容设置2. 元素属性设置，控制元素样式一、Web API 基本认知变量声明建议：const优先，尽量使用const，原因是：const 语义化更好很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？实际开发中也是，比如react框架，基本constconst 声明的值不能更改，而且const声明变量的时
复制链接

扫一扫