DOM操作怎样添加、移除、移动、复制、创建和查找节点

DOM(Document Object Model)操作是JavaScript中用于操作HTML或XML文档的一种方式。下面是一些基本的DOM操作:

添加节点
使用appendChild()方法可以将一个节点添加到现有节点的子节点列表的末尾。
let newNode = document.createElement(“p”); // 创建一个新的

元素
newNode.textContent = “这是一个新节点”; // 为新节点添加文本内容document.body.appendChild(newNode); // 将新节点添加到body的末尾
移除节点

使用removeChild()方法可以从父节点的子节点列表中移除一个节点。
let oldNode = document.querySelector("#old-node"); // 选择一个要移除的节点let parent = oldNode.parentNode; // 获取该节点的父节点
parent.removeChild(oldNode); // 从父节点的子节点列表中移除该节点
移动节点

使用removeChild()和appendChild()方法可以将一个节点从一个位置移动到另一个位置。
let nodeToMove = document.querySelector("#node-to-move"); // 选择要移动的节点let newParent = document.querySelector("#new-parent"); // 选择新的父节点
newParent.appendChild(nodeToMove); // 将节点移动到新的父节点的子节点列表的末尾
复制节点

使用cloneNode()方法可以复制一个节点。
let nodeToCopy = document.querySelector("#node-to-copy"); // 选择要复制的节点let newNode = nodeToCopy.cloneNode(true); // 复制该节点,并包括其子节点和属性document.body.appendChild(newNode); // 将复制的节点添加到body的末尾
创建节点

使用createElement()方法可以创建一个新的元素节点。在DOM操作中,创建节点通常使用document.createElement()方法。以下是一个简单的例子,演示如何使用JavaScript在DOM中创建一个新的

元素:

<meta charset="UTF-8">
<title>DOM 操作示例</title></head><body>
<div id="container"></div>
<script>// 创建新的 <p> 元素let newParagraph = document.createElement("p");// 为新元素添加文本内容newParagraph.textContent = "这是一个新段落。";// 将新元素添加到指定的容器中
document.getElementById("container").appendChild(newParagraph);
</script></body></html>

在这个例子中,我们首先使用document.createElement()方法创建一个新的

元素。然后,我们使用textContent属性为该元素添加文本内容。最后,我们使用appendChild()方法将新创建的元素添加到ID为"container"的

元素中。

查找节点
使用querySelector()或querySelectorAll()方法可以查找文档中的元素。

let element = document.querySelector("#element-id"); // 选择具有指定ID的元素let elements = document.querySelectorAll(“p”); // 选择所有

元素

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

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

相关文章

Go语言的sync.Pool如何使用?使用场景具体有哪些?

sync.Pool 是 Go 标准库中提供的一个对象池&#xff08;Object Pool&#xff09;的实现。对象池是一种用于缓存和复用对象的机制&#xff0c;可以在一定程度上减轻内存分配的开销。sync.Pool 专门用于管理临时对象&#xff0c;适用于一些需要频繁创建和销毁的短暂对象&#xff…

Golang 泛型

前言 泛型是在Go 1.18版本中引入的&#xff0c;它允许编写可以在多种数据类型上工作的函数和数据类型。这样做可以增加代码的复用性并减少重复 使用 类型参数&#xff08;Type Parameters&#xff09;&#xff1a; 你可以在函数或类型定义上声明类型参数&#xff0c;使其具有…

白嫖aws创建Joplin server服务器

网上有很多的Joplin服务器的搭建教程&#xff0c;但是基本都是抄来抄去&#xff0c;对初学者实在是太不友好了。 话不多说&#xff0c;说干就干&#xff0c;自己从头找资料搭了一个&#xff0c;这可能是全网最好的Joplin服务器搭建教程了。 aws服务器 aws的服务器还是很香的&…

企业用WhatsApp营销的好处有哪些?

1.建立良好的客户关系 WhatsApp是全球用户喜爱的即时通信软件&#xff0c;使用WhatsApp与客户沟通&#xff0c;可拉进企业和客户双方的距离。使用WhatsApp会话和消息推送功能&#xff0c;企业和用户可实时开展消息对话&#xff0c;及时解决客户咨询与疑虑&#xff0c;构建便捷…

移动通信原理与关键技术学习之信道编解码(5)

先回顾调制的过程&#xff1a;调制就是对信号源的信息进行处理加到载波上&#xff0c;使其变为适合于信道传输的形式的过程&#xff0c;就是使载波随信号而改变的技术。 1.什么是IQ调制&#xff1f; 答&#xff1a;将数据分为两路&#xff0c;分别进行载波调制&#xff0c;两…

PIG框架学习2——资源服务器的配置详解

