Web APIs-DOM-获取DOM元素、修改属性

最新推荐文章于 2024-08-07 21:26:38 发布
最新推荐文章于 2024-08-07 21:26:38 发布
阅读量337 收藏 1
点赞数 2
分类专栏： Web APIs实用案例 文章标签： 学习 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AAAAA1235555/article/details/123341680
版权

Web APIs-DOM-获取DOM元素、修改属性

1、Web API基本认识

1.1、作用与分类

在这里插入图片描述

1.2、什么是DOM

在这里插入图片描述
在这里插入图片描述

1.3、DOM树

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.4、DOM对象（重点）

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2、获取DOM对象

在这里插入图片描述

2.1、根据CSS选择器来获取DOM元素（重点）

2.1.1、选择匹配的第一个元素

在这里插入图片描述

多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

2.1.2、选择匹配的多个元素

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.2、其他获取DOM元素的方法（了解）

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

3.1、document.write() 方法

在这里插入图片描述

3.2、对象.innerText 属性

在这里插入图片描述

3.3、对象.innerHTML 属性

在这里插入图片描述
在这里插入图片描述

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

4.1、设置/修改元素常用属性

在这里插入图片描述

4.2、设置/修改元素样式属性

在这里插入图片描述

4.2.1、通过 style 属性操作CSS

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.2.2、操作类名(className) 操作CSS

在这里插入图片描述

在这里插入图片描述

4.2.3、操作类名(className) 操作CSS

在这里插入图片描述

在这里插入图片描述

4.3、设置/修改 表单元素 属性

在这里插入图片描述

在这里插入图片描述

5、定时器-间歇函数

5.1、定时器函数介绍

在这里插入图片描述

5.2、定时器函数基本使用

定时器函数可以开启和关闭定时器

5.2.1、开启定时器

在这里插入图片描述
在这里插入图片描述

5.2.2、关闭定时器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6、资料来源：黑马程序员

