当前位置： 首页 > news >正文

〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作

news 2026/4/1 8:38:51
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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>

image-20230401110924734

✨ 节点创建操作实例

题目一：请动态创建出一个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>

image-20230401113342122

题目二：请制作九九乘法表（利用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>

image-20230401115011271

✨ 节点的移动

如果将已经挂载到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>

image-20230401134113903

用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>

image-20230401134426194

✨ 节点的删除

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>

image-20230401135153417

✨ 节点的克隆

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>

image-20230401143423595

相关文章：

〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…...

编程日记 2023/11/18 13:16:36

【计算机基础】优雅的PPT就应该这样设计

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…...

编程日记 2023/11/18 13:15:35

Vatee万腾的科技征程：Vatee数字化创新的前沿探讨

在Vatee万腾的科技征程中&#xff0c;我们目睹了一场数字化创新的引领之旅&#xff0c;探讨了Vatee在科技前沿的独到见解。Vatee万腾不仅仅是一家科技公司&#xff0c;更是一支前行不辍的冒险队伍&#xff0c;通过不断突破自我&#xff0c;探索未知领域&#xff0c;引领着数字化…...

编程日记 2023/11/18 13:13:33

【PB续命05】WinHttp.WinHttpRequest的介绍与使用

0 WinHttp.WinHttpRequest简介 winhttp.winhttprequest是Windows操作系统中的一个API函数&#xff0c;用于创建和发送HTTP请求。它可以用于从Web服务器获取数据&#xff0c;或将数据发送到Web服务器。该函数提供了许多选项&#xff0c;例如设置请求头、设置代理服务器、设置超…...

编程日记 2023/11/18 13:12:33

【Linux】进程间是这样通信的--管道篇

TOC 目录 进程间通信的介绍 进程间通信的概念 进程间通信的目的 进程间通信的本质 进程间通信的分类 管道 什么是管道 匿名管道 pipe函数 匿名管道使用步骤 管道读写规则 管道的特点 1、管道内部自带同步与互斥机制 2、管道的生命周期随进程 3、管道提供的是流式…...

编程日记 2023/11/18 13:11:31

Python基础入门例程60-NP60 跳过列表的某个元素(循环语句)

最近的博文： Python基础入门例程59-NP59 提前结束的循环(循环语句)-CSDN博客 Python基础入门例程58-NP58 找到HR(循环语句)-CSDN博客 Python基础入门例程57-NP57 格式化清单(循环语句)-CSDN博客 目录 最近的博文： 描述...

编程日记 2023/11/18 13:10:30

三十二、W5100S/W5500+RP2040树莓派Pico＜UPnP示例＞

文章目录 1 前言2 简介2 .1 什么是UPnP&#xff1f;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 13:08:28

2023.11.18 Hadoop之 YARN

1.简介 Apache Hadoop YARN &#xff08;Yet Another Resource Negotiator&#xff0c;另一种资源协调者&#xff09;是一种新的 Hadoop 资源管理器&#xff0c;它是一个通用资源管理系统和调度平台&#xff0c;可为上层应用提供统一的资源管理和调度。支持多个数据处理框架&…...

编程日记 2023/11/18 13:07:27

ceph 常用命令

bucket 常用命令 查看 realm &#xff08;区域&#xff09; radosgw-admin realm list输出 {"default_info": "43c462f5-5634-496e-ad4e-978d28c2x9090","realms": ["myrgw"] }radosgw-admin realm get{"id": "2cfc…...

编程日记 2023/11/18 13:06:26

6.8完全二叉树的节点个数（LC222-E）

算法&#xff1a; 如果不考虑完全二叉树的特性&#xff0c;直接把完全二叉树当作普通二叉树求节点数&#xff0c;其实也很简单。 递归法&#xff1a; 用什么顺序遍历都可以。 比如后序遍历&#xff08;LRV&#xff09;&#xff1a;不断遍历左右子树的节点数&#xff0c;最后…...

编程日记 2023/11/18 13:05:25

