JavaScript第十二讲:DOM编程“创建,删除,替换,插入节点”

目录

1. 创建节点

2. 删除节点

3. 替换节点

4. 插入节点

使用appendChild()

使用insertBefore()

深入解析与注意事项


1. 创建节点

在HTML DOM中,我们通常使用JavaScript的document.createElement()方法来创建元素节点,使用document.createTextNode()方法来创建文本节点。

示例代码

// 创建一个新的<p>元素节点  
var newElement = document.createElement("p");  // 创建一个文本节点  
var textNode = document.createTextNode("这是一个新的段落。");  // 将文本节点添加到<p>元素节点中  
newElement.appendChild(textNode);  // 将<p>元素节点添加到文档的body中  
document.body.appendChild(newElement);

2. 删除节点

要从DOM中删除一个节点,我们可以使用removeChild()方法。这个方法需要一个参数,即要删除的节点。

示例代码

// 假设我们有一个id为"myElement"的元素要删除  
var elementToRemove = document.getElementById("myElement");  // 获取其父元素  
var parentElement = elementToRemove.parentNode;  // 从父元素中删除该元素  
parentElement.removeChild(elementToRemove);

3. 替换节点

在DOM中,我们通常不直接“替换”一个节点,而是先删除要替换的节点,然后在同一位置插入新的节点。但为了方便,我们可以将这两个步骤封装在一个函数中。

示例代码

function replaceNode(oldNode, newNode) {  var parent = oldNode.parentNode;  if (parent) {  parent.replaceChild(newNode, oldNode);  }  
}  // 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是替换后的段落。");  
newElement.appendChild(newTextNode);  // 假设我们有一个id为"myElement"的元素要替换  
var oldElement = document.getElementById("myElement");  // 调用函数替换节点  
replaceNode(oldElement, newElement);

4. 插入节点

在DOM中,插入节点通常涉及以下几个方法:

  • appendChild(): 将节点添加到父节点的子节点列表的末尾。
  • insertBefore(): 将节点插入到参考节点之前。

示例代码

使用appendChild()

// 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是通过appendChild()添加的段落。");  
newElement.appendChild(newTextNode);  // 将新元素添加到文档的body末尾  
document.body.appendChild(newElement);

使用insertBefore()

// 假设我们有一个id为"referenceElement"的参考元素  
var referenceElement = document.getElementById("referenceElement");  // 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是通过insertBefore()添加的段落,位于参考元素之前。");  
newElement.appendChild(newTextNode);  // 将新元素插入到参考元素之前  
referenceElement.parentNode.insertBefore(newElement, referenceElement);

深入解析与注意事项

  • 在进行DOM操作时,要特别注意节点之间的关系,特别是父子关系和兄弟关系。
  • 在删除或替换节点之前,最好先检查该节点是否存在,以避免因尝试操作不存在的节点而引发错误。
  • 插入节点时,要注意插入的位置和参考节点的选择,以确保新节点被放置在正确的位置。
  • DOM操作可能会对页面的性能和用户体验产生影响,特别是在处理大量数据时。因此,在可能的情况下,应尽量减少不必要的DOM操作,或使用更高效的方法来更新页面内容。

希望今天的讲解对您有所帮助!终会与你重逢sj!

respect!

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

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

相关文章

MQTTX 1.10.0 发布:CLI高级文件管理与配置

MQTTX 1.10.0 版本现已发布&#xff01; 在本次更新中&#xff0c;CLI 版本在文件管理和配置功能方面进行了显著增强。主要更新包括&#xff1a;支持从文件中读取和写入消息、高级配置选项、文本输出模式、以及改进的日志记录。此外&#xff0c;桌面版本现在支持数据库重建&am…

区块链的茶后杂谈

1.前言 读者小伙伴们好久不见&#xff0c;不知大家有没有想念作者&#xff1f;两个月前作者发布了一篇关于区块链技术和数字货币的文章&#xff0c;没想到获得了很多家人们的喜欢&#xff0c;作者很高兴大家也看好这一行业和技术领域&#xff0c;结合最近国际上发生的一些大事&…

IDEA集成Maven

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

《Nest系列 - 3. 掌握常见Nest 装饰器,奠定坚实基础!!!!!!》

nest 一个核心就是依赖注入&#xff0c;而中的大部分功能都是通过装饰器来实现的&#xff0c;那什么是装饰器呢&#xff1f; 就是一个 xxx &#xff0c;诸如 Module&#xff0c;controller, Get, Post 那这样有什么好处呢&#xff1f; 可以把他理解成一个方法&#xff0c;在不改…

物联网 IoT 收录

物联网IoT日常知识收录 thingsboard, nodered是国际大品牌&#xff0c; iotgateway是国内的&#xff0c; 几个scada, pyscada, json-scada都还不错&#xff0c;比较一下。thingsboard-gateway是python系的&#xff0c;如果你愿意&#xff0c;可以用这个作为公司的物联网网关。…

深入探索Jetpack数据绑定(DataBinding)

Jetpack的数据绑定&#xff08;DataBinding&#xff09;库为我们提供了一个强大而灵活的工具&#xff0c;用于将UI组件与数据源绑定在一起。本文将深入探讨数据绑定的高级用法&#xff0c;包括双向绑定、自定义Binding Adapter、使用LiveData和ViewModel&#xff0c;以及如何处…

