WEB APIs(1)

变量声明const(修饰常量)

const优先,如react,基本const,

对于引用数据类型,可用const声明,因为储存的是地址

何为APIs

可以使用js操作HTML和浏览器

分类:DOM(文档对象模型)和BOM(浏览器对象模型)

DOM

是浏览器提供的一套用来操作网页内容的功能;

呈现以及与任意HTML文档交互的(开发网页内容特效和实现用户交互)

DOM树

将HTML文档以树状结构表现出来

体现标签与标签关系

DOM对象

根据HTML标签生成js对象

所有标签属性都能在这个对象上面找到,修改对象属性即可映射到标签身上

核心:把网页内容当对象处理

获取DOM对象

1.根据css选择器获取一个DOM元素

语法:(只选择匹配的第一个元素)

document.querySelector(‘css选择器’)

可以对DOM元素直接操作修改

参数:

一个或多个有效css选择器 字符串

返回值:

选择器匹配的第一个元素

2.如果选择多个选择器

document.querySelectorAll(‘css选择器’)

返回值:

css选择器匹配的NodeList 对象集合

不可以对DOM元素直接操作修改

因为得到的数组是伪数组,只有长度和索引号,没有相关函数

修改元素内容

操作标签的本质是操作DOM对象

对象.innerText 属性

获取文字内容,显示纯文本,不解析标签

对象.innerHTML 属性

不同于 对象.innerText 属性,可以识别标签

操作元素属性

1.操作元素常用属性

可以通过js设置/修改标签元素属性,如src更换图片

语法:

对象.属性=值

2.操作元素样式属性

语法

对象.style.属性='值'

特殊的,如background-color

用小驼峰命名法:

3.类名操作css

修改样式多会变繁琐,可以借助css类名

语法:

//active是类名

元素.className='active'

className会覆盖之前的类名,想保留原来类名,把原来类名添加到className

4.通过classList操作类控制css

为解决className易覆盖类名问题,可通过classList方法追加和删除类名

语法:

.remove变为

div.classList.toggle('box') //有就删掉,没有就加上

3.操作表单元素属性

获取:DOM对象.属性

设置:DOM对象.属性=新值

获取表单元素

const input = document.querySelector('input')

获取表单里的值用 表单.value

innerHTML得不到表单内容

表单属性中添加有效果,移除则效果消失,一律用布尔值

如:disabled、checked、selected

input.checked=true 即可勾选上

button。disabled=true 使按钮禁用

自定义属性

data-自定义属性

标签一律以data-开头

在DOM对象上一律以dataset(数据集合)对象方式获取

定时器-间歇函数

开启定时器

setInterval(函数,间隔时间)

间隔一段时间调用一次函数(毫秒)

应用了匿名函数:

如果不是匿名函数不要加小括号,会导致直接被调用一次,之后不会再被周期性调用了

关闭定时器

注意:定时器会返回一个独一无二的id号

语法:

clearinterval(变量名)  即可关闭

一般都会满足某些条件

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

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

相关文章

Java奇缘:林浩然与杨凌芸的数学冒险记

Java奇缘:林浩然与杨凌芸的数学冒险记 Java Adventure: The Mathematical Odyssey of Lin Haoran and Yang Lingyun 在Java编程世界的某一个角落,住着两位才华横溢的程序员——林浩然和杨凌芸。林浩然,人称“算法大侠”,对Java Ma…

【Vue】工程化开发脚手架Vue CLI

📝个人主页:五敷有你 🔥系列专栏:Vue⛺️稳重求进,晒太阳 工程化开发&脚手架Vue CLI 基本介绍 Vue Cli是Vue官方提供的一个全局命令工具 可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了we…

express 定时删除 oss 垃圾图片

一: 删除垃圾图片 思路: 获取 oss 中存储的所有图片文件;获取数据库中存储的图片文件数据;对比差异,不在数据库中的 oss 图片文件即为要删除的垃圾图片。 实现: 1、获取所有 oss 文件 import OSS from…

Pr教程1-8节笔记

第一课 认识PR以及PR的学习方法 学习任务: 1、熟练掌握PR软件,同时掌握剪辑技术以及常用于制作特效的效果器。 2、认识PR软件的名称、主要功能以及用途作用。 3、明白学习PR我们能做些什么以及PR的学习方法。 知识内容: 1、PR是专门用于视…

微服务—ES数据同步

目录 数据同步 问题分析 方案1. 同步调用 方案2. 异步通知 方案3. 监听binlog​编辑 各方案对比 案例——利用MQ实现数据同步 步骤1. 导入hotel-admin项目 步骤2. 声明交换机、队列 步骤3. 发送MQ消息 步骤4. 接收MQ消息 步骤5. 测试同步功能 数据同步 elasticsea…

C#,计算几何,贝塞耳插值(Bessel‘s interpolation)的算法与源代码

Friedrich Wilhelm Bessel 1 贝塞耳插值(Bessels interpolation) 首先要区别于另外一个读音接近的插值算法:贝塞尔插值(Bzier)。 (1)读音接近,但不是一个人; &#x…

【zabbix】(三)-邮件告警配置

