JavaScript-3

Web API 基本认知

作用和分类

  • 作用：就是使用 JS 去操作 html 和 浏览器
  • 分类：DOM ( 文档对象模型 )、BOM ( 浏览器对象模型 )

DOM 是什么

  • DOM ( Document Object Model —— 文档对象模型 )
  • 它是用来呈现以及与任意 HTML 或 XML 文档交互的 API
  • 通俗的说，DOM 是浏览器提供的一套专门用来"操作网页内容"的功能

DOM 树

  • 什么是 DOM 树：将HTML文档以树状结构直观表现出来，我们称之为文档树或DOM树

  • 作用：文档树直观的体现了标签与标签之间的关系

在这里插入图片描述

DOM 对象

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

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

document 对象

  • 是 DOM 里面提供的一个对象
  • 用来访问和操作网页内容
  • 网页所有内容都在 document 里面

获取 DOM 对象

  • 方式一：根据 CSS 选择器来获取 DOM 元素（重点）
  • 方式二：其他获取 DOM 元素方法（了解）

方式一

具体内容

  • 成功匹配的所有元素中，取第一个元素
语法：document.querySelector('CSS选择器')返回值：CSS选择器匹配成功的所有元素中的第一个元素，是一个HTMLElement对象
  • 成功匹配的所有元素中，取所有元素
语法：document.querySelectorAll('CSS选择器')返回值：CSS选择器匹配成功的所有元素，是一个装有HTMLElement对象的数组

演示部分

<body><div>111</div><div>222</div><div class="box">aaa</div><div class="box">bbb</div><div class="box">ccc</div><div id="d1">ddd</div><ul><li>li-1</li><li>li-2</li><li>li-3</li></ul><script>const a = document.querySelector('.box')console.log(a);const d = document.querySelector('#d1')console.log(d);const li = document.querySelector('li')console.log(li);const lis = document.querySelectorAll('ul li')console.log(lis);</script>
</body>

方式二

    <script>// 根据id获取一个元素document.getElementById('nav')// 根据'标签名'获取一类元素document.getElementsByTagName('div')// 根据'类名'获取对应元素document.getElementsByClassName('box')</script>

操作元素内容

innerText

<body><div>欢迎光临</div><div class="box">我是Peter</div><div class="top">搜索框</div><script>// 1. 获取元素对象const box = document.querySelector('.box')// 2. 修改文字内容console.log(box.innerText);     // 输出内容:我是Peterbox.innerText = '我是Jack'      // 注意：innerText 只显示纯文本，不解析标签// 例如：box.innerText = '<strong>我是Jack</strong>' 是解析不了标签的</script>
</body>

innerHTML

<body><div>欢迎光临</div><div class="box">我是Peter</div><div class="top">搜索框</div><script>// 1. 获取元素对象const box = document.querySelector('.box')// 2. 修改文字内容box.innerHTML = '<strong>我是Jack</strong>'</script>
</body>

操作元素属性

操作元素的常用属性

<body><img src="./images/img2.png" alt=""><script>// 1. 获取图片对象const img = document.querySelector('img')// 2. 修改图片对象的属性值img.src = './images/img3.png'</script>
</body>

操作元素的样式属性

方式一

  • 通过 style 属性操作 CSS
<body><div class="box"></div><script>// 1. 获取对象const box = document.querySelector('.box')// 2. 修改对象的样式的属性值box.style.width = '300px'box.style.backgroundColor = 'green'</script>
</body>

方式二

  • 操作类名 ( className ) 操作 CSS
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;}.active {margin: 0 auto;width: 300px;height: 300px;background-color: bisque;}.radius {border-radius: 50%;}</style>
</head><body><div class="box"></div><script>// 1. 获取对象const box = document.querySelector('.box')// 2. 通过改'类名'的方式，去修改对象的样式box.className = 'active radius'</script>
</body>

