【前端每日基础】day24——DOM操作

DOM 操作
获取元素
要对网页中的元素进行操作,首先需要获取这些元素。常用的方法有:

document.getElementById(id): 获取具有指定id的元素。
document.getElementsByClassName(className): 获取具有指定类名的所有元素,返回HTMLCollection。
document.getElementsByTagName(tagName): 获取具有指定标签名的所有元素,返回HTMLCollection。
document.querySelector(selector): 获取匹配CSS选择器的第一个元素。
document.querySelectorAll(selector): 获取匹配CSS选择器的所有元素,返回NodeList。

// 通过ID获取元素
let header = document.getElementById("header");// 通过类名获取元素
let items = document.getElementsByClassName("item");// 通过标签名获取元素
let paragraphs = document.getElementsByTagName("p");// 通过CSS选择器获取元素
let firstItem = document.querySelector(".item");
let allItems = document.querySelectorAll(".item");

修改元素内容
可以使用innerHTML、textContent或innerText来修改元素的内容:

let header = document.getElementById("header");// 修改元素的HTML内容
header.innerHTML = "<h1>New Title</h1>";// 修改元素的文本内容
header.textContent = "New Text";// 修改元素的文本内容(不包括隐藏文本)
header.innerText = "New Visible Text";

修改元素属性
可以使用setAttribute和getAttribute来修改和获取元素的属性:

let link = document.querySelector("a");// 获取属性
let href = link.getAttribute("href");// 设置属性
link.setAttribute("href", "https://new-url.com");

也可以直接通过属性来访问和修改:

link.href = "https://new-url.com";

修改样式
可以通过style属性直接修改元素的样式:

let header = document.getElementById("header");// 修改样式
header.style.color = "blue";
header.style.fontSize = "2em";
header.style.backgroundColor = "lightgray";

或者通过添加、移除类来修改样式:

let header = document.getElementById("header");// 添加类
header.classList.add("highlight");// 移除类
header.classList.remove("highlight");// 切换类(如果存在则移除,如果不存在则添加)
header.classList.toggle("highlight");

创建和删除元素
可以使用createElement来创建新元素,使用appendChild、insertBefore等方法来插入元素,使用removeChild来删除元素:

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";// 将新元素添加到现有元素中
document.body.appendChild(newParagraph);// 删除元素
let oldParagraph = document.getElementById("oldParagraph");
document.body.removeChild(oldParagraph);

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

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

相关文章

Redis数据类型(上篇)

前提&#xff1a;&#xff08;key代表键&#xff09; Redis常用的命令 命令作用keys *查看当前库所有的keyexists key判断某个key是否存在type key查看key是什么类型del key 删除指定的keyunlink key非阻塞删除&#xff0c;仅仅将keys从keyspace元数据中删除&#xff0c;真正的…

vueRouter路由总结

https://blog.csdn.net/qq_24767091/article/details/119326884

中国电子节能技术协会数据安全专业委员会筹备会暨标准征集启动会即将开幕

导读&#xff1a;“以高效、安全、绿色数据底座铸就美好未来”为主题的2024数据安全与绿色发展研讨会&#xff0c;中国电子节能技术协会数据安全专业委员会筹备会暨标准征集启动会即将开幕。 绿色发展是高质量发展的底座&#xff0c;绿色化是新一轮科技革命和产业变革的重要趋势…

力扣hot 100:49. 字母异位词分组(python C++)

目录 题目描述&#xff1a;题解&#xff08;python&#xff09;&#xff1a;&#xff08;方法一&#xff1a;排序&#xff09;代码解析代码运行解析 题解&#xff08;C&#xff09;&#xff1a;&#xff08;方法一&#xff1a;排序&#xff09;代码解析&运行解析 原题目链接…

机器学习笔记——K近邻算法、手写数字识别

KNN算法 “物以类聚&#xff0c;人以群分”相似的数据往往拥有相同的类别 其大概原理就是一个样本归到哪一类&#xff0c;当前样本需要归到频次最高的哪个类去 也就是说有一个待分类的样本&#xff0c;然后跟他周围的k个样本来看&#xff0c;k中哪一个类最多&#xff0c;待分类…

Oracle数据库Day01-SELECT语句

一、SQL语句 1. 环境配置与准备 linux端oracle用户打开监听//查看监听状态与开始监听 lsnrctl status lsnrctl start开启数据库sqlplus / as sysdba startup;解锁hr用户样例数据库&#xff0c;给hr用户设置密码并且连接alter user hr account unlock; alter user hr identifie…

2024爆款神器!会声会影2024旗舰版,让你的视频制作技能暴涨,不学真的亏大了!

在数字内容创作的时代&#xff0c;视频编辑已经成为连接创意与现实的重要桥梁。无论是个人Vlog制作、在线教育课程、企业宣传还是专业影视制作&#xff0c;高效而强大的视频编辑软件成为了必不可少的工具。会声会影2024旗舰版&#xff0c;作为一款集先进技术与用户友好界面设计…

常用API(正则表达式、爬取、捕获分组和非捕获分组 )

1、正则表达式 练习——先爽一下正则表达式 正则表达式可以校验字符串是否满足一定的规则&#xff0c;并用来校验数据格式的合法性。 需求&#xff1a;假如现在要求校验一个qq号码是否正确。 规则&#xff1a;6位及20位之内&#xff0c;0不能在开头&#xff0c;必须全部是数字…

