当前位置： 首页 > news >正文

WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

news 2026/2/10 8:59:42

文章目录

  • Web API基本认知
  • 一、 变量声明
  • 二、 DOM
    • 1. DOM 树
    • 2. DOM对象
    • 3. 获取DOM对象
      • (1)、选择匹配的第一个元素
      • (2)、选择匹配多个元素
  • 三、 操作元素
    • 1. 操作元素内容
    • 2. 操作元素属性
      • (1)、常用属性（href之类的）
      • (2)、通过style属性操作CSS
      • (3)、通过类名(className)操作CSS
      • (4)、通过classList操作控制CSS
      • (5)、操作表单元素属性
      • (6)、自定义属性
  • 四、 定时器-间歇函数
    • 1. 开启定时器
    • 2. 关闭定时器

Web API基本认知

web API包括DOM和BOM

一、 变量声明

建议：const优先，尽量使用const。有了 变量先给const，后面发现是要被修改的，再改为let。

  • const 声明的变量的值不能更改，而且const声明变量的时候需要里面进行初始化
  • 但是对于引用数据类型，const声明的变量，里面存的不是值，是地址。
    在这里插入图片描述

什么时候使用let声明变量？

  • 如果基本数据类型的值或者引用数据类型的地址发生变化的时候，需要用let

案例一：问以下内容可不可以把let 改为 const？

    let num1 = +prompt('输入第一个数值')let num2 = +prompt('输入第二个数值')alert(`两者相加的结果是：${num1 + num2}`)let person = {uname: 'Tom',age: 19}person.address = '山东'

可以，因为变量的内容没发生变化

案例二：
在这里插入图片描述

二、 DOM

DOM–文档对象模型，操作网页内容，实现用户交互

1. DOM 树

HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，直观的体现了标签与标签之间的关系。
在这里插入图片描述

2. DOM对象

DOM对象怎么创建的？

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

html里的标签，对应到dom树里，是一个个的JS对象。比如div在html里是标签，通过JS获取过来，在dom树里，div是个对象，div不同的属性就是对象的属性。

document对象

  • 是 DOM 里提供的一个对象（是dom树里最大的对象）
  • 网页所有内容都在document里面

3. 获取DOM对象

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

(1)、选择匹配的第一个元素

document.querySelector('css选择器')  //在style里怎么写css选择器，这里就可以怎么填

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

(2)、选择匹配多个元素

document.querySelectorAll('css选择器')

返回值：CSS选择器匹配的NodeList 对象集合。得到的一个伪数组，有长度、索引号的数组。但是不能用push等数组方法。

<body><!-- 练习： 依次输出3个li的DOM对象 --><ul class="nav"><li>我的首页</li><li>产品介绍</li><li>联系方式</li></ul><script>// 2. 选择匹配的多个元素 querySelectorAll 返回伪数组const lis = document.querySelectorAll('ol li')console.log(lis);// 练习--依次输出3个li的DOM对象const navList = document.querySelectorAll('.nav li')for (let index = 0; index < navList.length; index++) {console.log(navList[index]);}</script>
</body>

在这里插入图片描述

三、 操作元素

1. 操作元素内容

  • innerText：修改文本内容，不解析标签
  • innerHTML：修改文本内容，解析标签
<body><div class="box">这是文本内容</div><script>// 1. innerText 不解析标签const box = document.querySelector('.box')box.innerText = '改成innerText'// 2. innerHTML 可解析标签box.innerHTML = '改成inner HTML'box.innerHTML = '<strong>改成inner HTML</strong>'</script>
</body>

2. 操作元素属性

(1)、常用属性（href之类的）

常用属性比如：href，title，src
语法：对象.属性 = 值

(2)、通过style属性操作CSS

语法：对象.style.样式属性 = 值

注：
  如果属性有-连接符，需要转换为小驼峰命名，比如background-color,此处需写成backgroundColor；
  赋值的时候不要忘记加css单位

