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

2024-05-27 23:28

本文主要是介绍【前端每日基础】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);

这篇关于【前端每日基础】day24——DOM操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1008899

相关文章

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

MySQL追踪数据库表更新操作来源的全面指南

《MySQL追踪数据库表更新操作来源的全面指南》本文将以一个具体问题为例,如何监测哪个IP来源对数据库表statistics_test进行了UPDATE操作,文内探讨了多种方法,并提供了详细的代码... 目录引言1. 为什么需要监控数据库更新操作2. 方法1:启用数据库审计日志(1)mysql/mariad

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h