一、前言 1、pig资源服务器的配置 Spring Security oauth2相关的依赖是在pigx-common-security模块中引入的&#xff0c;其他模块需要进行token鉴权的&#xff0c;需要在微服务中引入pigx-common-security模块的依赖&#xff0c;从而间接引入相关的Spring security oauth2依赖…

39 C++ 模版中的参数如果 是 vector,list等集合类型如何处理呢?

在前面写的例子中&#xff0c;模版参数一般都是 int&#xff0c;或者一个类Teacher&#xff0c;假设我们现在有个需求&#xff1a;模版的参数要是vector&#xff0c;list这种结合类型应该怎么写呢&#xff1f; //当模版中的类型是 vector &#xff0c;list 等集合类型的时候的处…

【LeetCode】27. 移除元素(简单)——代码随想录算法训练营第1天

题目描述 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出…

R语言【base】——sample():随机取样和排列

Package base version 4.2.0 Description sample() 使用替换或不替换从参数【x】的元素中获取指定大小的样本。 Usage sample(x, size, replace FALSE, prob NULL)sample.int(n, size n, replace FALSE, prob NULL,useHash (n > 1e07 && !replace &&…

20240110在ubuntu20.04下重启samba服务

20240110在ubuntu20.04下重启samba服务 百度搜索&#xff1a;samba restart https://www.python100.com/html/78028.html 重启samba命令详解 更新&#xff1a;2023-05-17 16:04 一、重启samba命令 重启samba可以使用以下命令&#xff1a; /etc/init.d/smb restart 或者 syste…

中国智造闪耀CES | 木牛科技在美国CES展亮相多领域毫米波雷达尖端方案

素有全球科技潮流“风向标”之称的2024国际消费类电子产品展&#xff08;CES&#xff09;&#xff0c;于1月9-12日在美国拉斯维加斯会议中心举办。CES是全球最大的消费电子和消费技术展览会之一&#xff0c;汇集了世界各地优秀的消费电子和科技公司&#xff0c;带着最好的产品来…

uniapp项目怎么删除顶部导航栏

uniapp去掉顶部导航的方法&#xff1a; 1、去掉所有导航栏 "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#007AFF"…

Apache ActiveMQ RCE CNVD-2023-69477 CVE-2023-46604

漏洞简介 Apache ActiveMQ官方发布新版本&#xff0c;修复了一个远程代码执行漏洞&#xff0c;攻击者可构造恶意请求通过Apache ActiveMQ的61616端口发送恶意数据导致远程代码执行&#xff0c;从而完全控制Apache ActiveMQ服务器。 影响版本 Apache ActiveMQ 5.18.0 before 5.1…

Windows系统下python版本Open3D-0.18.0 的快速安装与使用

目录 一、安装Anaconda3二、安装open3d三、测试代码四、结果展示五、测试数据 Windows系统下python版本Open3D-0.18.0 的快速安装与使用由CSDN点云侠原创&#xff0c;爬虫自重。如果你不是在点云侠的博客中看到该文章&#xff0c;那么此处便是不要脸的爬虫。 一、安装Anaconda…

Hive基础知识(八):Hive对数据库的增删改查操作

1. 创建数据库 CREATE DATABASE [IF NOT EXISTS] database_name [COMMENT database_comment]#注释 [LOCATION hdfs_path]#指定当前库的hdfs目录 [WITH DBPROPERTIES (property_nameproperty_value,...)]; #备注创建作者和创建时间 1&#xff09;创建一个数据库&#xff0c;数据…

【机器学习300问】2、机器学习分为哪几类?

一、监督学习 监督学习&#xff08;Supervised Learning&#xff09;是机器学习和人工智能中的一种算法学习训练方式。它利用有标签的数据&#xff08;通常称为训练数据&#xff09;作为输入&#xff0c;训练一个模型来学习输入和输出之间的关系。模型学习后可以用于预测新的、…

Linux 常用进阶指令

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 其他…

华为机试真题实战应用【赛题代码篇】-快递投放问题(附Java和C++代码实现)

目录 问题描述 解题思路 代码实现 Java 代码2 C++ 问题描述 有N个快递站点用字符串标识,某些站点之间有道路连接。每个站点有一些包裹要运输,每个站点间的包裹不重复, 路上有检查站会导致部分货物无法通行

SQL语句中EXISTS的终极指南

SQL语句中EXISTS的终极指南 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将深入探讨在SQL语句中经常用到的一项强大工具——“EXISTS”&#…

最实用的 8 个免费 Android 数据恢复软件

如果您正在寻找最好的免费 Android 数据恢复软件&#xff0c;那就不用再犹豫了&#xff0c;因为我已经列出了最好的软件。不可否认&#xff0c;智能手机和平板电脑等 Android 设备正在与技术一起发展。与以前相比&#xff0c;它们也更加融入了我们的日常生活。 Android 智能手…