【Web APIs】DOM获取元素

目录

1.Web API基本认识

2.获取DOM元素

3.设置/修改DOM元素内容

4.设置/修改DOM元素属性

4.1修改元素常用属性

4.2修改元素样式属性 

4.3设置/修改表单属性

5.定时器-间歇函数

1.Web API基本认识

作用：就是使用js去操作html和浏览器

分类：DOM（文档对象模型），BOM（浏览器对象模型）

DOM：用来呈现以及与任意HTML或XML文档交互的API，即浏览器提供的一套专门用来操作网页内容的功能，开发中网页内容特效和实现用户交互

DOM树：

将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树

  • 描述网页内容关系的名词
  • 作用：文档树直观地体现了标签与标签之间的关系

DOM对象：

浏览器根据HTML标签生成的JS对象

  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

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

document对象：是DOM中提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页中所有内容都在document里面

2.获取DOM元素

查找DOM元素就是选择页面中标签元素

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

1️⃣选择匹配的一个元素

  • 语法：document.querySelector('css选择器')
  • 参数：包含一个或多个有效的CSS选择器 字符串
  • 返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象；如果没有匹配到，返回null

2️⃣选择匹配的多个元素

  • 语法：document.querySelectorAll('css选择器')
  • 参数：包含一个或多个有效的CSS选择器 字符串
  • 返回值：CSS选择器匹配的NodeList 对象集合；

📖Note：

不能直接修改，只能通过遍历的方式修改里面的元素

得到的算是一个伪数组：

  • 有长度有索引号的数组
  • 但是没有pop()，push()等数组方法
  • 想要得到里面的每一个对象，需要遍历

其他获取DOM元素的方法：

  1. 根据id获取一个元素：document.querySelectorById('css选择器')
  2. 根据标签获取一类元素：document.querySelectorByTagName('css选择器')
  3. 根基类名获取元素：document.querySelectorByClassName('css选择器')

3.设置/修改DOM元素内容

1️⃣document.write()

  • 只能将文本内容追加到</body>前面的位置
  • 文本中包含的标签会被解析

2️⃣元素innerText属性

  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签不会被解析

3️⃣元素innerHTML属性

  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签会被解析

4.设置/修改DOM元素属性

4.1修改元素常用属性

修改元素常用属性

常见属性：href，title，src等

语法：对象.属性 = 值

案例：刷新页面，页面中随机显示不同的图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 500px;height: 300px;}</style>
</head>
<body><img src="./pictures/img1.jpg" alt=""><script>// 获取图片let pic = document.querySelector('img')// 随机得到图片序号function getRandom(min, max) { return  Math.floor(Math.random() * (max - min + 1)) + min}let num = getRandom(1, 6)// 修改srcpic.src = `./pictures/img${num}.jpg`</script>
</body>
</html>

4.2修改元素样式属性 

修改元素样式属性

  1. 通过style属性操作CSS
  2. 通过类名（className）操作CSS
  3. 通过classList操作类控制CSS

1️⃣通过style属性操作CSS

📖Note：

  1. 修改样式通过style属性引出
  2. 如果属性有-连接符，需要转换为小驼峰命名法
  3. 赋值时，注意需要单位的属性值要加单位

案例：随机背景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-image: url(./pictures/img1.jpg);background-repeat: no-repeat;}</style>
</head>
<body><script>// 随机数函数function getRandom(min, max) { return  Math.floor(Math.random() * (max - min + 1)) + min}let num = getRandom(1, 6)document.body.style.backgroundImage = `url(./pictures/img${num}.jpg)`</script>
</body>
</html>

2️⃣通过类名（className）操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，可以通过css类名的方式修改

语法：元素.className = 'css类名'

📖Note：

  • 由于class是关键字，所以使用className去代替
  • className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

存在的问题：赋值操作，会覆盖其他类

3️⃣通过classList操作类控制CSS

解决className覆盖类名的缺陷，使用classList方式追加和删除类名

  1. 追加一个类：元素.classList.add('类名')
  2. 删除一个类：元素.classList.remove('类名')
  3. 切换一个类：元素.classList.toggle('类名')

4.3设置/修改表单属性