GT-一二
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web APIs--Dom获取&属性操作
atatsuki的博客
06-20 712
操作元素内容（修改元素的文本更换内容DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。方法：1.对象.innerText 属性2.对象.innerHTML 属性1. 元素innerText 属性将文本内容添加/更新到任意标签位置显示纯文本，不解析标签4.操作元素属性。
Web APIs-获取DOM元素,操作元素内容/属性
2301_76866366的博客
03-23 207
API简述 DOM简述 获取DOM元素的方法 操作元素 操作DOM元素属性 定时器
Web APIS——DOM-获取DOM元素、修改属性
m0_52177571的博客
03-24 1965
目录 一、Web API 基本认知 1. 作用和分类 2. 什么是DOM 3. DOM树 4. DOM对象（重要） 二、获取DOM对象 1. 根据CSS选择器来获取DOM元素 (重点) 1.1 选择匹配的第一个元素 1.2 选择匹配的多个元素 2. 其他获取DOM元素方法（了解） 三、设置/修改DOM元素内容 1. document.write() 2. 元素innerText 属性 3. 元素.innerHTML 属性 四、设置/修改DOM元素属性 1. 设置/修改元素常用
WebAPIs-DOM操作元素属性/自定义属性
ioncannontic的博客
06-28 156
WEB APIs 操作DOM
js-web APIs-day01-dom获取&属性操作
weixin_47175934的博客
08-30 306
javascript-Web APIs-day01-DOM获取&属性操作 （web API基本认知，获取DOM对象，操作元素内容，操作元素属性，定时器-间歇函数，综合案例（用户注册倒计时））
( 四、web APIs ) DOM-获取DOM元素、修改属性
qq_40832034的博客
07-12 717
（1） 选择匹配的第一个元素（2）选择匹配的多个元素DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。就是操作对象使用的语法。 只能将文本内容追加到 前面的位置，不能直接放入想要的盒子里面，只能修改body内容  文本中包含的标签会被解析  将文本内容添加 / 更新到任意标签位置  文本中包含的标签不会被解析，如下图  将文本内容添加/更新到任意标签位置  文本中包含的标签会被解析 如下，之前div就有一个类one，想要保留之前的类： 为了解决className 容易覆盖
Web APIs---获取元素、操作元素
qq_50260510的博客
03-22 200
关于 “获取元素、操作元素” 的小知识
JavaScript之Web APIs-DOM
2301_81022805的博客
07-21 978
标准属性：标签自带的属性，例如class id title等，可以直接用点语法操作自定义属性：在html5中推出的专门的data-自定义属性在标签开头一律以data-开头在DOM对象上一律以dataset对象方式获取。
Web APIs-DOM-节点操作
GTC的博客
03-10 269
Web APIs-DOM-节点操作1、节点操作1.1、DOM-节点1.2、查找节点1.2.1、父节点查找1.2.2子节点查找1.2.3兄弟关系查找1.3、增加节点1.3.1创建节点1.3.2追加节点1.4、删除节点2、时间对象2.1、示例化2.2、时间对象方法2.3、时间戳3、重绘和回流3.1、浏览器是如何进行界面渲染的3.2、重绘和回流（重排） 1、节点操作 1.1、DOM-节点 1.2、查找节点 1.2.1、父节点查找 1.2.2子节点查找 1.2.3兄弟关系查找 1.3、增加节点 1
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
04-23
通过DOM API，我们可以找到特定的元素、修改它们的属性、添加或删除子元素，从而动态地改变网页内容。 二、DOM获取 1. `document.getElementById`: 通过元素的ID获取指定元素。 2. `document.querySelector`: 返回...
04-WebApis-CodeQuiz
03-09
7. **DOM（Document Object Model）操作**: 使用JavaScript操作HTML元素，如添加、删除、修改DOM节点，以实现动态更新页面内容。 8. **错误处理与调试**: 项目中可能会遇到网络错误、API错误或其他JavaScript运行时...
xml-apis-1.4.01.jar.zip
01-10
- **XPath API**：用于在XML文档中定位元素和属性，提供了一种简洁的方式来查询XML数据。 - **XSLT API**：支持XML转换为其他格式，如HTML或PDF，基于XSLT（eXtensible Stylesheet Language Transformations）规范。...
04-web-apis-homework
04-03
【标题】"04-web-apis-homework" 指的是一个关于Web APIs的家庭作业项目，这通常涉及使用JavaScript来与Web服务器进行交互，获取或发送数据。Web APIs是Web应用程序接口，允许开发者通过HTTP协议调用服务功能，如...
Zero123++ 论文学习
calvinpaean的博客
08-07 1051
随着新视图生成模型的涌现，3D 内容生成领域取得了显著进展，这些模型利用了强大的 2D 扩散生成先验知识，这些 2D 扩散模型是在互联网上的大规模数据集训练得到的。如果没有全局条件，针对可见区域生成的内容还是不错的，但是对于不可见区域，则生成质量就急剧下降了，因为模型缺乏推理物体的全局语义的能力。Reference Attention 指的就是，在对模型的输入去噪时，对一个额外的参考图像使用去噪 UNet 模型，并将参考图像中得到的自注意力 key 矩阵和 value 矩阵附加到去噪模型的相应的注意力层。
日常学习--20240806
最新发布
xxm13679073037的博客
08-07 709
调优
【GCC】结合GPT4 延迟梯度学习2：延迟梯度的计算及阈值更新
突围
08-06 78
拥塞控制
HTML5新增元素属性学习
weixin_68441705的博客
08-06 244
placeholder：提示性语句，在文本输入框 上提示用户输入内容，当用户填充内容消失，删除内容又出现（用于提示用户输入用户名，密码，适合短的提示语句）2.datalist 表单新元素 配合input使用，有下拉菜单也可以输入内容（通常用于搜素引擎）autofocus：自动聚焦，进入注册界面，光标自动聚焦在输入框上，用于提升用户体验。min和max ：最大值 最小值 可以配合其他属性使用，用于数值型。required：必填项，用户如果不填，表单无法提交。autocomplete：自动填充，通常用于登录。
Linux shell编程学习笔记68： curl 命令行网络数据传输工具 选项数量雷人（上）
Purpleendurer@CSDN
08-04 1089
在网络时代，有经常需要在网络上传输数据，时我们需要通过网络下载文件，为了满足这种时代需要，Linux提供了众多网络命令，我们今天先研究curl命令。例如，我们可以使用curl从 URL 下载文件，或将文件上传到服务器。
前端WebAPIs实践：排他操作与案例分析
"day02_WebAPIs"的内容深入浅出地讲解了前端开发中的核心概念和技术，从DOM操作到CSS选择器，再到事件处理和动态元素创建，都是提升前端开发者技能的关键组成部分。通过这些实际案例的练习，学习者可以加深对Web API...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GT-一二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值