JavaScript DOM—节点操作

Hi i,m JinXiang

⭐ 前言 ⭐

本篇文章主要介绍在在JavaScript DOM 节点操作以及部分理论知识

🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

目录

 什么是DOM？

DOM概述

 什么是节点操作？

一、节点操作概述

二、使用节点操作

1、创建节点 createElement()

2、添加节点 appendChild()

3、删除节点 removeChild()

4、替换节点 replaceChild()

5、修改节点 innerHTML

6、查询节点 getElementById()

三、总结节点操作使用

 什么是DOM？

文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。

DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。

DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。文档节点的子节点可以是元素节点、属性节点、文本节点、注释节点等。元素节点代表HTML或XML中的一个元素，属性节点代表元素的属性，文本节点代表元素之间的文本内容，注释节点代表文档中的注释。

通过DOM，可以使用节点对象的属性和方法来访问和操作节点的属性和内容。例如，可以使用getElementById方法通过元素ID获取元素节点对象，可以使用getAttribute方法获取元素的属性值，可以使用innerHTML属性来获取或设置元素的HTML内容，等等。

DOM具有广泛的应用，它是构建动态网页、创建交互式web应用和实现文档操作的重要基础。开发者可以使用DOM来处理表单验证、动态生成内容、响应用户交互、动态修改样式等。DOM的标准化使得不同浏览器都支持相同的API，因此可以在不同的浏览器中保持一致的开发体验。

DOM概述

在JavaScript中，DOM（文档对象模型）是一种以树状结构的形式表示HTML或XML文档的编程接口。它允许开发人员通过JavaScript代码访问和操作文档中的元素、属性和内容。

DOM分为三个层次：

  1. 文档层次结构：表示整个HTML或XML文档的树状结构，包括文档节点、元素节点、文本节点等。

  2. 元素层次结构：表示HTML或XML文档中的元素关系。每个元素节点都有一个父节点和零个或多个子节点。

  3. 节点层次结构：表示文档中的每个节点，包括元素节点、文本节点、注释节点等。每个节点都有相关的属性和方法，用于操作和访问节点的内容和属性。

通过JavaScript的DOM API，开发人员可以使用各种方法和属性来遍历、查找、添加、删除和修改文档中的元素和内容。例如，可以使用getElementById方法通过元素的ID获取元素对象，使用innerHTML属性来获取或设置元素的HTML内容，使用appendChild方法将一个节点添加为另一个节点的子节点等。

DOM为开发人员提供了一种方便的方式来与HTML或XML文档进行交互，使得可以通过JavaScript来动态地更改网页的内容、样式和结构。它是Web开发中重要的一部分，广泛用于创建交互性和动态效果的网页应用程序。

 什么是节点操作？

一、节点操作概述

节点操作指的是对HTML文档中的DOM节点进行创建、修改、删除、查询等操作的过程。DOM（Document Object Model）是一种以树形结构表示HTML文档的方式，每个HTML元素都被表示为一个节点，节点之间存在父子关系、兄弟关系等。通过节点操作，我们可以动态地修改HTML文档的内容、结构和样式。

节点操作的概述如下：

  1. 创建节点：可以使用 DOM 提供的方法来创建新的节点，例如使用 createElement 方法创建元素节点，使用 createTextNode 方法创建文本节点等。

  2. 添加节点：可以使用 appendChild 方法将一个节点添加到另一个节点的末尾，或者使用 insertBefore 方法将一个节点插入到指定位置。

  3. 删除节点：可以使用 removeChild 方法从父节点中移除一个节点。

  4. 替换节点：可以使用 replaceChild 方法将一个节点替换为另一个节点。

  5. 修改节点：可以使用节点的属性和方法来修改节点的内容、样式等。例如，使用 nodeValue 属性来修改文本节点的值，使用 setAttribute 和 removeAttribute 方法来修改或删除元素节点的属性。

  6. 查询节点：可以使用查询节点的方法来获取文档中的节点。例如，使用 getElementById 方法根据 id 获取指定的元素节点，使用 getElementsByTagName 方法获取指定标签名的元素集合等。

通过节点操作，开发者可以对文档的结构和内容进行灵活的控制和修改。节点操作是 DOM 编程重要的一部分，它使得开发者能够动态地修改和更新文档，实现网页的交互性和动态性。

二、使用节点操作

使用节点操作可以通过以下代码实现：

1、创建节点 createElement()

要创建一个新的元素节点，可以使用document.createElement()方法。该方法接受一个参数，即要创建的元素的标签名。

以下是一个创建新节点的示例代码：

// 创建新节点
var newElement = document.createElement("div");// 添加节点属性
newElement.setAttribute("id", "myDiv");
newElement.setAttribute("class", "myClass");// 添加文本内容
var newText = document.createTextNode("Hello World");
newElement.appendChild(newText);// 添加到父节点
var parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);