<body><div class="box">div</div><script>//获取对象const box = document.querySelector('.box')box.style.width = '200px'box.style.height = '200px'box.style.backgroundColor = 'skyblue'</script>
</body>

(3)、通过类名(className)操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，可以通过借助于css类名的形式。
语法：对象.className = '类名'
className的本质是替换类名，如果需要添加类名，需要保留之前的类名

<style>.test {width: 200px;height: 200px;background-color: greenyellow;}.test2 {width: 250px;height: 250px;color: purple;}
</style>
<body><div class="test">className测试</div><script>// className操作CSS// (1)获取元素const testBox = document.querySelector('.test')// (2)修改类名,覆盖原来的类名testBox.className = 'test2'// 若仍要保持原来的属性testBox.className = 'test test2'</script>
</body>

(4)、通过classList操作控制CSS

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

// 追加一个类
testBox.classList.add('类名')
// 删除一个类
testBox.classList.remove('类名')
// 切换一个类，有则删掉，没有就加上
testBox.classList.toggle('类名')

toggle：类似于开关，可用于切换背景模式(白天，黑夜)

(5)、操作表单元素属性

  • 获取表单值用value（innerHTML获取不到表单的值）
  • 设置表单属性： DOM对象.属性名 = 值
  • 表单中添加就有效果,移除就没有效果的属性一律使用布尔值表示。如果为true 代表添加了该属性 如果是false 代表移除了该属性，比如disabled，checked，selected.
<body><input type="text" value="computer"><br><br><input type="checkbox" id="hobby" name="喝酒" checked> 喝酒<input type="checkbox" id="hobby" name="抽烟"> 抽烟<input type="checkbox" id="hobby" name="烫头"> 烫头<br><br><input type="button" disabled class="buton"><script>// 获取表单的值  value属性const ipt = document.querySelector('input')console.log(ipt.value); // computer// console.log(ipt.innerHTML);  innerHTML获取不到表单的值// 设置表单的值ipt.value = 'tree'ipt.type = 'password'console.log(ipt.value); // tree// 复选框const hobbys = document.querySelectorAll('#hobby')hobbys[0].checked = false// 字符串只有null或空字符串会被解析为false,这里只接受boolean值,发生了隐式转换！hobbys[1].checked = 'true'// 按钮disabledconst buton = document.querySelector('.buton')buton.disabled = false</script>
</body>

(6)、自定义属性

data-自定义属性，注意要以data- 开头。DOM对象上通过dataset对象获取自定义的属性

<body><!-- data-自定义属性 --><div data-id="1" data-name="nothing">1</div><div data-id="2">2</div><div data-id="3">3</div><div data-id="4">4</div><div data-id="5">5</div><script>const one = document.querySelector('div')console.dir(one);console.log(one.dataset.id); // 1console.log(one.dataset.name); // nothing</script>
</body>

在这里插入图片描述

四、 定时器-间歇函数

1. 开启定时器

语法： setInterval(函数名,间隔时间)

  • 该函数返回的是该定时器的id。每隔一段时间调用这个函数
  • 参数间隔时间的单位是毫秒
  • 函数不是立即执行，而是过了间隔时间后，执行该函数
    • 也就是：间隔时间，执行函数，间隔时间，执行函数
    • 而不是：执行函数，间隔时间，执行函数，间隔时间
// 匿名函数
let num = setInterval(function () {
console.log('3秒钟执行一次');
}, 1000)// 不用匿名函数
function fn () {
console.log('1S执行一次');
}
let num2 = setInterval(fn, 1000) //如果是写fn()的话,则会出错,因为fn()是调用函数

2. 关闭定时器

语法：clearInterval(定时器id)

// 关闭定时器2
clearInterval(num2)

相关文章：

WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

文章目录 Web API基本认知一、 变量声明二、 DOM1. DOM 树2. DOM对象3. 获取DOM对象(1)、选择匹配的第一个元素(2)、选择匹配多个元素 三、 操作元素1. 操作元素内容2. 操作元素属性(1)、常用属性&#xff08;href之类的&#xff09;(2)、通过style属性操作CSS(3)、通过类名(cl…...