企业微信、钉钉和邮件告警配置的目的是为了确保监控系统检测到的问题能够及时传达给相关人员,并通过灵活的通知方式提高团队的响应速度和协作效率。 本文介绍的是QQ邮件告警 一 开启发件服务器SMTP功能 本文使用的是QQ邮箱,其他邮箱操作类似&#xff…

【Pygame手册01/20】最简应用:窗口

目录 一、说明 二、pygame是什么? 2.1 为游戏开发设计 2.2 版本发展史 2.3 特点 三、pygame安装要点 四、入门知识 4.1 初始使用 4.2 要更改 pygame 窗口的外观 4.3 完整窗口程序 4.4 窗口对象接口示例 五、隐形窗口和显性窗口 六、结论 一、说明 为什…

MySQL-----函数篇

目录 ▶ 字符串函数 ▶ 数值函数 ▶ 日期函数 ▶ 流程函数 ▶ 简介 函数是指一段可以直接被另一段程序调用的程序或代码。 ▶ 字符串函数 函数描述实例ASCII(s)返回字符串 s 的第一个字符的 ASCII 码。 返回 CustomerName 字段第一个字母的 ASCII 码: S…

电路设计(18)——9路抢答器的设计与制作

1.设计要求 设计、制作一台9路抢答器,抢答器应符合如下工作过程: 每次抢答前,主持人首先按下复位键,将抢答器上“抢答号”数显复位,显示为“0”。接着,主持人念答题内容,念毕即叫“抢答…

炫酷3D按钮

一.预览 该样式有一种3D变换的高级感&#xff0c;大家可以合理利用这些样式到自己的按钮上 二.代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice…

Java网络编程 双向通信

目录 网络编程实例创建客户端创建服务端测试 网络编程 Java的网络编程是Java编程语言中用于实现网络通信的一组API和工具。通过Java的网络编程&#xff0c;开发人员可以在Java应用程序中实现客户端和服务器之间的通信&#xff0c;从而构建各种网络应用。 以下是Java网络编程的…

步步深入 k8s 使用 pv pvc sc 在 nfs 基础上共享存储

博客原文 文章目录 前言集群环境nfs 环境搭建pod 挂载 nfs架构图 pvc 方式挂载 nfs架构图 storageclass 方式动态申请 pv架构图 参考 前言 持久化卷&#xff08;Persistent Volume, PV&#xff09;允许用户将外部存储映射到集群&#xff0c;而持久化卷申请&#xff08;Persist…

黄金交易策略(Nerve Nnife.mql4):利用锁定单消除保留单

完整EA&#xff1a; Nerve Knife.ex4黄金交易策略_黄金趋势ea-CSDN博客 趋势突然转变有大约30%的概率会产生一张锁定单&#xff0c;反复转变之后难免就会形成几个保留单了&#xff0c;可以选择一张与保留单同向同大小&#xff08;接近也行&#xff09;的单&#xff0c;去消除这…

半理想架构的Doherty功率放大器理论与仿真-基于GAN器件CGH40010F

半理想架构的Doherty功率放大器理论与仿真-基于GAN器件CGH40010F 理想架构的Doherty功率放大器理论与仿真中已经介绍了如何在ADS中使用理想电流源来对DPA的架构进行仿真。但是理想的电流源太理想了&#xff0c;电压、电流的许多行为都是需要自己使用数学公式去严格定义&#x…

【Python】Python代码的单元测试

Python代码的单元测试 单元测试的概念 定义&#xff1a;是指对软件中的最小可测试单元进行检查和验证。 作用&#xff1a;可以确保程序模块是否否和我们规范的输出&#xff0c;保证该模块经过修改后仍然是满足我们的需求。 单元测试的策略 如果要创建单元测试&#xff0c;…

比特币再次上演“初五破五”精彩戏法!

号外&#xff1a;2.13教链内参《随着BTC一度突破5万刀&#xff0c;超过9成持有者已盈利》 比特币无惧美通胀数据阻击&#xff0c;在短暂回落之后坚决反攻&#xff0c;在中国农历大年初五&#xff0c;2月14日情人节&#xff0c;大涨6%&#xff0c;从48k绝地反击&#xff0c;再次…

游戏服务器租用多少钱一年?

游戏服务器租用多少钱一年&#xff1f;1个月游戏服务器费用多少&#xff1f;阿里云游戏服务器26元1个月、腾讯云游戏服务器32元&#xff0c;华为云26元&#xff0c;游戏服务器配置从4核16G、4核32G、8核32G、16核64G等配置可选&#xff0c;游戏专业服务器公网带宽10M、12M、15M…

吃瓜 - 春山学

2024年春晚看似一个贵州献上的歌舞节目《上春山》&#xff08;白敬亭、魏大勋、魏晨合唱&#xff09;引发网络破案&#xff1a;白敬亭有没有抢C位和故意换衣服&#xff1f;网上的“白敬亭春晚走位风波”不断升级&#xff0c;喂到嘴里的瓜不吃也不行啊。 三人都是明侦的元老嘉…

JavaScript中的Symbol:加密与安全性

JavaScript中的Symbol是一种唯一且不可变的数据类型&#xff0c;引入了一种新的基本数据类型&#xff0c;用于表示独一无二的标识符。在本文中&#xff0c;我们将深入介绍JavaScript中的Symbol&#xff0c;讨论如何将其应用于JS加密中&#xff0c;提供案例代码&#xff0c;并说…