js操作dom元素

当使用JavaScript操作DOM时,可以通过各种方法来实现对元素的获取、修改、创建、删除等操作。以下是一些详细的代码示例:

1. 获取元素

 

javascript复制代码

// 通过ID获取元素
var elementById = document.getElementById('myElementId');
// 通过类名获取元素集合
var elementsByClass = document.getElementsByClassName('myClassName');
// 通过标签名获取元素集合
var elementsByTagName = document.getElementsByTagName('div');
// 通过CSS选择器获取元素
var elementBySelector = document.querySelector('.myClassName');
// 通过CSS选择器获取元素集合
var elementsBySelector = document.querySelectorAll('.myClassName');

2. 修改元素内容

 

javascript复制代码

// 获取元素并修改其HTML内容
var element = document.getElementById('myElement');
element.innerHTML = '<p>新的HTML内容</p>';
// 获取元素并修改其文本内容
element.innerText = '新的文本内容';
// 获取元素并修改其文本内容(与innerText类似)
element.textContent = '新的文本内容';

3. 修改元素属性

 

javascript复制代码

// 获取元素并设置其属性
var link = document.getElementById('myLink');
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
// 获取元素并获取其属性值
var hrefValue = link.getAttribute('href');
console.log(hrefValue); // 输出: https://example.com
// 删除元素的属性
link.removeAttribute('target');

4. 修改元素样式

 

javascript复制代码

// 获取元素并直接修改其行内样式
var myDiv = document.getElementById('myDiv');
myDiv.style.color = 'red';
myDiv.style.backgroundColor = 'lightgrey';
// 使用classList添加类名
myDiv.classList.add('highlight');
// 使用classList删除类名
myDiv.classList.remove('highlight');
// 检查元素是否包含某个类名
if (myDiv.classList.contains('highlight')) {
console.log('myDiv包含highlight类');
}

5. 创建和添加元素

 

javascript复制代码

// 创建一个新的元素
var newElement = document.createElement('p');
// 设置新元素的文本内容
var textNode = document.createTextNode('这是一个新的段落。');
newElement.appendChild(textNode);
// 将新元素添加到现有元素的子节点列表末尾
var container = document.getElementById('container');
container.appendChild(newElement);
// 在参考节点之前插入新节点
var referenceNode = container.firstChild;
container.insertBefore(newElement, referenceNode);

6. 删除元素

 

javascript复制代码

// 获取要删除的元素
var elementToRemove = document.getElementById('elementToRemove');
// 获取元素的父节点并删除该元素
var parentElement = elementToRemove.parentNode;
parentElement.removeChild(elementToRemove);

这些代码示例只是JavaScript操作DOM的基础部分。在实际应用中,可能会涉及到更复杂的DOM结构和操作,但基本的原理和方法是类似的。记住,DOM操作可能会引起页面重绘和重排,因此应尽量避免频繁的DOM操作,以提高页面性能。

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

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

相关文章

跟着Carl大佬学leetcode之977 有序数组的平方

来点强调&#xff0c;刷题是按照代码随想录的顺序进行的&#xff0c;链接如下https://www.programmercarl.com/本系列是记录一些刷题心得和学习过程&#xff0c;就看到题目自己先上手试试&#xff0c;然后看程序员Carl大佬的解释&#xff0c;自己再敲一遍修修补补&#xff0c;练…

如何安装cuda和cudnn

https://www.bilibili.com/video/BV1sY411c7JS/?spm_id_from333.999.0.0 https://www.bilibili.com/video/BV1q5411d7GD/?spm_id_from333.999.0.0 以上两个链接参考&#xff1a;水果数据集(Fruit-Dataset )水果分类识别训练代码(支持googlenet, resnet, inception_v3, mobil…

msyql中SQL 错误 [1118] [42000]: Row size too large (> 8126)

场景&#xff1a; CREATE TABLE test-qd.eqtree (INSERT INTO test.eqtree (idocid VARCHAR(50) NULL,sfcode VARCHAR(50) NULL,sfname VARCHAR(50) NULL,sfengname VARCHAR(50) NULL,…… ) ENGINEInnoDB DEFAULT CHARSETutf8 COLLATEutf8_general_ci;或 alter table eqtre…

162. 寻找峰值

Problem: 162. 寻找峰值 文章目录 思路解题方法复杂度Code 思路 一看时间复杂度就知道要二分查找&#xff0c;跟最近做的题目一样。 但是我没想清楚二分的点在哪。二分需要满足二段性&#xff0c;果断看题解。 解题方法 令l、r两个指针分别指向数组nums的起始位置和结束位置 mi…

Token 在 LLM

大语言模型不能理解原始文本,所以需要把原始文本转换成大语言模型可以理解的数字表示形式,经过大模型处理以后,需要将该数字表示形式转换为人可以理解的文本。 原始文本到 token 原始文本转换为token序列的过程通常是在LLM的预处理阶段完成的。 在大型语言模型(LLM)中,tok…

力扣:LCR 022. 环形链表 II

力扣&#xff1a;LCR 022. 环形链表 II 给定一个链表&#xff0c;返回链表开始入环的第一个节点。 从链表的头节点开始沿着 next 指针进入环的第一个节点为环的入口节点。如果链表无环&#xff0c;则返回 null。 为了表示给定链表中的环&#xff0c;我们使用整数 pos 来表示链…

