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

目录

一、Web API

1、作用和分类

2、DOM是什么

3、DOM树

4、DOM对象

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

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

二、获取DOM对象

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

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

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

2、其他获取DOM元素方法

三、操作元素内容

1、元素innerText 属性

2、元素innerHTML 属性

四、操作元素属性

1、操作元素常用属性

（1）图片随机更换

2、操作元素样式属性

（1）通过 style 属性操作CSS

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

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

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

3、操作 表单元素属性

4、自定义属性

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

1、定时器函数介绍

2、定时器函数基本使用

（1）开启定时器

（2）关闭定时器

3、阅读注册协议案例

4、轮播图定时器

一、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')// 根据标签获取一类元素获取页面所有divdocument.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 是个关键字 我们用 classNamediv.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)  // 1console.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 = falsebtn.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， 数组的长度就是 8if (i >= sliderData.length) {i = 0}// console.log(i)// console.log(sliderData[i])// 更换图片路径  img.src = sliderData[i].url// 把字写到 p里面p.innerHTML = sliderData[i].title// 小圆点// 先删除以前的activedocument.querySelector('.slider-indicator .active').classList.remove('active')// 只让当前li添加activedocument.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}, 1000)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/52574.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Spring（2）

Spring（2）

目录 一、使用注解开发 1.1 主要注解 1.2 衍生注解 1.3 xml与注解 二、使用Java的方式配置Spring 三、代理模式 3.1 静态代理 3.1.1 角色分析 3.1.2 代码步骤 3.1.3 优点 3.1.4 缺点 3.2 动态代理 3.2.1 代码步骤 四、AOP 4.1 使用Spring的API接口 4.2 使用自定义…
阅读更多...
8月15日

8月15日

上午开会 rag继续 异构大模型 狂野飙车9之前的账号终于找回来了 下午 关于minicpm的代码 minicpm-v 大模型预训练论文&方法总结 - 知乎 (zhihu.com) 这里有讲解的代码 发现还是先推荐把llava的掌握好了之后再看minicpm 多模态大模型LLaVA模型讲解——transformers源…
阅读更多...
YoloV8改进策略：卷积篇|ACConv2d模块在YoloV9中的创新应用与显著性能提升|简单易用_即插即用

YoloV8改进策略：卷积篇|ACConv2d模块在YoloV9中的创新应用与显著性能提升|简单易用_即插即用

摘要 在本文中&#xff0c;我们创新性地将ACConv2d模块引入到YoloV9目标检测模型中&#xff0c;通过对YoloV9中原有的Conv卷积层进行替换&#xff0c;实现了模型性能的大幅提升。ACConv2d模块基于不对称卷积块&#xff08;ACB&#xff09;的设计思想&#xff0c;利用1D非对称卷…
阅读更多...
sql server导入mysql，使用工具SQLyog

sql server导入mysql，使用工具SQLyog

概述 需要将sql server的数据导入到mysql中&#xff0c;由于2种数据库存在各种差异&#xff0c;比如表字段类型就有很多不同&#xff0c;因此需要工具来实现。 这里使用SQLyog来实现。 SQLyog安装 安装过程参考文档&#xff1a;https://blog.csdn.net/Sunshine_liang1/article/…
阅读更多...
SQL Server事务日志文件过大的处理方法

SQL Server事务日志文件过大的处理方法

正常情况下事务日志文件过大时可以右点数据库--任务--收缩--文件--选择日志进行收缩&#xff0c;从而达到减小事务日志文件的目的。 但在有些情况下没有达到执行收缩条件&#xff0c;无法执行收缩&#xff1a; 1、数据库恢复模式 为 完整恢复模式&#xff08;FULL&#xff09…
阅读更多...
c++,python实现网络爬虫

c++,python实现网络爬虫

前言&#xff1a; 社交网络中用户生成的海量数据&#xff0c;社交网络数据的多样性和复杂性 如何高效地从海量的数据中获取和处理我们需要的信息资源&#xff1f; 该微博爬虫能够从社交网络平台中地提取文本、图片和用户之间的转发关系&#xff0c;并将这些数据结构化存储到…
阅读更多...
【图论】Tarjan算法（强连通分量）

【图论】Tarjan算法（强连通分量）

一、Tarjan算法简介 Tarjan算法是一种由美国计算机科学家罗伯特塔杨&#xff08;Robert Tarjan&#xff09;提出的求解有向图强连通分量的线性时间的算法。 二、强连通分量的概念 在有向图 G G G 中&#xff0c;如果任意两个不同的顶点相互可达&#xff0c;则称该有向图是强…
阅读更多...
Android高级UI --- canvas

Android高级UI --- canvas

前言 我们先来聊聊&#xff0c;在我们生活中如何绘制一张如下的图。 我们需要两样东西来绘制&#xff1a; 一张纸&#xff08;Android 中的 canvas&#xff09;&#xff1a;用来承载我们绘制的内容。一支笔&#xff08;Android 中的 paint&#xff09;&#xff1a;负责绘制内…
阅读更多...
（QT-UI）十四、在时间轴上绘制一段段时间片

（QT-UI）十四、在时间轴上绘制一段段时间片

本系列预计实现 ①刻度上方文字显示&#xff0c; ②时间轴拖动效果&#xff0c; ③时间轴刻度缩放&#xff0c; ④时间轴和其他控件联动显示&#xff0c; ⑤鼠标放置到时间轴&#xff0c;显示具体时间。 ⑥通过定时器&#xff0c;实时更新时间轴 ⑦时间轴上绘制时间片 完…
阅读更多...
如何上传NPM包：一步步指南