在这个例子中，我们首先使用createElement()方法创建了一个新的div元素节点。然后，我们使用setAttribute()方法为新节点添加了id和class属性。

接下来，我们创建了一个文本节点，并使用appendChild()方法将其添加到新节点中。

最后，我们通过getElementById()方法获取了一个父节点，并使用appendChild()方法将新节点添加到父节点中。通过这些步骤，我们成功地创建了一个新节点，并将其添加到了HTML文档中。

2、添加节点 appendChild()

要向现有的父节点中添加子节点，可以使用appendChild()方法。该方法接受一个参数，即要添加的子节点。

以下是一个向父节点添加子节点的示例代码：

// 获取父节点
var parentElement = document.getElementById("parent");// 创建新节点
var newElement = document.createElement("div");// 添加子节点到父节点中
parentElement.appendChild(newElement);

在这个例子中，我们首先使用getElementById()方法获取了一个父节点。然后，我们使用createElement()方法创建了一个新的div元素节点。最后，我们使用appendChild()方法将新节点添加到父节点中。通过这些步骤，我们成功地向父节点中添加了一个子节点。

3、删除节点 removeChild()

要删除一个节点，可以使用removeChild()方法。该方法接受一个参数，即要删除的节点。

以下是一个删除节点的示例代码：

// 获取要删除的节点
var elementToRemove = document.getElementById("element-to-remove");// 获取要删除节点的父节点
var parentElement = elementToRemove.parentNode;// 从父节点中删除要删除的节点
parentElement.removeChild(elementToRemove);

在这个例子中，我们首先使用getElementById()方法获取要删除的节点。然后，我们使用parentNode属性获取该节点的父节点。最后，我们使用removeChild()方法从父节点中删除要删除的节点。这样，我们成功地删除了指定的节点。

4、替换节点 replaceChild()

要替换一个节点，可以使用replaceChild()方法。该方法接受两个参数，第一个参数是要替换的新节点，第二个参数是要被替换的旧节点。

以下是一个替换节点的示例代码：

// 创建新节点
var newElement = document.createElement("div");
newElement.textContent = "这是新节点";// 获取要替换的旧节点
var oldElement = document.getElementById("element-to-replace");// 获取要被替换节点的父节点
var parentElement = oldElement.parentNode;// 替换旧节点为新节点
parentElement.replaceChild(newElement, oldElement);

在这个例子中，我们首先使用createElement()方法创建了一个新节点，并设置了其文本内容。

然后，我们使用getElementById()方法获取要被替换的旧节点。

接下来，我们使用parentNode属性获取要被替换节点的父节点。最后，我们使用replaceChild()方法将新节点替换旧节点。这样，我们成功地替换了节点。

5、修改节点 innerHTML

要修改一个节点的内容，可以使用textContent属性或innerHTML属性来设置节点的新内容。

以下是一个修改节点内容的示例代码：

// 获取要修改的节点
var element = document.getElementById("element-to-modify");// 使用textContent属性修改节点内容
element.textContent = "新的内容";// 使用innerHTML属性修改节点内容
element.innerHTML = "<strong>新的内容</strong>";

在这个例子中，我们首先使用getElementById()方法获取要修改的节点。

然后，我们可以使用textContent属性将节点的文本内容设置为新的内容。或者，我们可以使用innerHTML属性将节点的HTML内容设置为新的内容。这样，我们就成功地修改了节点的内容。

6、查询节点 getElementById()

要查询节点，可以使用querySelector()方法或getElementById()方法来选择节点。

以下是一个查询节点的示例代码：

// 使用querySelector()方法查询节点
var element1 = document.querySelector("#element-to-query");// 使用getElementById()方法查询节点
var element2 = document.getElementById("element-to-query");// 打印查询到的节点
console.log(element1);
console.log(element2);

在这个例子中，我们首先使用querySelector()方法通过CSS选择器来查询节点。在querySelector()方法中，我们可以使用类名、标签名、ID等选择器来指定要查询的节点。

然后，我们使用getElementById()方法使用节点的ID来查询节点。最后，我们使用console.log()方法将查询到的节点打印出来。

通过这些节点操作，我们可以动态地修改HTML文档的结构和内容，实现各种交互和功能。

三、总结节点操作使用

以下是总结节点操作的表格形式：

