〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作
- 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
- 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
- 🏆 白宝书系列
- 🏅 启示录 - 攻城狮的自我修养
- 🏅 Python全栈白宝书
- 🏅 ChatGPT实践指南白宝书
- 🏅 产品思维训练白宝书
- 🏅 全域运营实战白宝书
- 🏅 大前端全栈架构白宝书
文章目录
- ⭐ 节点操作
- 🌟 节点的创建、移除、克隆
- ✨ 节点的创建
- ✨ 节点创建操作实例
- ✨ 节点的移动
- ✨ 节点的删除
- ✨ 节点的克隆
⭐ 节点操作
🌟 节点的创建、移除、克隆
✨ 节点的创建
document.createElement()方法用于创建一个指定tagname的HTML元素但是新创建出来的节点是“孤儿节点”，
它并没有被挂载到DOM树上，我们无法看见它必须继续使用
appendChild()或insertBefore()方法将孤儿节点插入到DOM树上。
appendchild()，就是追加一个子节点的意思。任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点。语法：
父节点.appendChild(孤儿节点)；
insertBefore()，就是在前方插入节点的意思。任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，成为它的“标杆子节点”之前的节点语法：
父节点.insertBefore(孤儿节点，标杆节点);
示例代码：
<body><div id="box"><p>段落1</p><p>段落2</p><p>段落3</p></div><script>//定义节点变量，获取div标签var oBox = document.getElementById('box');//定义节点变量，获取p标签var oPs = oBox.getElementsByTagName('p');//创建一个孤儿节点pvar oP = document.createElement('P');oP.innerHTML = '测试' //修改孤儿节点的内容 oBox.appendChild(oP); //上树--加到最后一个子节点//再创建一个孤儿节点pvar oP1 = document.createElement('p');oP1.innerHTML = '插入标杆节点之前'; //修改孤儿节点的内容oBox.insertBefore(oP1, oPs[1]); //上树--插入到编号为1的p标签之前</script>
</body>
✨ 节点创建操作实例
题目一：请动态创建出一个20行12列的表格
题目分析：使用for循环语句，循环创建20次tr，循环内嵌套一个for循环，创建12次td
代码如下：
<body><div id="box"></div><script>//请动态创建出一个20行12列的表格var oBox = document.getElementById('box');//创建节点---tablevar oTable = document.createElement('table');oBox.appendChild(oTable); //插入table标签//创建节点---trfor (var i = 1; i <= 20; i++) {var oTr = document.createElement('tr');oTable.appendChild(oTr);//创建节点---tdfor(var j = 1; j <= 12; j++) {var oTd = document.createElement('td');oTr.appendChild(oTd);}}</script>
</body>
题目二：请制作九九乘法表（利用DOM节点操作）
题目分析：和上面的题目一样，创建表格，然后在表格里面修改内容，例如1*1=2…；需要注意的是九九乘法表不是一个方方正正的表格，而是每一行的列数都比前一行多一个，所以循环嵌套的时候，循环的次数要思考清楚
代码如下：
<body><div id='box'></div><script>//请制作九九乘法表（利用DOM节点操作）var oBox = document.getElementById('box');//创建节点---tablevar oTable = document.createElement('table');oBox.appendChild(oTable);//创建节点---trfor (var i = 1; i <= 9; i++) {var oTr = document.createElement('tr');oTable.appendChild(oTr);//创建节点---tdfor (var j = 1; j <= i; j++) { //数以j的循环次数var oTd = document.createElement('td');oTd.innerHTML = j + '*' + i + '=' + i*j; //填入内容oTr.appendChild(oTd);}}</script>
</body>
✨ 节点的移动
如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动
语法：
新父节点.appendChild(已经有父亲的节点);语法：
新父节点.insertBefore(已经有父亲的节点，标杆子节点);这意味着一个节点
不能同时位于DOM树的两个位置
示例代码：
用appenChild()移动：
<body><div id="box1"><p id="para">我是段落</p></div><div id="box2"></div><script>//将#box1中的p标签移动到#box2中var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var para = document.getElementById('para');//用appendChild()移动box2.appendChild(para);</script>
</body>
用insertBefore()移动：
<body><div id="box1"><p id="para">我是段落</p></div><div id="box2"><p>我是box2原有段落</p><p>我是box2原有段落</p><p>我是box2原有段落</p><p>我是box2原有段落</p></div><script>//将#box1中的p标签移动到#box2中var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var para = document.getElementById('para');var ps_inbox2 = box2.getElementsByTagName('p');//用insertBefore()移动box2.insertBefore(para, ps_inbox2[0]);</script>
</body>
✨ 节点的删除
removeChild()方法从DOM中删除一个子节点语法：
父节点.removeChild(要删除的子节点)注意：节点不能主动删除自己，必须由父节点删除它
示例代码：
<body><div id="box"><p>我是段落0</p><p>我是段落1</p><p>我是段落2</p></div><script>//删除#box里的第二个段落var box = document.getElementById('box');var ps = box.getElementsByTagName('p');box.removeChild(ps[1]);</script>
</body>
✨ 节点的克隆
cloneNode()方法可以克隆节点，克隆出的节点是“孤儿节点”语法：
var 孤儿节点 = 老节点.cloneNode();还可以往
cloneNode()方法里传入参数一个布尔值参数表示是否采用深度克隆，传入true则深度克隆，该节点的所有后代节点都会被克隆；如果为false,则只克隆该节点本身。语法：
var 孤儿节点 = 老节点.cloneNode(true);
示例代码：
<body><div id="box1"><ul><li>python</li><li>java</li><li>c</li><li>javascript</li></ul></div><div id="box2"></div><script>//将#box1中的列表克隆到box2中var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var ul_inbox1 = box1.getElementsByTagName('ul')[0]; //注意用getElementsByTagName得到的是一个数组，要用下标才能取到里面的值//克隆var ul = ul_inbox1.cloneNode();//上树box2.appendChild(ul);</script>
</body>
相关文章：
〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作
说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作…...
【计算机基础】优雅的PPT就应该这样设计
📢：如果你也对机器人、人工智能感兴趣，看来我们志同道合✨ 📢：不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢：文章若有幸对你有帮助，可点赞 👍…...
Vatee万腾的科技征程：Vatee数字化创新的前沿探讨
在Vatee万腾的科技征程中，我们目睹了一场数字化创新的引领之旅，探讨了Vatee在科技前沿的独到见解。Vatee万腾不仅仅是一家科技公司，更是一支前行不辍的冒险队伍，通过不断突破自我，探索未知领域，引领着数字化…...
【PB续命05】WinHttp.WinHttpRequest的介绍与使用
0 WinHttp.WinHttpRequest简介 winhttp.winhttprequest是Windows操作系统中的一个API函数，用于创建和发送HTTP请求。它可以用于从Web服务器获取数据，或将数据发送到Web服务器。该函数提供了许多选项，例如设置请求头、设置代理服务器、设置超…...
【Linux】进程间是这样通信的--管道篇
TOC 目录 进程间通信的介绍 进程间通信的概念 进程间通信的目的 进程间通信的本质 进程间通信的分类 管道 什么是管道 匿名管道 pipe函数 匿名管道使用步骤 管道读写规则 管道的特点 1、管道内部自带同步与互斥机制 2、管道的生命周期随进程 3、管道提供的是流式…...
)
Python基础入门例程60-NP60 跳过列表的某个元素(循环语句)
最近的博文： Python基础入门例程59-NP59 提前结束的循环(循环语句)-CSDN博客 Python基础入门例程58-NP58 找到HR(循环语句)-CSDN博客 Python基础入门例程57-NP57 格式化清单(循环语句)-CSDN博客 目录 最近的博文： 描述...
三十二、W5100S/W5500+RP2040树莓派Pico＜UPnP示例＞
文章目录 1 前言2 简介2 .1 什么是UPnP？2.2 UPnP的优点2.3 UPnP数据交互原理2.4 UPnP应用场景 3 WIZnet以太网芯片4 UPnP示例概述以及使用4.1 流程图4.2 准备工作核心4.3 连接方式4.4 主要代码概述4.5 结果演示 5 注意事项6 相关链接 1 前言 随着智能家居、物联网等…...
2023.11.18 Hadoop之 YARN
1.简介 Apache Hadoop YARN （Yet Another Resource Negotiator，另一种资源协调者）是一种新的 Hadoop 资源管理器，它是一个通用资源管理系统和调度平台，可为上层应用提供统一的资源管理和调度。支持多个数据处理框架&…...
ceph 常用命令
bucket 常用命令 查看 realm （区域） radosgw-admin realm list输出 {"default_info": "43c462f5-5634-496e-ad4e-978d28c2x9090","realms": ["myrgw"] }radosgw-admin realm get{"id": "2cfc…...
6.8完全二叉树的节点个数（LC222-E）
算法： 如果不考虑完全二叉树的特性，直接把完全二叉树当作普通二叉树求节点数，其实也很简单。 递归法： 用什么顺序遍历都可以。 比如后序遍历（LRV）：不断遍历左右子树的节点数，最后…...
基于协作mimo系统的RM编译码误码率matlab仿真,对比硬判决译码和软判决译码
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ..................................................................... while(Err < TL…...
Django模型层
模型层 与数据库相关的，用于定义数据模型和数据库表结构。 在Django应用程序中，模型层是数据库和应用程序之间的接口，它负责处理所有与数据库相关的操作，例如创建、读取、更新和删除记录。Django的模型层还提供了一些高级功能 首…...
计算机视觉的应用18-一键抠图人像与更换背景的项目应用，可扩展批量抠图与背景替换
大家好，我是微学AI，今天给大家介绍一下计算机视觉的应用18-一键抠图人像与更换背景的项目应用，可扩展批量抠图与背景替换。该项目能够让你轻松地处理和编辑图片。这个项目的核心功能是一键抠图和更换背景。这个项目能够自动识别图片中的主体&…...
Redis(哈希Hash和发布订阅模式)
哈希是一个字符类型字段和值的映射表。 在Redis中，哈希是一种数据结构，用于存储键值对的集合。哈希可以理解为一个键值对的集合，其中每个键都对应一个值。哈希在Redis中的作用主要有以下几点： 1. 存储对象：哈希可以用…...
php正则表达式汇总
php正则表达式有"/pattern/“、”“、”$“、”.“、”[]“、”[]“、”[a-z]“、”[A-Z]“、”[0-9]“、”\d"、“\D”、“\w”、“\W”、“\s”、“\S”、“\b”、“*”、“”、“?”、“{n}”、“{n,}”、“{n,m}”、“\bword\b”、“(pattern)”、“x|y"和…...
Python与ArcGIS系列（八）通过python执行地理处理工具
目录 0 简述1 脚本执行地理处理工具2 在地理处理工具间建立联系0 简述 arcgis包含数百种可以通过python脚本执行的地理处理工具，这样就通过python可以处理复杂的工作和批处理。本篇将介绍如何利用arcpy实现执行地理处理工具以及在地理处理工具间建立联系。 1 脚本执行地理处理…...
cocos----刚体
刚体（Rigidbody） 刚体（Rigidbody）是运动学（Kinematic）中的一个概念，指在运动中和受力作用后，形状和大小不变，而且内部各点的相对位置不变的物体。在 Unity3D 中ÿ…...
【SAP-HCM】--HR人员信息导入函数
人员基本信息导入函数：HR_MAINTAIN_MASTERDATA 人员其他信息类型导入函数：HR_INFOTYPE_OPERATION 不逼逼，直接上代码，这两个函数还是相对简单易懂的 *根据操作类型查找对应的T529A 操作类型对应的值IF gt_alv IS NOT INITIAL.S…...
【开源】基于JAVA的大学兼职教师管理系统
项目编号： S 004 ，文末获取源码。 \color{red}{项目编号：S004，文末获取源码。} 项目编号：S004，文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 学生教师管…...
Pyhon函数
import time # # for i in range(1,10): # j1 # for j in range(1,i1): # print(f"{i}x{j}{i*j} " ,end) # print() #复用，代码，精简，复用度高def j99(n1,max10): for i in range(n,max):jifor j in ran…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
MMaDA: Multimodal Large Diffusion Language Models
CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器
第一章 引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...
高危文件识别的常用算法：原理、应用与企业场景
高危文件识别的常用算法：原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...