方式三（重点）

  • 通过 classList 操作类控制 CSS

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

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;}.active {margin: 0 auto;width: 300px;height: 300px;background-color: bisque;}.radius {border-radius: 50%;}</style>
</head><body><div class="box"></div><script>// 1. 获取对象const box = document.querySelector('.box')// 追加一个类box.classList.add('active')// 删除一个类box.classList.remove('active')// 切换一个类// 判断这个类有没有，有就删掉，没有就加上，即：类似'取反'的效果box.classList.toggle('radius')</script>
</body>

操作表单元素属性

标准属性

  • 标签天生自带的属性，比如 class、id、title 等，可以直接使用点语法操作，比如：disabled、checked、selected
<body><input type="text" value="电脑"><script>const ipt = document.querySelector('input')ipt.value = '书包'</script>
</body>

<body><input type="checkbox" name="" id="" checked><script>const ipt = document.querySelector('input')ipt.checked = false</script>
</body>

<body><button disabled>点击</button><script>const btn = document.querySelector('button')btn.disabled = false</script>
</body>

自定义属性（重点）

  • 在 html 5 中推出来了专门的 data-自定义属性
  • 在标签上一律以 data- 开头
  • 在 DOM 对象上一律以 dataset 对象方式获取
<body><div data-id="haha" data-spm="run">第1个</div><div>第2个</div><div>第3个</div><script>const one = document.querySelector('div')console.log(one.dataset.id);    // hahaconsole.log(one.dataset.spm);   // run</script>
</body>

定时器

间歇函数

使用场景

    网页中经常会需要有一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发例如：网页中的倒计时定时器函数可以开启和关闭定时器

开启定时器

	语法：setInterval(函数, 间隔时间)作用：每隔一段时间调用这个函数（间隔时间单位：毫秒）

    <script>// 开启定时器的方式一：setInterval(function () {document.write('匹配成功 <br>')}, 1000)// 开启定时器的方式二：function add() {document.write('任务完成 <br>')}setInterval(add, 2000)	// 开启</script>

关闭定时器

	语法：let 变量名 = setInterval(函数, 间隔时间)clearInterval(变量名)作用：当满足某些条件时，关闭定时器

    <script>let n = setInterval(function () {document.write('匹配成功 <br>')}, 1000)console.log(n)  // 变量里面存的是独一无二的定时器序号，这个序号是为了避免多个定时器互相干涉// 关闭定时器clearInterval(n)</script>

具体案例

<body><textarea name="" id="" cols="30" rows="10">《用户注册协议》您确认所有服务条款并完成注册程序时本协议在您与本网站间成立并发生法律效力同时您成为本网站正式用户</textarea><br><button class="btn" disabled>我已经阅读用户协议 (5s)</button><script>const btn = document.querySelector('.btn')let second = 5   // 倒计时秒数let n = setInterval(function () {second--btn.innerHTML = `我已经阅读用户协议 (${second}s)`if (second === 0) {clearInterval(n)btn.innerHTML = `我同意该协议`btn.disabled = false}}, 1000)</script>
</body>

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

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

相关文章

MongoDB认证考试小题库

MongoDB认证考试小题库

Free MongoDB C100DBA Exam Actual Questions 关于MongoDB C100 DBA 考试真题知识点零散整理 分片架构 应用程序 --> mongos --> 多个mongod对于应用来说&#xff0c;连接分片集群跟连接一台单机mongod服务器一样分片好处&#xff0c; 增加可用RAM、增加可用磁盘空间、…
阅读更多...
缓存和数据库一致性

缓存和数据库一致性

前言&#xff1a; 项目的难点是如何保证缓存和数据库的一致性。无论我们是先更新数据库&#xff0c;后更新缓存还是先更新数据库&#xff0c;然后删除缓存&#xff0c;在并发场景之下&#xff0c;仍然会存在数据不一致的情况&#xff08;也存在删除失败的情况&#xff0c;删除…
阅读更多...
如何高效进行项目文档的编制及管理？

如何高效进行项目文档的编制及管理？

“做完一个项目到底会产出多少份文档&#xff1f;” 今天看到这样一个吐槽贴&#xff1a;小李作为刚入行的项目经理&#xff0c;每天上班期间电话、会议、邮件各种不停歇&#xff0c;晚上还要加班做各种文档&#xff1b;由于经验不足&#xff0c;熬到十一二点还做不完是常态。…
阅读更多...
Vue学习笔记五--路由