docker配置项目镜像

1、Dockerfile构建redis镜像 redis_install.sh #!/bin/bash yum install -y gcc gcc-c make openssl openssl-devel cd /home/redis-6.2.6 make && make PREFIX/usr/local/redis install mkdir -p /usr/local/redis/conf/ cp /home/redis-6.2.6/redis.conf /usr/local/…

学习java时候的笔记(十九)

正则表达式 作用: 校验字符串是否满足规则在一段文本中查找满足要求的内容 字符类(只匹配一个字符) 说明[abc]只能是a,b或c[^abc]除了a,b,c之外的任何字符[a-zA-Z]a 到 z, A 到 Z(范围)[a-d[m-p]]a 到 d, 或 m 到 p[a - z && [def]]a 到 z和def的交集。为: d, e, f…

【树莓派学习】系统烧录及VNC连接、文件传输

【树莓派学习】系统烧录及VNC连接、文件传输 Raspberry Pi is a series of small single-board computers (SBCs) developed in the United Kingdom by the Raspberry Pi Foundation in association with Broadcom. Since 2013, Raspberry Pi devices have been developed and…

Ubuntu20.4版本安装ROS教程

一、配置源 安装成功的Ubuntu系统自带的工具下载速度慢&#xff0c;不太好用&#xff0c;所以我们可以使用国内稳定高速且免费的镜像网站。 清华源&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple/ 阿里云&#xff1a;https://mirrors.aliyun.com/pypi/simple 中科大&…

Comparable 和 Comparator

文章目录 一.Comparable二. Comparator三.对比1. Comparable 接口2. Comparator 接口总结 一.Comparable 源码&#xff1a; public interface Comparable<T> {int compareTo(T o); }返回值&#xff1a; 如果当前对象小于参数对象&#xff0c;则返回负整数。如果当前对象等…

启动 UE4编辑器报 加载 Plugin 失败

启动 UE4编辑器报 加载 Plugin 失败&#xff0c;报如下错误&#xff1a; Plugin ‘SteamVR’ failer to load because module ‘SteamVR’ could not be found. Please ensure the plugin is properly installed, otherwise consider disabling the plugin for this project. …

TorchEEG文档_学习笔记1【代码详解】

文章目录 一、用户文档1.安装Pytorch2.安装TorchEEG3.安装与图算法的插件 二、教程1.使用TorchEEG完成深度学习工作流程2datasets模块3.transforms模块4.models模块5.trainer模块6.使用Vanilla PyTorch训练模型 一、用户文档 1.安装Pytorch TorchEEG依赖于PyTorch,根据系统、…

MYSQL之增删改查(下)

前言&#xff1a; 以下是MySQL最基本的增删改查语句&#xff0c;很多IT工作者都必须要会的命令&#xff0c;也 是IT行业面试最常考的知识点&#xff0c;由于是入门级基础命令&#xff0c;所有所有操作都建立在单表 上&#xff0c;未涉及多表操作。 4.3 高级查询 4.3.1 聚合函…

2024-简单点-假设我要让一个py功能文件变成服务,在网络启动后进行,并且开机自动启动。

功能&#xff1a;假设我要让一个py功能文件变成服务&#xff0c;在网络启动后进行&#xff0c;并且开机自动启动。 cd /etc/systemd/system/ sudo nano xxxxxx.service[Unit] Descriptionwrite whatever you want Afternetwork.target [Service] Typesimple ExecStart/usr/bi…

Navicat 干货 | 了解 PostgreSQL 规则

PostgreSQL 是一个强大的开源关系型数据库管理系统&#xff0c;为增强数据管理和操作提供了丰富的功能。这些功能中包含了规则&#xff0c;这是一种用于控制数据库内部查询和命令处理方式的机制。本文将探讨 PostgreSQL 规则的工作原理&#xff0c;以及它们与触发器的区别&…

N名学生的成绩已在主函数中放入一个带头节点的链表结构中,h指向链表的头节点。请编写函数fun,它的功能是:找出学生的最高分,由函数值返回。

本文收录于专栏:算法之翼 https://blog.csdn.net/weixin_52908342/category_10943144.html 订阅后本专栏全部文章可见。 本文含有题目的题干、解题思路、解题思路、解题代码、代码解析 分别包含C语言、C++、Java、Python四种语言的解法和详细解析。 题干 N名学生的成绩已在主…

实验室三大常用仪器1---示波器的基本使用方法(笔记)

目录 示波器的作用 示波器的基础操作方法 示波器测量突变脉冲 示波器的作用 示波器能帮助我们干什么&#xff1f; 比如说某个电源用万用表测量是稳定的5V输出 但是用示波器一看确实波涛汹涌 这样的电源很可能回导致系统异常工作 又比如电脑和单片机进行串口通信时&#xf…

【C++干货基地】面向对象核心概念 const成员函数 | 初始化列表 | explicit关键字 | 取地址重载

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…

sketchup创建3D打印机的模型

查了一下&#xff0c;这玩意有几个版本&#xff0c;其中一个sketchup free是免费的&#xff0c;到官网上看看 下载 SketchUp | 免费试用 3D 建模软件 | SketchUp 是个在线网页版&#xff0c;然后可以再这个网站上注册一个账号 弄个邮箱试试看 创建好进入后&#xff0c;里面就…