编程日记 2024/9/13 20:07:22

若依框架开发

若依环境 介绍 ‌若依是一款快速开发平台(低代码)&#xff0c;用于快速构建企业级后台管理系统&#xff0c;它提供了许多常用的功能模块和组件&#xff0c;包括权限管理、代码生成、工作流、消息中心等 官方地址: https://www.ruoyi.vip/ ‌基于Spring Boot和Spring Cloud‌…...

编程日记 2024/9/13 20:06:21

局域网windows下使用Git

windows下如何使用局域网进行git部署 准备工作第一步 &#xff0c;ip设置设置远程电脑的ip设置&#xff0c;如果不会设置请点击[这里](https://blog.csdn.net/Black_Friend/article/details/142170705?spm1001.2014.3001.5501)设置本地电脑的ip&#xff1a;验证 第二步&#x…...

编程日记 2024/9/13 20:05:20

Redis访问工具

使用Redis存储缓存数据&#xff0c;如何通过Java去访问Redis&#xff1f; 防止后面看晕&#xff0c;先来张图。 1. Redis的客户端库 Redis的客户端库是Redis官方提供的&#xff0c;用于让Java等编程语言与Redis服务器进行通信的工具包。常见的Redis客户端库有多个&#xff0c…...

编程日记 2024/9/13 20:04:17

vue3+ant design vue动态实现级联菜单~

1、这里使用的是ant design vue 的TreeSelect 树选择来实现的。 <a-form-item name"staffDept" label"责任部门" labelAlign"left"><a-tree-selectv-model:value"formState.staffDept"show-search//允许在下拉框中添加搜索框…...

编程日记 2024/9/13 20:03:14

软件可维护性因素例题

答案&#xff1a;C 知识点&#xff1a; 系统可维护性因素决定 可理解性 可测试性 可修改性 选项C可移植性错误...

编程日记 2024/9/13 20:02:13

git的一些操作

参考视频: git分支详解&#xff08;约10分钟掌握分支80%操作&#xff09;&#xff0c;git-branch&#xff0c;git分支管理&#xff0c;git分支操作&#xff0c;git分支基础和操作&#xff0c;2023年git基础使用教程 不同的分支相当于不同的平行世界 合并分支 两个分支是我们项…...

编程日记 2024/9/13 19:59:10

opencv实战项目二十三：基于BEBLID描述符的特征点匹配实现表盘校正

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、特征点匹配介绍二、特征点检测三、特征描述符计算四&#xff0c;描述符的匹配筛选五&#xff0c;根据匹配结果映射图片六&#xff0c;整体代码&#xff1a;…...

编程日记 2024/9/13 19:58:09

数据库是全表扫描是怎么扫描法？

全表扫描是数据库服务器用来搜寻表的每一条记录的过程&#xff0c;直到所有符合给定条件的记录返回为止。‌ 在执行全表扫描时&#xff0c;数据库会逐行扫描表中的所有记录&#xff0c;以找到符合查询条件的记录。这种扫描方式适用于没有为查询条件中的字段建立索引的情况。全…...

编程日记 2024/9/13 19:56:07

认准这10款人力资源系统，90%的企业都在用！

本文将为大家推荐十款主流的人力资源系统&#xff0c;为企业选型提供参考&#xff01; 想象一下&#xff0c;企业在不断发展壮大的过程中&#xff0c;员工数量逐渐增多&#xff0c;人事管理变得越来越复杂。如果没有一个高效的人力资源系统&#xff0c;就如同在大海中航行却没有…...

编程日记 2024/9/13 19:55:06

2024年我的利基出版转型——新战略与重点解析

这篇文章酝酿已久。这是我在网络出版策略上投入数百小时后得出的成果。 像我们这个行业的许多人一样&#xff0c;即网络出版行业&#xff0c;我一直忙于彻底改造整个出版业务。 这是一段漫长的旅程&#xff0c;这是肯定的。 我预感在此过程中还会有更多调整&#xff0c;但我…...