Vue学习笔记五--路由

1、什么是路由 2、VueRouter 2、1VueRouter介绍 2、2使用步骤 2、3路由封装 3、router-link 3.1两个类名 3.2声明式导航传参 4、路由重定向、404 当找不到路由时&#xff0c;跳转配置到404页面 5、路由模式 6、通过代码跳转路由---编程式导航&传参 路由跳转时传参 跳转方式…
阅读更多...
Java 并发之《深入理解 JVM》关于 volatile 累加示例的思考

Java 并发之《深入理解 JVM》关于 volatile 累加示例的思考

在周志明老师的 《深入理解 JVM》一书中关于 volatile 关键字线程安全性有一个示例代码&#xff08;代码有些许改动&#xff0c;语义一样&#xff09;&#xff1a; public class MyTest3 {private static volatile int race 0;private static void increase() {race;}public …
阅读更多...
亚马逊时尚如何运用人工智能帮助您找到合适的尺码

亚马逊时尚如何运用人工智能帮助您找到合适的尺码

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
Docker五部曲之一：容器术语介绍

Docker五部曲之一：容器术语介绍

文章目录 前言背景基本术语容器镜像容器镜像格式容器引擎容器容器主机注册中心容器编排 进阶术语容器运行时镜像层标签存储库名称空间 参考 前言 本文内容翻译自参考文献。 背景 要理解容器术语&#xff0c;重要的是要精确地理解容器是什么。容器实际上是两个不同的东西。像…
阅读更多...
Linux驱动学习—I2C总线

Linux驱动学习—I2C总线

1、应用层实现I2C通信 1.1 I2C简介 I2C是很常见的一种总线协议&#xff0c;I2C是NXP公司设计的&#xff0c;I2C使用两条线在主控制器和从机之间进行数据通信。一条是SCL&#xff08;串行时钟线&#xff09;&#xff0c;另外一条是SDA(串行数据线)&#xff0c;因为I2C这两条数…
阅读更多...
Windows Server 2019配置多用户远程桌面登录服务器

Windows Server 2019配置多用户远程桌面登录服务器

正文共&#xff1a;1234 字 21 图&#xff0c;预估阅读时间&#xff1a;2 分钟 很久之前&#xff0c;在介绍显卡直通的时候我们简单介绍过RDP&#xff08;Remote Desktop Protocol&#xff0c;远程桌面协议&#xff09;&#xff08;前人栽树&#xff1a;失败的服务器显卡操作&a…
阅读更多...
第 3 场 蓝桥杯小白入门赛 解题报告 | 珂学家 | 单调队列优化的DP + 三指针滑窗

第 3 场 蓝桥杯小白入门赛 解题报告 | 珂学家 | 单调队列优化的DP + 三指针滑窗

前言 整体评价 T5, T6有点意思&#xff0c;这场小白入门场&#xff0c;好像没真正意义上的签到&#xff0c;整体感觉是这样。 A. 召唤神坤 思路: 前后缀拆解 #include <iostream> #include <algorithm> #include <vector> using namespace std;int main()…
阅读更多...
Android平台RTMP推送|轻量级RTSP服务|GB28181设备接入模块之实时快照保存JPG还是PNG？

Android平台RTMP推送|轻量级RTSP服务|GB28181设备接入模块之实时快照保存JPG还是PNG？

JPG还是PNG&#xff1f; JPG和PNG是两种常见的图片文件格式&#xff0c;在压缩方式、图像质量、透明效果和可编辑性等方面存在显著差异。 压缩方式&#xff1a;JPG是一种有损压缩格式&#xff0c;通过丢弃图像数据来减小文件大小&#xff0c;因此可能会损失一些图像细节和质量…
阅读更多...
【AIGC】IP-Adapter：文本兼容图像提示适配器，用于文本到图像扩散模型

【AIGC】IP-Adapter：文本兼容图像提示适配器，用于文本到图像扩散模型