操作类型操作使用描述
获取表格元素使用 getElementById、getElementsByTagName 等方法来获取表格元素
创建表格元素使用 createElement 方法创建表格元素，如 &lt;table>、&lt;tr>、&lt;td> 等
添加表格行和单元格使用 insertRow 方法向表格中添加行，使用 insertCell 方法向行中添加单元格
删除表格行和单元格使用 deleteRow 方法删除表格中的行，使用 deleteCell 方法删除行中的单元格
修改表格内容使用节点对象的属性或方法来修改表格的内容，如 innerHTML 属性来修改表格元素的 HTML 内容
获取和修改表格属性使用节点对象的属性来获取和修改表格的属性，如 getAttribute、setAttribute 等

通过以上表格，可以清晰地了解节点操作的不同类型及其描述。这些操作可用于对表格进行增删改查等操作，以实现对表格数据的动态更新和操作。

总结不易，希望宝宝们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！如有问题，欢迎评论区批评指正😁

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

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

相关文章

oracle json包 解析JSON

oracle json包 解析JSON

Oracle数据库中的JSON功能包可以用来解析和处理JSON数据。该功能包提供了一组用于解析和操作JSON数据的函数和过程。 要使用JSON功能包解析JSON数据&#xff0c;首先需要将JSON数据保存为一个Oracle数据库中的JSON类型的列或变量。然后&#xff0c;可以使用JSON功能包中的函数…
阅读更多...
亚信安慧AntDB数据库：企业核心业务系统数据库升级改造的可靠之选

亚信安慧AntDB数据库：企业核心业务系统数据库升级改造的可靠之选

在近期召开的“2023年国有企业应用场景发布会”上&#xff0c;亚信安慧公司的核心数据库产品AntDB闪耀登场&#xff0c;技术总监北陌先生针对企业核心业务系统数据库升级改造的关键议题发表了深度分享。他从研发、工程实施和运维管理三个维度细致剖析了当前企业在进行数据库升级…
阅读更多...
Python - 深夜数据结构与算法之 DP - 进阶

Python - 深夜数据结构与算法之 DP - 进阶

目录 一.引言 二.经典算法实战 1.House-Robber [198] 2.House-Robber-2 [213] 3.Best-Sell-Time [121] 4.Best-Sell-Time-2 [122] 5.Best-Sell-Time-3 [123] 6.Best-Sell-Time-4 [188] 7.Best-Sell-Time-Coldown [309] 8. Best-Sell-Time-Fee [714] 三.总结 一.引言…
阅读更多...
操作系统原理

操作系统原理

操作系统原理 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一同探索计算机科学领域中的基石之一——操作系统原理。 1. 什么是操作系统原…
阅读更多...
【React系列】父子组件通信—props属性传值

【React系列】父子组件通信—props属性传值

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 认识组件的嵌套 组件之间存在嵌套关系&#xff1a; 在之前的案例中&#xff0c;我们只是创建了一个组件App&…
阅读更多...
爬虫案例 --唯品会口红数据爬取(附源码)

爬虫案例 --唯品会口红数据爬取(附源码)