编程日记 2024/9/13 19:53:03

【数据结构】双向链表专题

目录 1.双向链表的结构 2.双向链表的实现 2.1初始化 以参数的形式初始化链表&#xff1a; 以返回值的形式初始化链表&#xff1a; 2.2尾插 2.3打印 2.4头插 2.5尾删 2.6头删 2.7查找 2.8在指定位置之后插入数据​编辑 2.9删除pos节点 2.10销毁 3.整理代码 3.1…...

编程日记 2024/9/13 19:52:02

大二上学期计划安排

大二上学期计划安排 学期目标: 加强算法学习,提升算法思维,为以后的算法竞赛做准备学习java知识,学习框架,构建知识体系,深入底层,增强理解增加项目经验,独立完成至少一个项目,并进行交流,优化增强团队凝聚力,营造良好的团队氛围阅读书籍,阅读至少3本以上经典书籍 日常学习安…...

编程日记 2024/9/13 19:51:01

HarmonyOS开发实战（ Beta5.0）图片编辑实现马赛克效果详解

鸿蒙HarmonyOS开发往期必看&#xff1a; HarmonyOS NEXT应用开发性能实践总结 最新版&#xff01;“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线&#xff01;&#xff08;从零基础入门到精通&#xff09; 介绍 本示例将原图手指划过的区域分割成若干个大小一致的小方格…...

编程日记 2024/9/13 19:47:57

【新书介绍】《JavaScript前端开发与实例教程（微课视频版）（第2版）》

本书重点 无任何基础的初学者&#xff0c;高校JavaScript课程教材。 配套非常全&#xff0c;提供案例源代码、PPT课件、课后习题答案、微课视频、教案、教学大纲、课程实训、期末考试试卷、章节测试、实验报告、学习通建课资源包。 内容简介 JavaScript是开发Web前端必须掌…...

编程日记 2024/9/13 19:46:56

什么是GWAS全基因组关联分析？

什么是全基因组关联分析&#xff1f;&#xff08;Genome-Wide Association Study&#xff0c;GWAS&#xff09; 全基因组关联分析&#xff08;GWAS&#xff09;是一种在全基因组范围内搜索遗传变异&#xff08;通常是单核苷酸多态性&#xff0c;SNP&#xff09;与复杂性状之间关…...

编程日记 2024/9/13 19:45:55

k8s dashboard token 生成/获取

创建示例用户 在本指南中&#xff0c;我们将了解如何使用 Kubernetes 的服务帐户机制创建新用户、授予该用户管理员权限并使用与该用户绑定的承载令牌登录仪表板。 对于以下每个和的代码片段ServiceAccount&#xff0c;ClusterRoleBinding您都应该将它们复制到新的清单文件(如)…...

编程日记 2024/9/13 19:42:52

windows@openssh免密登陆配置@基于powershell快速配置脚本

文章目录 abstract免密自动登录配置介绍&#x1f47a;修改Server配置文件一键脚本修改&#x1f47a; 向ssh server端上传或创建支持免密登录的公钥文件预执行命令&#x1f47a;方式1方式2重启服务以生效&#x1f47a; 傻瓜式配置免密自动登录&#x1f47a;&#x1f47a;准备 操…...

编程日记 2024/9/13 19:41:50

【深度学习】【图像分类】【OnnxRuntime】【Python】VggNet模型部署

【深度学习】【图像分类】【OnnxRuntime】【Python】VggNet模型部署 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【图像分类】【OnnxRuntime】【Python】VggNet模型部署前言Windows平台搭建依赖环境模型转换--pytorch转onnxONN…...

编程日记 2024/9/13 19:40:49

手写排班日历

手写排班日历&#xff1a; 效果图&#xff1a; vue代码如下&#xff1a; <template><div class"YSPB"><div class"title">排班日历</div><div class"banner"><span classiconfont icon-youjiantou click&qu…...

编程日记 2024/9/13 19:39:49

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/9 20:01:01

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/2/7 1:51:12

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2026/1/31 8:12:12

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/2/6 12:27:51