前言 IPAdapter能够通过图像给Stable Diffusion模型以内容提示&#xff0c;让其生成参考该图像画风&#xff0c;可以免去Lora的训练&#xff0c;达到参考画风人物的生成效果。 摘要 通过文本提示词生成的图像&#xff0c;往往需要设置复杂的提示词&#xff0c;通常设计提示词变…
阅读更多...
系列十一、Spring Security登录接口兼容JSON格式登录

系列十一、Spring Security登录接口兼容JSON格式登录

一、Spring Security登录接口兼容JSON格式登录 1.1、概述 前后端分离中&#xff0c;前端和后端的数据交互通常是JSON格式&#xff0c;而Spring Security的登录接口默认支持的是form-data或者x-www-form-urlencoded的&#xff0c;如下所示&#xff1a; 那么如何让Spring Securi…
阅读更多...
Open3D 反算点云缩放系数（21）

Open3D 反算点云缩放系数（21）

Open3D 反算点云缩放系数（21） 一、算法介绍二、算法实现1.方法12.方法2（通用）一、算法介绍 上一章按照指定的系数，对点云进行了等比例缩放，这里输入缩放后的两块点云，反算二者之间的缩放系数。 二、算法实现 已知使用的俩点云是1/2的缩放关系，用于验证计算结果是否…
阅读更多...
【数据结构】串，数组，广义表 | 笔记整理 | C/C++实现

【数据结构】串，数组，广义表 | 笔记整理 | C/C++实现

文章目录 前言一、串1.1、串的定义1.2、案例引入1.3、串的类型定义和存储结构1.4、串的模式匹配算法1.4.1、BF算法1.4.2、KMP算法 二、数组2.1、数组的定义2.2、数组的抽象数据类型定义2.3、数组的顺序存储2.4、特殊矩阵的压缩存储 三、广义表四、病毒案例 前言 参考视频&…
阅读更多...
【C++】wxWidgets库实现窗体程序

【C++】wxWidgets库实现窗体程序

一、安装wxWidgets库 在Debian系统上使用wxWidgets库来创建一个基本的窗体程序&#xff0c;首先需要确保已经安装了wxWidgets相关的库和开发工具。下面是安装wxWidgets的步骤&#xff1a; 打开终端&#xff0c;使用下述命令安装wxWidgets库及其开发文件&#xff1a; sudo ap…
阅读更多...
MySQL之导入、导出远程备份

MySQL之导入、导出远程备份

一、Navicat工具导入、导出 1.1 导入 第一步&#xff1a; 右键&#xff0c;点击运行SQL文件 第二步&#xff1a; 选择要运行的SQL&#xff0c;点击开始 第三步&#xff1a; 关闭即可 1.2 导出 第一步&#xff1a; 右键选择&#xff0c;导出向导 第二步&#xff1a; 选择SQL脚…
阅读更多...
1.3MATLAB变量及其操作

1.3MATLAB变量及其操作

变量 变量是内存单元的一个抽象&#xff0c;在MATLAB中&#xff0c;变量以字母开头&#xff0c;后接数字下划线构成&#xff0c;MATLAB中变量名最多占据 63 个字符。变量区分大小写标准函数及命令一般使用小写字母 赋值语句 变量 表达式(;)表达式(;)总结&#xff1a;加分号&…
阅读更多...
C++ 实现游戏（例如MC）键位显示

C++ 实现游戏（例如MC）键位显示

效果&#xff1a; 是不是有那味儿了&#xff1f; 显示AWSD&#xff0c;空格&#xff0c;Shift和左右键的按键情况以及左右键的CPS。 彩虹色轮廓&#xff0c;黑白填充。具有任务栏图标&#xff0c;可以随时关闭字体是Minecraft AE Pixel&#xff0c;如果你没有装&#xff08;大…
阅读更多...
使用numpy处理图片——灰阶影像

使用numpy处理图片——灰阶影像

大纲 载入图像灰阶处理lightnessaverageluminosity 灰阶&#xff08;Gray scale&#xff09;影像是每个像素只有一个采样颜色的图像。 载入图像 import numpy as np import PIL.Image as Imageimg Image.open(lena.png) data np.array(img)灰阶处理 我们有三种方法来生成这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023