热虹吸管的传热计算

热对称管和热管通过使用中空管内的两相流体&#xff0c;在特定的距离上传输大量的热量。 更广泛使用的热管使用吸芯结构将液体输送回热端&#xff0c;而热虹吸管是一个简单的空心管&#xff0c;使用重力。 由于缺乏吸芯结构&#xff0c;使得热虹吸管比传统的热管便宜得多。 然…

如何确保 Puppet 配置在复杂网络环境中的可靠分发和同步?

在复杂网络环境中确保 Puppet 配置的可靠分发和同步可以采取以下措施&#xff1a; 网络拓扑规划&#xff1a;在复杂网络环境中&#xff0c;首先需要进行网络拓扑规划&#xff0c;确保网络结构合理&#xff0c;并能够支持可靠的分发和同步机制。 Puppet Master 多节点部署&…

跟《经济学人》学英文:2024年6月22日这期 Think Nvidia looks dear?

Think Nvidia looks dear? American shares could get pricier still Investors are willing to follow whichever narrative paints the rosiest picture 觉得Nvidia看起来很贵&#xff1f;美国股票可能会变得更贵 投资者愿意追随任何一个描绘出最乐观的故事 dear&#x…

LeetCode 274 H指数

1.题图要求: 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。根据维基百科上 h 指数的定义&#xff1a;h 代表“高引用次数” &#xff0c;一名科研人员的 h 指数 是指他&#xff08;她&#…

虚幻引擎 Gerstner Waves -GPU Gems 从物理模型中实现有效的水体模拟

这篇文章重点在于结合GPU Gems一书中有关Gerstner Waves 的数学公式&#xff0c;在虚幻引擎中复现正确的Gerstner Waves和正确的法线 文中内容整理自书中&#xff0c;并附带我的理解&#xff0c;与在虚幻引擎中的实现&#xff0c;可以参考原文看这篇文章&#xff0c;原文网上很…

Redis队列自研组件

背景 年初的时候设计实践过一个课题&#xff1a;SpringBootRedis实现不重复消费的队列&#xff0c;并用它开发了一个年夜饭下单和制作的服务。不知道大家还有没有印象。完成这个课题后&#xff0c;我兴致勃勃的把它运用到了项目里面&#xff0c;可谁曾想&#xff0c;运行不久后…

如何实现PHP开启OPcache?

一、OPcache是什么? 官方介绍:OPcache 通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是 省去了每次加载和解析 PHP 脚本的开销。 是不是有点看不明白? 给人一种朴实无华一点都不重点介绍的感觉? 其实说简单点就是这种缓…

靠AI一年增长15%,商场的春天来了么

文&#xff5c;艺 思 编&#xff5c;王一粟 “在商场全面部署AI机器人仅1年&#xff0c;AI带来的销售占同期整体联营销售额的比重逐步增加&#xff0c;最高达到了15%。” 这是正在银泰百货发生的真实案例。 除了线上电商&#xff0c;百货商场等线下的实体零售也正在尝试…

汇聚荣电商实力好不好?

在数字化浪潮的推动下&#xff0c;电商平台如雨后春笋般涌现&#xff0c;而“汇聚荣”作为其中的一员&#xff0c;其综合实力自然成为业界与消费者关注的焦点。那么&#xff0c;汇聚荣电商的实力究竟如何呢?接下来&#xff0c;我们将从多个维度深入探讨这一问题。 一、品牌影响…

创建和探索VGG16模型

PyTorch在torchvision库中提供了一组训练好的模型。这些模型大多数接受一个称为 pretrained 的参数&#xff0c;当这个参数为True 时&#xff0c;它会下载为ImageNet 分类问题调整好的权重。让我们看一下创建 VGG16模型的代码片段&#xff1a; from torchvision import models…

【JavaScript脚本宇宙】加速您的网站:图像优化工具和库的终极指南

别让大图拖垮你的应用&#xff1a;如何正确优化图像 前言 在数字时代&#xff0c;图像是我们日常生活中不可或缺的一部分。然而&#xff0c;随着图像数量的增加和分辨率的提高&#xff0c;它们也占据了越来越多的存储空间和带宽。为了解决这个问题&#xff0c;开发人员可以使…

什么美业系统好用?美业门店收银系统源码分享、小程序展示

专业美业系统与普通系统相比&#xff0c;更加贴合美业门店的经营需求&#xff0c;提供了更全面、便捷、高效的管理功能&#xff0c;有助于提升门店的服务质量和经营效益。 博弈美业系统包括PC、iPad、手机、小程序四大端口&#xff0c;满足不同人群的各种需求。客户可从小程序…

python并行批量存储mat文件

输入&#xff1a;包含数组的列表arrays_list&#xff0c;以及包含每个数组存储位置的列表save_path_list from concurrent.futures import ThreadPoolExecutor, as_completed from tqdm import tqdm from scipy.io import * def save_array_to_mat(array, filepath):savemat(f…

有什么能和ai聊天的软件?5个软件教你快速和ai进行聊天

有什么能和ai聊天的软件&#xff1f;5个软件教你快速和ai进行聊天 当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术已经逐渐渗透到我们的日常生活中&#xff0c;而与AI进行聊天也成为了一种趋势和乐趣。以下是五款可以和AI进行聊天的软件&#xff0c;它们提…