基于协作mimo系统的RM编译码误码率matlab仿真,对比硬判决译码和软判决译码

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ..................................................................... while(Err < TL…...

编程日记 2023/11/18 13:04:24

Django模型层

模型层 与数据库相关的&#xff0c;用于定义数据模型和数据库表结构。 在Django应用程序中&#xff0c;模型层是数据库和应用程序之间的接口&#xff0c;它负责处理所有与数据库相关的操作&#xff0c;例如创建、读取、更新和删除记录。Django的模型层还提供了一些高级功能 首…...

编程日记 2023/11/18 13:03:22

计算机视觉的应用18-一键抠图人像与更换背景的项目应用，可扩展批量抠图与背景替换

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用18-一键抠图人像与更换背景的项目应用&#xff0c;可扩展批量抠图与背景替换。该项目能够让你轻松地处理和编辑图片。这个项目的核心功能是一键抠图和更换背景。这个项目能够自动识别图片中的主体&…...

编程日记 2023/11/18 13:02:21

Redis(哈希Hash和发布订阅模式)

哈希是一个字符类型字段和值的映射表。 在Redis中&#xff0c;哈希是一种数据结构&#xff0c;用于存储键值对的集合。哈希可以理解为一个键值对的集合&#xff0c;其中每个键都对应一个值。哈希在Redis中的作用主要有以下几点&#xff1a; 1. 存储对象&#xff1a;哈希可以用…...

编程日记 2023/11/18 13:01:20

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"和…...

编程日记 2023/11/18 13:00:19

Python与ArcGIS系列（八）通过python执行地理处理工具

目录 0 简述1 脚本执行地理处理工具2 在地理处理工具间建立联系0 简述 arcgis包含数百种可以通过python脚本执行的地理处理工具，这样就通过python可以处理复杂的工作和批处理。本篇将介绍如何利用arcpy实现执行地理处理工具以及在地理处理工具间建立联系。 1 脚本执行地理处理…...

编程日记 2023/11/18 12:59:18

cocos----刚体

刚体&#xff08;Rigidbody&#xff09; 刚体&#xff08;Rigidbody&#xff09;是运动学&#xff08;Kinematic&#xff09;中的一个概念&#xff0c;指在运动中和受力作用后&#xff0c;形状和大小不变&#xff0c;而且内部各点的相对位置不变的物体。在 Unity3D 中&#xff…...

编程日记 2023/11/18 12:58:17

【SAP-HCM】--HR人员信息导入函数

人员基本信息导入函数&#xff1a;HR_MAINTAIN_MASTERDATA 人员其他信息类型导入函数&#xff1a;HR_INFOTYPE_OPERATION 不逼逼&#xff0c;直接上代码&#xff0c;这两个函数还是相对简单易懂的 *根据操作类型查找对应的T529A 操作类型对应的值IF gt_alv IS NOT INITIAL.S…...

编程日记 2023/11/18 12:57:15

【开源】基于JAVA的大学兼职教师管理系统

项目编号&#xff1a; S 004 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S004&#xff0c;文末获取源码。} 项目编号&#xff1a;S004&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 学生教师管…...

编程日记 2023/11/18 12:56:14

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() #复用&#xff0c;代码&#xff0c;精简&#xff0c;复用度高def j99(n1,max10): for i in range(n,max):jifor j in ran…...

编程日记 2023/11/18 12:55:13

Tetrazine-NHBoc,cas：1380500-93-5，四嗪-氨基叔丁酯的结构特点

Tetrazine-NHBoc&#xff08;四嗪-氨基叔丁酯&#xff09;是一种结合了四嗪基团和N-叔丁氧羰基&#xff08;NHBoc&#xff09;保护基的有机化合物&#xff0c;以下是对其的详细介绍&#xff1a;一、基本信息中文名称&#xff1a;四嗪-氨基叔丁酯英文名称&#xff1a;Tetrazine-…...

编程新知 2026/4/1 8:28:23

Graphormer在放射性药物中的应用：螯合剂分子稳定常数与配位能力预测

Graphormer在放射性药物中的应用&#xff1a;螯合剂分子稳定常数与配位能力预测 1. 项目概述 Graphormer是一种基于纯Transformer架构的图神经网络模型&#xff0c;专门为分子图(原子-键结构)的全局结构建模与属性预测而设计。该模型在OGB、PCQM4M等分子基准测试中表现优异&a…...

编程新知 2026/4/1 8:26:23

AI赋能软件测试：基于PyTorch视觉模型实现自动化GUI测试脚本生成效果演示

AI赋能软件测试&#xff1a;基于PyTorch视觉模型实现自动化GUI测试脚本生成效果演示 1. 效果亮点预览 想象一下这样的场景&#xff1a;一个AI系统正在自动测试你的软件界面&#xff0c;它能像人类测试工程师一样"看"懂屏幕上的每个元素&#xff0c;发现那些传统脚本…...

编程新知 2026/4/1 8:06:04

it-tools：Docker一键部署，中文界面即开即用

1. 为什么选择Docker部署it-tools&#xff1f; 最近在帮团队搭建开发环境时&#xff0c;发现很多同事都在反复安装各种零散的小工具——JSON格式化、时间戳转换、密码生成器...既占用本地资源又难以统一管理。直到发现了it-tools这个神器&#xff0c;它把200实用工具打包成Web应…...

编程新知 2026/4/1 8:02:03

Phi-3-mini-4k-instruct-gguf效果实测：128ms首token延迟+98%中文基础任务通过率

Phi-3-mini-4k-instruct-gguf效果实测&#xff1a;128ms首token延迟98%中文基础任务通过率 1. 开篇&#xff1a;轻量级文本生成新选择 最近测试了微软Phi-3系列中的轻量级选手——Phi-3-mini-4k-instruct-gguf模型&#xff0c;结果让人惊喜。这个专门优化过的GGUF版本&#x…...

编程新知 2026/4/1 6:56:20

Python安全开发之简易Xss检测工具（详细注释）

核心代码&#xff1a;import requests # requests 库 - HTTP 请求处理库 # 【常用功能】: # requests.get(url) - 发送 HTTP GET 请求 # requests.post(url, data) - 发送 HTTP POST 请求 # response.text - 获取响应体内容&#xff08;字符串&#xff09; #…...

编程新知 2026/4/1 6:43:59

实战避坑：在Windows上用C++/WinRT搞定双模蓝牙（EDR+Ble）通信的完整流程

实战避坑&#xff1a;在Windows上用C/WinRT搞定双模蓝牙&#xff08;EDRBle&#xff09;通信的完整流程 蓝牙技术在现代设备中无处不在&#xff0c;但对于开发者而言&#xff0c;实现Windows桌面应用与双模蓝牙设备&#xff08;同时支持经典蓝牙EDR和低功耗蓝牙BLE&#xff09;…...

编程新知 2026/4/1 6:41:59

Zephyr与MCUBoot的深度整合：从构建到安全启动的完整指南

1. 为什么需要安全启动&#xff1f; 在嵌入式开发中&#xff0c;设备固件的安全性往往是最容易被忽视的一环。想象一下&#xff0c;如果你的智能门锁固件被恶意篡改&#xff0c;或者医疗设备的程序被非法替换&#xff0c;后果会有多严重&#xff1f;这就是为什么我们需要MCUBoo…...

编程新知 2026/4/1 5:26:59

YUI Compressor CSS压缩黑科技：从background-position到media query的全面优化指南

YUI Compressor CSS压缩黑科技&#xff1a;从background-position到media query的全面优化指南 【免费下载链接】yuicompressor YUI Compressor 项目地址: https://gitcode.com/gh_mirrors/yu/yuicompressor YUI Compressor是一款由Yahoo!开发的终极CSS和JavaScript压缩…...

编程新知 2026/4/1 4:44:22

人工智能准备好进行多模态仇恨言论检测了吗？

摘要 网络仇恨言论针对个人或群体的身份属性进行攻击&#xff0c;传播迅速&#xff0c;带来严重的社会风险。模因&#xff08;结合图像与文本的形式&#xff09;已成为传播仇恨言论的一种隐蔽载体&#xff0c;其解读往往依赖文化背景知识。 然而&#xff0c;现有的多模态仇恨言…...

编程新知 2026/4/1 3:47:33