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

本文主要是介绍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)

这篇关于JavaScript学习文档(7):Web API、获取DOM对象、操作元素内容、元素属性、定时器-间歇函数的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1110484

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

Python ZIP文件操作技巧详解

《PythonZIP文件操作技巧详解》在数据处理和系统开发中,ZIP文件操作是开发者必须掌握的核心技能,Python标准库提供的zipfile模块以简洁的API和跨平台特性,成为处理ZIP文件的首选... 目录一、ZIP文件操作基础三板斧1.1 创建压缩包1.2 解压操作1.3 文件遍历与信息获取二、进阶技

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二