30.哀家要长脑子了!---栈与队列

1.388. 文件的最长绝对路径 - 力扣&#xff08;LeetCode&#xff09; 其实看懂了就还好 用一个栈来保存所遍历过最大的文件的绝对路径的长度&#xff0c;栈顶元素是文件的长度&#xff0c;栈中元素的个数是该文件目录的深度&#xff0c;非栈顶元素就是当时目录的长度 检查此…

Qt 5前后调色板差异变化

Qt 5之前&#xff1a; QPalette palette;//调色板 设置背景颜色 palette.setColor(QPalette::Backgound, color...);Qt 5之后&#xff1a; 由原有的 Background 模式 更新为 Window 模式 QPalette palette;//调色板 设置背景颜色 palette.setColor(QPalette::Window, color..…

10.SpringBoot 统一处理功能

文章目录 1.拦截器1.1在代码中的应用1.1.1定义拦截器1.1.2注册配置拦截器 1.2拦截器的作用1.3拦截器的实现 2.统一数据返回格式2.1 为什么需要统⼀数据返回格式&#xff1f;2.2 统⼀数据返回格式的实现 3.统一异常处理4.SpringBoot专业版创建项目无Java8版本怎么办&#xff1f;…

nodejs安装配置

nodejs安装 打开nodejs官网(https://nodejs.org/en/download/package-manager)&#xff0c;参考安装步骤操作。 更新镜像源 输入以下命令&#xff0c;将npm的镜像源设置为淘宝镜像。网上资料中&#xff0c;淘宝镜像地址多为https://registry.npm.taobao.org&#xff0c;这个…

【MATLAB源码-第67期】基于麻雀搜索算法(SSA)的无人机三维地图路径规划,输出最短路径和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 麻雀搜索算法&#xff08;Sparrow Search Algorithm, SSA&#xff09;是一种新颖的元启发式优化算法&#xff0c;它受到麻雀社会行为的启发。这种算法通过模拟麻雀的食物搜索行为和逃避天敌的策略来解决优化问题。SSA通过模拟…

【C++】:vector容器的基本使用

目录 &#x1f352;1&#xff0c;vector的介绍&#x1f352;2&#xff0c;vector的使用&#x1f42f;2.1 vector的构造&#x1f981;2.2 vector iterator 的使用&#x1f33d;2.3 vector 空间增长问题&#x1f353;2.4 vector 增删查改&#x1f42f;2.5 vector 访问及遍历&…

雷军-2022.8小米创业思考-9-爆品模式:产品力超群,具有一流口碑,最终实现海量长销的产品。人人都向往;做减法;重组创新;小白模式

第九章 爆品模式 小米方法论的第三个关键词&#xff0c;就是一切以产品为出发点&#xff0c;打造爆品模式。 大多数人对“爆品”的着眼点仅在于“爆”&#xff0c;也就是产品卖得好。希望产品大卖这没有错&#xff0c;但是“爆”是“品”的结果&#xff0c;爆品是打造出来的&…

【附代码】@hydra.main 没有返回值,如何解决函数返回?

hydra.main 是一个 Python 装饰器&#xff0c;通常与 Hydra 深度学习框架一起使用。它的作用是标识 Hydra 配置文件中的主函数。在 Hydra 中&#xff0c;主函数是一个负责组织整个程序执行流程的函数。这个装饰器告诉 Hydra 这个函数是主函数&#xff0c;但并不要求它有返回值。…

闲话 .NET(7):.NET Core 能淘汰 .NET FrameWork 吗?

前言 虽然说&#xff0c;目前 .NET FrameWork 上的大部分类都已经移植到 .NET Core 上&#xff0c;而且 .NET FrameWork 也已经停止了更新&#xff0c;未来必然是 .NET Core 的天下&#xff0c;但要说现在 .NET Core 就能淘汰 .NET FrameWork&#xff0c;我觉得为时尚早&#…

知识付费已达天花板,太多的割韭菜案例了!

一张图片在网上传播&#xff0c;照片有点讽刺&#xff0c;里面两个人&#xff1a;一个人是OpenAI首席执行官萨姆奥特曼&#xff08;Sam Altman&#xff09;&#xff0c;一位是自称清华博士的网络大V李先生&#xff0c;他们被并称为“AI界两大巨头”。 不过贡献不同&#xff0c…

【AD21】钻孔文件的输出

钻孔文件包含了所有需要在PCB上钻孔的位置、孔径和类型&#xff08;如通孔、盲孔、埋孔&#xff09;的详细信息。板厂可以使用这个文件来控制钻孔机进行精确钻孔。 在PCB源文件页面&#xff0c;菜单栏中点击文件->制造输出->NC Drill Files。 在弹出的新界面&#xff0c…

Linux 信号量

Linux 信号量 一、信号量的基本概念1. 计数信号量&#xff08;Counting Semaphore&#xff09;2. 二进制信号量&#xff08;Binary Semaphore&#xff09; 二 、使用场景1. 信号量需要用到的库系统V IPC头文件 2. 代码演示1. 头文件和结构体定义2. 主函数3. 创建/获取共享内存4…