""" 项目名称: 唯品会商品数据爬取 项目描述: 通过requests框架获取网页数据 项目环境: pycharm && python3.8 作者所属: 几许一 . 抓包1. 对唯品会官网进行分析 -- 通过筛选直接搜索商品信息获得商品数据包https://mapi.vip.com/vips-mobile/rest/shop…
阅读更多...
基于粒子群算法的参数拟合，寻优算法优化测试函数

基于粒子群算法的参数拟合，寻优算法优化测试函数

目录 摘要 测试函数shubert 粒子群算法的原理 粒子群算法的主要参数 粒子群算法原理 粒子群算法参数拟合 代码 结果分析 展望 基于粒子群算法的参数拟合（代码完整，数据齐全）资源-CSDN文库 https://download.csdn.net/download/abc991835105/88698417 摘要 寻优算法，测试…
阅读更多...
后端开发——JDBC的学习（三）

后端开发——JDBC的学习（三）

本篇继续对JDBC进行总结&#xff1a; ①通过Service层与Dao层实现转账的练习&#xff1b; ②重点&#xff1a;由于每次使用连接就手动创建连接&#xff0c;用完后就销毁&#xff0c;这样会导致资源浪费&#xff0c;因此引入连接池&#xff0c;练习连接池的使用&#xff1b; …
阅读更多...
x-cmd pkg | tig - git 文本模式界面

x-cmd pkg | tig - git 文本模式界面

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 tig 由 Jonas Fonseca 于 2006 年使用 C 语言创建的 git 交互式文本命令行工具。旨在开启交互模式快速浏览 git 存储库的信息以及 git 命令的运行。 首次用户 使用 x tig 即可自动下载并使用 在终端运行 eval "…
阅读更多...
微服务之间互相调用出现的错误

微服务之间互相调用出现的错误

场景&#xff1a; 微服务A调用微服务B的接口&#xff0c;微服务B的接口请求方式是get类型&#xff0c;传递的参数是JSON格式。 错误&#xff1a; 1、postman&#xff1a;springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserial…
阅读更多...
Gin 框架介绍与快速入门

Gin 框架介绍与快速入门

Gin 框架介绍与快速入门 文章目录 Gin 框架介绍与快速入门一、Gin框架介绍1. 快速和轻量级2. 路由和中间件3. JSON解析4. 支持插件5. Gin相关文档 二、基本使用1.安装2.导入3.第一个Gin 应用 三、应用举例四、Gin 入门核心1.gin.Engine2.gin.Context 一、Gin框架介绍 Gin是一个…
阅读更多...
VitePress搭建Vite官方中文文档首页

VitePress搭建Vite官方中文文档首页

✨专栏介绍 在当今数字化时代&#xff0c;Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序&#xff0c;就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术&#xff0c;以及各种框架、库和工具…
阅读更多...
FinGPT——金融领域开源大模型

FinGPT——金融领域开源大模型

文章目录 背景论文摘要相关工作大型语言模型&#xff08;LLMs&#xff09;和ChatGPT金融领域的LLMs为什么需要开源的金融LLMs&#xff1f; 以数据为中心的方法用于FinLLMs金融数据和独特特性应对处理金融数据的挑战 FINGPT 概述&#xff1a;FINLLM 的开源框架数据来源面向金融N…
阅读更多...
【常用排序算法】冒泡排序

【常用排序算法】冒泡排序

冒泡排序 冒泡排序基本思想&#xff1a;N 个数的数组&#xff0c;经过N-1轮排序。 升序 大的值下沉&#xff0c;小的值上浮。降序 小的值下沉&#xff0c;小的字上浮 import java.util.Arrays; public class BubbleSort {public static void main(String[] args) {int[] values…
阅读更多...
std::scoped_lock` 和 `std::lock() ，condition_variable,promise

std::scoped_lock` 和 `std::lock() ，condition_variable,promise

std::scoped_lock和std::lock() 同时锁多个mutex std::scoped_lock 和 std::lock() 都是 C 标准库中用于管理多个 std::mutex 对象的工具&#xff0c;但它们在使用方式和一些方面上存在一些区别。以下是它们的主要区别&#xff1a; 用法差异&#xff1a; std::scoped_lock 是一…
阅读更多...
Git 对项目更新的时候提示错误 repository not owned by current user

Git 对项目更新的时候提示错误 repository not owned by current user

遇到 Git 提示的错误信息为&#xff1a;repository not owned by current user 上图显示的是错误的信息。 问题和解决 出现上面错误信息的原因是当前文件夹的权限和 Git 的执行权限不一直导致的。 我们的问题是我们希望在网盘上使用 Git 更新克隆后的代码&#xff0c;但登录…
阅读更多...
React Hook 原理，及如何使用Hook

React Hook 原理，及如何使用Hook

一、 Hook使用规则 只在最顶层使用Hook 不要在循环&#xff0c;条件或嵌套函数中调用Hook&#xff1b; 只在组件函数和自定义hook中调用Hook Q1 &#xff1a; 为什么 hook 不能 在循环&#xff0c;条件或嵌套函数中调用Hook &#xff1f; A1&#xff1a; 因为这跟React的…
阅读更多...
使用Kafka与Spark Streaming进行流数据集成

使用Kafka与Spark Streaming进行流数据集成

在当今的大数据时代&#xff0c;实时数据处理和分析已经变得至关重要。为了实现实时数据集成和分析&#xff0c;组合使用Apache Kafka和Apache Spark Streaming是一种常见的做法。本文将深入探讨如何使用Kafka与Spark Streaming进行流数据集成&#xff0c;以及如何构建强大的实…
阅读更多...
【智慧地球】星图地球 | 星图地球超算数据工场

【智慧地球】星图地球 | 星图地球超算数据工场

当前空天信息处理涉及并发并行的大量计算问题&#xff0c;需要高性能计算、智能计算联合调度&#xff0c;以此来实现多算力融合&#xff1b;而我国算力产业规模快速增长&#xff0c;超算算力资源正需要以任务驱动来统筹。 基于此&#xff0c;中科星图与郑州中心展开紧密合作&a…
阅读更多...
从0开始python学习-39.requsts库

从0开始python学习-39.requsts库

目录 HTTP协议 1. 请求 2. 响应 Requests库 1. 安装 2. 请求方式 2.1 requests.请求方式(参数) 2.2 requests.request() 2.3 requests.session().request() 2.4 三种方式之间的关联 3. 请求参数 3.1 params&#xff1a;查询字符串参数 3.2 data&#xff1a;Form表单…
阅读更多...
最新文章

Copyright @ 2022~2023