场景：登录界面点击眼睛，可以看到密码，本质是把表单类型由password转换为text

获取：DOM对象.属性名

设置：DOM对象.属性名 = 新值

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，true代表添加了该属性，false代表移除了该属性

比如：disable（禁用状态），checked，selected

5.定时器-间歇函数

使用场景：每隔一段时间自动执行一段代码，不需要手动触发，如：网页中的倒计时

定时器函数

开启定时器：setInterval(函数,  间隔时间)

作用：每隔一段时间调用这个函数

📖Note：

  • 函数名不需要加小括号
  • 定时器返回的是一个id数字
  • 间隔时间的单位是毫秒

关闭定时器：

  1. let 变量名 = setInterval(函数，间隔时间)
  2. clearInterval(变量名)

一般配合事件使用

案例：协议阅读倒计时

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>// 获取元素let btn = document.querySelector('button')let t = 5// 开启定时器let timer = setInterval(function() {t--btn.innerHTML = `我已经阅读用户协议(${t})`if(t === 0) {// 清除定时器clearInterval(timer)// 开启按钮btn.disabled = falsebtn.innerHTML = `我已经阅读用户协议`}}, 1000)   </script></body></html>

案例：风景轮播图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>风景轮播图</title><style>.img-box {width: 600px;height: 320px;margin: 50px auto 0;background: #b0aaaa;position: relative;}.img-box .tip {width: 600px;height: 53px;line-height: 53px;position: absolute;bottom: 0px;background-color: rgba(9, 9, 9, 0.5);z-index: 10;}.img-box .tip h3 {width: 82%;margin: 0;margin-right: 20px;padding-left: 20px;color: #98E404;font-size: 24px;float: left;font-weight: 500;font-family: "Microsoft Yahei", Tahoma, Geneva;}.img-box .tip a {width: 30px;height: 29px;display: block;float: left;margin-top: 12px;margin-right: 3px;}.img-box ul {position: absolute;bottom: 0;right: 30px;list-style: none;z-index: 99;}.pic {width: 600px;height: 320px;}</style>
</head><body><div class="img-box"><img class="pic" src="./pictures/img1.jpg" alt="第1张图的描述信息"><div class="tip"><h3 class="text">桂林山水风光</h3></div></div><script>// 数据let data = [{imgSrc: './pictures/img1.jpg',title: '桂林山水风光'},{imgSrc: './pictures/img2.jpg',title: '热爱漫无边际，生活自有分寸'},{imgSrc: './pictures/img3.jpg',title: '背包、生活、目的地，下一站，我不告诉你'},{imgSrc: './pictures/img4.jpg',title: '有趣的人生，一半是山川湖海'},{imgSrc: './pictures/img5.jpg',title: '风月都好看，人间也浪漫'},{imgSrc: './pictures/img6.jpg',title: '且听风吟，静待花开'},]// 获取元素let pic = document.querySelector('.pic')let text = document.querySelector('.text')// 记录图片张数let i = 0// 开启定时器let timer = setInterval(function(){i++// 修改图片src属性// src="./pictures/img1.jpg"pic.src = data[i].imgSrc// 修改文字内容text.innerHTML = data[i].titleif(i === data.length - 1) {// 初始化i i = -1 i++为0 显示第一张图片i = -1}}, 1000)</script></body></html>

 

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

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

相关文章

给wordpress添加自定义字段的分类筛选功能

给wordpress添加自定义字段的分类筛选功能

要为WordPress添加自定义字段的筛选功能&#xff0c;你需要使用WordPress的查询参数(query parameters)和WP_Query类来构建自定义查询。以下是一个详细的示例代码&#xff0c;展示了如何添加自定义字段的筛选功能。 首先&#xff0c;你需要在你的主题或插件的functions.php文件…
阅读更多...
windows访问远程服务器上容器的几种直接方式

windows访问远程服务器上容器的几种直接方式

远程服务器 host上有一个docker container&#xff0c;如何通过 client 直接登陆 container 呢&#xff1f; container 使用 host 的网络&#xff0c;即使用了 --networkhost先配置 container的 ssdh&#xff08;/etc/ssh/sshd_config&#xff09;&#xff0c;相关参数设置 po…
阅读更多...
经典过河问题

经典过河问题

Safe Passage 题目链接 首先我们想&#xff0c;应该让最快与次快的先过河&#xff0c;然后让他俩来回的带其他人过河 两种考虑方式其实差不多&#xff0c; 一&#xff1a;以右岸为基准 这时我们想&#xff0c;当最快与次快的过河后&#xff0c;我们由两种选择&#xff1a; …
阅读更多...
更高效的反射调用方式被我找到了！

更高效的反射调用方式被我找到了！

背景 在使用Java进行开发时&#xff0c;我们会不可避免的使用到大量的反射操作&#xff0c;比如Spring Boot会在接收到HTTP请求时&#xff0c;利用反射Controller调用接口中的对应方法&#xff0c;或是Jackson框架使用反射来解析json中的数据给对应字段进行赋值&#xff0c;我…
阅读更多...
C#进阶-用于Excel处理的程序集

C#进阶-用于Excel处理的程序集

在.NET开发中&#xff0c;处理Excel文件是一项常见的任务&#xff0c;而有一些优秀的Excel处理包可以帮助开发人员轻松地进行Excel文件的读写、操作和生成。本文介绍了NPOI、EPPlus和Spire.XLS这三个常用的.NET Excel处理包&#xff0c;分别详细介绍了它们的特点、示例代码以及…
阅读更多...
【Frida】10_用鼠标自动标记棋盘上的雷区（一键过关）

【Frida】10_用鼠标自动标记棋盘上的雷区（一键过关）

&#x1f6eb; 系列文章导航 【Frida】 00_简单介绍和使用 https://blog.csdn.net/kinghzking/article/details/123225580【Frida】 01_食用指南 https://blog.csdn.net/kinghzking/article/details/126849567【Frida】 03_初识frida-node https://blog.csdn.net/kinghzking/ar…
阅读更多...
AI程序员诞生：对程序员的影响与未来展望

AI程序员诞生：对程序员的影响与未来展望

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 方向一&#xff1a;AI程序员的优势分析 方向二&#xff1a;AI程序员局限性 方向三&#xff1a;对程序员职业的影响 方向四&…
阅读更多...
【吊打面试官系列】Redis篇 - Redis 的回收策略（淘汰策略）?

【吊打面试官系列】Redis篇 - Redis 的回收策略（淘汰策略）?

大家好&#xff0c;我是锋哥。今天分享关于 Redis 的回收策略&#xff08;淘汰策略&#xff09;面试题&#xff0c;希望对大家有帮助&#xff1b; volatile-lru &#xff1a;从已设置过期时间的数据集&#xff08;server.db[i].expires&#xff09;中挑选最近最少使用的数据淘汰…
阅读更多...
高通8255芯片首次烧写方法

高通8255芯片首次烧写方法

高通8255芯片首次烧写需要进行分区烧写&#xff0c;方法如下&#xff1a; 目录 一&#xff1a;QFIL安装 二&#xff1a;关于QFIL详细文档 三&#xff1a;简要分区烧写方法 1烧写 meta build 2 然后重启一下机器 3 烧写 flat build 四&#xff1a;正常烧写程序 一&#…
阅读更多...
成为高效Java工程师的干货笔记

成为高效Java工程师的干货笔记

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流&#xff0c;摸鱼划水的小伙伴&#xff0c;请点击【全栈技术交流群】 作为一名Java工程师&…
阅读更多...
Lambda函数与Selenium WebDriverWait类一起使用

Lambda函数与Selenium WebDriverWait类一起使用

Lambda函数是一种匿名函数&#xff0c;也称为内联函数或者lambda表达式。它们在Python中用于创建简短的、一次性的函数。Lambda函数通常用于在代码中传递函数作为参数&#xff0c;或者在需要一个简单的函数&#xff0c;但不想正式定义一个函数的情况下使用。 Lambda函数的特点…
阅读更多...
好用电脑桌面便签是什么？电脑好用便签软件推荐

好用电脑桌面便签是什么？电脑好用便签软件推荐

面对电脑屏幕&#xff0c;我常常感到一种无形的压力。繁杂的工作、琐碎的事务&#xff0c;仿佛都在这个小小的屏幕里与我争夺注意力。每当这时&#xff0c;我就特别需要一个能随时记录我重要事项的工具&#xff0c;让我能在忙碌中保持清醒的头脑。 有一天&#xff0c;我发现了…
阅读更多...
产品｜快！精！强！点点田企业版功能大升级

产品｜快！精！强！点点田企业版功能大升级

在诸如农业补贴、农情监测以及种植监管等场景中&#xff0c;农业遥感数据获取门槛高、行业客户软件开发经验不足等痛点一直存在。 针对这一挑战&#xff0c;珈和科技开发了点点田企业版产品&#xff0c;提供农业遥感数据服务&#xff0c;以API交付的方式降低数据获取门槛&…
阅读更多...
新手leetcode 126周赛被拷打篇

新手leetcode 126周赛被拷打篇

100262. 求出加密整数的和 难度&#xff1a;568 给你一个整数数组 nums &#xff0c;数组中的元素都是 正 整数。定义一个加密函数 encrypt &#xff0c;encrypt(x) 将一个整数 x 中 每一个 数位都用 x 中的 最大 数位替换。比方说 encrypt(523) 555 且 encrypt(213) 333 。…
阅读更多...
外包干了1个月，技术明显进步。。。

外包干了1个月，技术明显进步。。。

我是一名大专生&#xff0c;自19年通过校招进入湖南某软件公司以来&#xff0c;便扎根于功能测试岗位&#xff0c;一晃便是近四年的光阴。今年8月&#xff0c;我如梦初醒&#xff0c;意识到长时间待在舒适的环境中&#xff0c;已让我变得不思进取&#xff0c;技术停滞不前。更令…
阅读更多...
Uibot (RPA设计软件）财务会计Web应用自动化(批量开票机器人）

Uibot (RPA设计软件）财务会计Web应用自动化(批量开票机器人）

Uibot (RPA设计软件&#xff09;Mage AI智能识别&#xff08;发票识别&#xff09;———机器人的小项目友友们可以参考小北的课前材料五博客~ (本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~&#xff09; 紧接着小北的前两篇博客&#xff0c;友友们我们…
阅读更多...
YOLOv5目标检测学习（7）：验证部分val.py简要分析；训练、验证、推理三文件的关系

YOLOv5目标检测学习（7）：验证部分val.py简要分析；训练、验证、推理三文件的关系

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、val.py的大致结构如下&#xff1a;1.0 准备工作1.获取文件路径2.存储预测信息为.txt文件3.存储预测信息为coco格式的.json文件 1.1 主函数main&#xff1a;…
阅读更多...
[MTK6771] android13系统启用OMAPI 支持esim.me

[MTK6771] android13系统启用OMAPI 支持esim.me

OMAPI是啥&#xff1f;看看谷歌的解释&#xff1a; 说了一大堆懂的人不需要看&#xff0c;不懂的还是看不懂&#xff0c;我就是后者 总之说人话就是&#xff0c;像SIM卡&#xff0c;NFC这类模块需要用到这个东西&#xff0c;那么接着往下看 上层APP想要使用这个OMAPI供应商稳…
阅读更多...
五、分支结构

五、分支结构

一、程序的组织结构 无论程序是大是小&#xff0c;都可以用顺序结构、选择结构和循环结构表示 二、单分支结构 单分支结构&#xff1a;如果表达式的值是True就执行代码&#xff0c;如果表达式的值是False就跳过语句执行后面语句 ageint(input(请输入你的年龄&#xff1a;)) i…
阅读更多...
富格林：正规观念阻挠诱导被骗

富格林：正规观念阻挠诱导被骗

富格林悉知&#xff0c;现货黄金一直是市场上备受关注的投资产品。新手投资者由于经验不足以及没有正规观念指引&#xff0c;容易出现诱导被骗的情况。事实上&#xff0c;拥有正规的观念指引可以在很大程度阻挠我们诱导被骗。下面富格林给大家分享一些阻挠被骗的做单技巧。 找到…
阅读更多...
最新文章

Copyright @ 2022~2023