如何上传NPM包：一步步指南

在JavaScript和Node.js开发中&#xff0c;NPM&#xff08;Node Package Manager&#xff09;是一个广泛使用的包管理工具。通过NPM&#xff0c;我们可以方便地管理项目中的依赖库&#xff0c;也可以将自己的代码打包发布给其他开发者使用。这篇文章将详细介绍如何将你自己的代码…
阅读更多...
电商API 接口的发展会对传统行业产生哪些影响

电商API 接口的发展会对传统行业产生哪些影响

API 接口的发展会给传统行业带来多方面的影响&#xff0c;具体如下&#xff1a; 提升运营效率与生产力 优化业务流程&#xff1a;以制造业为例&#xff0c;通过 API 接口可将生产设备、管理系统等进行连接&#xff0c;实现设备数据的自动采集与传输&#xff0c;实时监控生产状态…
阅读更多...
004、架构_配置文件_总览

004、架构_配置文件_总览

配置文件用来配置各模块运行时使用的参数，GoldenDB数据库的配置文件以及文件说明参见 下表： 模块/服务器名称配置文件文件路径配置文件功能CNproxy.ini os.ini dis_info_load.ini$HOME/etc/proxy.ini 配置 CN 运行参数。 os.ini 配置链路信息 ，以及模块启动信 息。 dis_info…
阅读更多...
linux系统使用 docker 来部署web环境 nginx+php7.4 并配置称 docker-compose-mysql.yml 文件

linux系统使用 docker 来部署web环境 nginx+php7.4 并配置称 docker-compose-mysql.yml 文件

Docker是一个开源的容器化平台&#xff0c;旨在简化应用程序的创建、部署和管理。它基于OS-level虚拟化技术&#xff0c;通过将应用程序和其依赖项打包到一个称为容器的标准化单元中&#xff0c;使得应用程序可以在任何环境中快速、可靠地运行。 Docker的优势有以下几个方面&a…
阅读更多...
重发布实验

重发布实验

一、实验拓扑 二、实验需求 1.如图搭建网络拓扑&#xff0c;所有路由器各自创建一个环回接 口&#xff0c;合理规划IP地址 2.R1-R2-R3-R4-R6之间使用OSPF协议&#xff0c;R4-R5-R6之间使用 RIP协议 3.R1环回重发布方式引入OSPF网络 4.R4/R6上进行双点双向重发布 5.分析网络中出…
阅读更多...
VScode | 我想推荐这些插件，好用

VScode | 我想推荐这些插件，好用

系列文章目录 本系列文章主要分享作位前端开发的工具之------VScode的使用分享。 VScode | 我的常用插件分享_vscode 别名跳转-CSDN博客 VScode | 我的常用代码片段&#xff0c;提升开发速度-CSDN博客 VScode | 我会设置文件夹右键用VScode打开_vscode右键打开文件夹-CSDN博…
阅读更多...
如何使用ssm实现基于ssm的“游侠”旅游信息管理系统

如何使用ssm实现基于ssm的“游侠”旅游信息管理系统

TOC ssm190基于ssm的“游侠”旅游信息管理系统jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#x…
阅读更多...
【持续更新】nPlayer Premium v1.7.7.7-191219安卓知名播放器最新免费高级修改版

【持续更新】nPlayer Premium v1.7.7.7-191219安卓知名播放器最新免费高级修改版

nPlayer&#xff0c;也是安卓上一个非常强大的播放器。 ▨ 高级版亮点功能&#xff1a; • 多语言字幕支持&#xff1a;无论是电影还是电视剧&#xff0c;都能轻松添加多种语言字幕&#xff0c;让观影体验更上一层楼 • Chromecast 投屏&#xff1a;借助 Chromecast&#xff0…
阅读更多...
工商业光伏：从传统行业迈向数字化的第一步

工商业光伏：从传统行业迈向数字化的第一步

现在每个行业都需要和互联网挂上关系&#xff0c;光伏行业也不例外&#xff0c;从传统的行业思维迈向数字化&#xff0c;户用光伏是比较成功的&#xff0c;户用光伏一直都是代理模式&#xff0c;头部平台会提供一个平台系统来管理下面代理商的业务或者电站&#xff0c;但是呢&a…
阅读更多...
RocketMQ~刷盘机制、主从复制方式、存储机制

RocketMQ~刷盘机制、主从复制方式、存储机制

刷盘机制 生产者发布MQ给Brocker&#xff0c;Brocker在存储这些数据的时候&#xff0c;需要进行刷盘&#xff0c;分为同步刷盘和异步刷盘。 在同步刷盘中需要等待一个刷盘成功的ACK&#xff0c;同步刷盘对MQ消息可靠性来说是一种不错的保障&#xff0c;但是性能上会有较大影响…
阅读更多...
GoWeb 设置别名和多环境配置

GoWeb 设置别名和多环境配置

别名 vite.config.ts中添加代码如下即可 //设置别名resolve: {alias: {"": path.resolve(process.cwd(),"src"),//用替代src}}随后即可使用 配置多环境 vite.config.ts中添加代码如下 envDir: ./viteenv,//相对路径随后在项目根目录创建对应的viteenv…
阅读更多...
最新文章

Copyright @ 2022~2023