【Java 进阶篇】深入理解 JavaScript DOM Node 对象

在这里插入图片描述

在前端开发中，与HTML文档进行交互是一项基本任务。文档对象模型（Document Object Model，简称DOM）为开发者提供了一种以编程方式访问和操作HTML文档的方式。DOM的核心是节点（Node）对象，它代表了文档中的各个部分。本博客将深入探讨JavaScript DOM Node对象，帮助您更好地理解它的作用和如何使用。

什么是DOM Node对象

在DOM中，所有的内容都是以节点的形式存在。节点是DOM的基本构建块，文档中的每个元素、属性、文本均以节点的形式表示。DOM Node对象代表了这些节点，是一个抽象的概念，用于表示文档中的层次结构。

Node对象有不同的类型，包括元素节点、属性节点、文本节点等，每种类型的节点在DOM中扮演着不同的角色。我们将逐一介绍它们。

1. 元素节点（Element Node）

元素节点代表HTML文档中的元素，例如<div>、<p>、<a>等标签。元素节点可以包含其他节点，因此它们构成了DOM树的分支。

2. 文本节点（Text Node）

文本节点代表元素中的文本内容。例如，<p>这是一个文本节点</p>中的“这是一个文本节点”就是一个文本节点。

3. 属性节点（Attribute Node）

属性节点代表元素的属性。例如，<a href="https://www.example.com">中的href属性就是一个属性节点。

4. 注释节点（Comment Node）

注释节点代表HTML文档中的注释，如<!-- 这是一个注释 -->。

5. 文档节点（Document Node）

文档节点代表整个HTML文档，通常在DOM树的顶部。文档节点是其他节点的容器，它包含了整个文档的结构。

Node对象有一些常用的属性和方法，用于访问和操作节点。下面，我们将详细介绍这些属性和方法。

访问和操作DOM Node

1. 访问子节点

在DOM中，节点可以包含子节点，可以使用以下属性来访问和操作子节点：

  • childNodes：获取包含元素的所有子节点的NodeList。
  • firstChild：获取第一个子节点。
  • lastChild：获取最后一个子节点。
  • parentNode：获取父节点。

下面是一个示例，演示如何使用这些属性：

<!DOCTYPE html>
<html>
<head><title>DOM Node示例</title>
</head>
<body><ul id="myList"><li>苹果</li><li>香蕉</li><li>橙子</li></ul><script>const myList = document.getElementById('myList');const firstItem = myList.firstChild;const lastItem = myList.lastChild;const parent = myList.parentNode;console.log('第一个子节点:', firstItem.textContent);console.log('最后一个子节点:', lastItem.textContent);console.log('父节点:', parent.tagName);</script>
</body>
</html>

在上面的示例中，我们首先获取了<ul>元素的引用，然后使用firstChild和lastChild属性访问了其第一个和最后一个子节点。同时，使用parentNode属性获取了父节点（<body>元素）的引用。

2. 创建新节点

除了访问现有的节点，我们还可以创建新的节点并将其添加到文档中。以下是一些常见的用于创建节点的方法：

  • document.createElement(tagName)：创建一个指定标签名的元素节点。
  • document.createTextNode(text)：创建一个包含指定文本的文本节点。
  • document.createComment(text)：创建一个包含指定注释文本的注释节点。

例如，我们可以使用document.createElement来创建一个新的<div>元素，如下所示：

const newDiv = document.createElement('div');

3. 添加和删除节点

一旦我们创建了新的节点，我们可以使用以下方法将它们添加到文档中：

  • appendChild(node)：将一个节点添加为另一个节点的子节点，作为最后一个子节点。
  • insertBefore(newNode, referenceNode)：将一个节点添加为另一个节点的子节点，并将它插入到参考节点之前。
  • replaceChild(newNode, oldNode)：用一个新节点替换另一个节点。
  • removeChild(node)：从父节点中删除指定的子节点。

下面是一个示例，演示如何创建新节点并将其添加到文档中：

<!DOCTYPE html>
<html>
<head><title>DOM Node示例</title>
</head>
<body><div id="myDiv"><p>这是一个段落。</p></div><script>const myDiv = document.getElementById('myDiv');// 创建一个新段落元素const newParagraph = document.createElement('p');newParagraph.textContent = '这是另一个段落。';// 将新段落添加到myDiv中myDiv.appendChild(newParagraph);</script>
</body>
</html>

在上述示例中，我们首先创建了一个新的<p>元素，设置了其文本内容，然后使用appendChild方法将新段落添加为<div>元素的子节点。

4. 替换节点

替换节点的常用方法是replaceChild，它允许我们将一个节点替换为另一个节点。以下是一个示例：

const oldParagraph = document.getElementById('oldParagraph');
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是新的段落。';// 将newParagraph替换oldParagraph
oldParagraph.parentNode.replaceChild(newParagraph, oldParagraph);

在这个示例中，我们首先获取了要替换的节点oldParagraph和新节点newParagraph，然后使用replaceChild方法将新段落替换为旧段落。

5. 删除节点

要从文档中删除节点，可以使用removeChild方法，如下所示：

const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');// 从父元素中删除子元素
parent.removeChild(child);

在上述示例中，我们获取了父元素parent和要删除的子元素child，然后使用removeChild方法从父元素中删除了子元素。

遍历DOM树

遍历DOM树是获取和操作文档中节点的重要方式。可以使用递归或循环来遍历DOM树。下面是一个使用递归遍历DOM树的示例：

function traverseDOM(node) {// 处理当前节点console.log(node.nodeName);// 递归遍历子节点for (let i = 0; i < node.childNodes.length; i++) {traverseDOM(node.childNodes[i]);}
}// 从文档根节点开始遍历
traverseDOM(document);

在上述示例中，traverseDOM函数接受一个节点作为参数，首先处理当前节点，然后递归遍历其子节点。我们从文档的根节点document开始遍历整个DOM树。

示例：创建一个可折叠的列表

让我们通过一个示例来演示如何使用DOM Node对象来创建一个可折叠的列表。在这个示例中，我们将创建一个HTML列表，每个列表项都可以展开或折叠显示其子列表。

<!DOCTYPE html>
<html>
<head><title>可折叠列表示例</title>
</head>
<body><ul id="myList"><li><span class="toggle">▼</span> Fruit<ul><li>Apple</li><li>Banana</li><li>Orange</li></ul></li><li><span class="toggle">▼</span> Vegetable<ul><li>Carrot</li><li>Tomato</li><li>Broccoli</li></ul></li></ul><script>const listItems = document.querySelectorAll('#myList li');listItems.forEach((item) => {// 为每个列表项添加点击事件监听器item.addEventListener('click', () => {const sublist = item.querySelector('ul');if (sublist) {sublist.classList.toggle('hidden'); // 切换子列表的显示/隐藏const toggleIcon = item.querySelector('.toggle');toggleIcon.textContent = sublist.classList.contains('hidden') ? '▼' : '▲'; // 切换展开/折叠图标}});});</script>
</body>
</html>

在这个示例中，我们首先创建了一个HTML列表，每个列表项包含一个展开/折叠按钮和一个子列表。使用JavaScript，我们遍历所有列表项，为每个列表项添加点击事件监听器。当用户单击列表项时，我们查找其子列表并切换其hidden类，以控制子列表的显示或隐藏。同时，我们还切换了展开/折叠按钮的图标。

总结

JavaScript DOM Node对象是DOM操作的核心。通过了解和掌握Node对象的属性和方法，您可以更轻松地访问和操作HTML文档的内容。这个博客提供了一个全面的概述，从创建新节点到遍历DOM树，再到一个实际的示例，帮助您更好地理解和应用DOM Node对象。希望这些知识对您在前端开发中有所帮助！

这篇博客深入介绍了JavaScript DOM Node对象，包括不同类型的节点（元素节点、文本节点、属性节点、注释节点和文档节点）以及如何访问、创建、添加、删除和替换节点。通过示例展示了如何创建一个可折叠的列表，以实际操作演示了Node对象的应用。希望这篇博客对您理解和应用DOM Node对象有所帮助。

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

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

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

相关文章

各种语言【Python,Java,Go,Pascal,C++】不解压直接读取压缩包【rar,zip,7z,gz,tar,z...】中文本行

各种语言【Python,Java,Go,Pascal,C++】不解压直接读取压缩包【rar,zip,7z,gz,tar,z...】中文本行

文章目录 &#xff08;零&#xff09;前言&#xff08;一&#xff09;【ZIP】格式&#xff08;1.1&#xff09;Python ⭐️&#xff08;1.2&#xff09;Java ⭐️&#xff08;1.3&#xff09;Golang ⭐️&#xff08;1.4&#xff09;Pascal&#xff08;1.4.1&#xff09;Lazaru…
阅读更多...
MySQL需要了解的常用命令

MySQL需要了解的常用命令

目录 和mysql相关的Shel命令mysql中常用命令获得mysql元数据命令快捷命令mysqladmin常用命令 1、MySQL 相关的 shell 命令 1）启动MySQL： systemctl start mysqld 该命令用于启动MySQL服务器 systemctl是linux系统中用于管理系统服务的命令start表示启动服务mysqld则是服务…
阅读更多...
CentOS（3）——CentOS7开放端口

CentOS（3）——CentOS7开放端口

目录 一、简介 二、使用firewall ①查看防火墙状态 ②查看当前已开放的端口 ③打开端口 ④重启防火墙 ⑤查看该端口是否已经运行 一、简介 在用虚拟机搭建Gitlab的过程中用到了8989端口&#xff0c;因此本篇文章用于记录如何在CenOS7系统中主动打开端口 二、使用firewal…
阅读更多...
c++读取inf文件，判断版本是否一致

c++读取inf文件，判断版本是否一致

在驱动安装时&#xff0c;通过inf文件安装&#xff0c;碰到有些驱动包中可能有多个inf文件&#xff0c;不知道选择哪一个来安装。但一个个打开&#xff0c;会发现它们的版本其实好像不一样。因此想到读取每一个inf文件中的版本信息&#xff0c;与自己提前决定好的版本号相比较&…
阅读更多...
GO-unioffice实现word编辑

GO-unioffice实现word编辑

导包 import ("fmt""log""os""time""github.com/unidoc/unioffice/common/license""github.com/unidoc/unioffice/document" ) 创建word文件 func CreateFile(name string) {filename : name ".docx&quo…
阅读更多...
NCV7724DQBR2G车规级半桥电机驱动芯片-专为汽车，工业自动化应用提供完美解决方案

NCV7724DQBR2G车规级半桥电机驱动芯片-专为汽车，工业自动化应用提供完美解决方案

车规级半桥电机驱动芯片是一种用于驱动直流电机的芯片&#xff0c;常用于电动汽车、电动自行车等领域。它可以控制电机的转速和方向&#xff0c;并且具有过流保护、过温保护等功能&#xff0c;可以保证电机的安全运行。 NCV7724DQBR2G是一款车规级八通道半桥驱动器&#xff0c;…
阅读更多...
新手最容易触发的10个PHP语言Bug分享

新手最容易触发的10个PHP语言Bug分享

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…
阅读更多...
MyBatisPlue-03

MyBatisPlue-03

一 映射匹配兼容机制 1.映射数据库的字段名 问题描述&#xff1a; 当数据库表字段和实体类的属性名称出现不匹配时&#xff1a; 解决&#xff1a; 知识点&#xff1a; 2.忽略实体类的部分字段 问题描述&#xff1a; 当要表示如 显示用户是否在线等消息&#xff0c;&#xf…
阅读更多...
ArcGis打开影像显示全黑解决方法

ArcGis打开影像显示全黑解决方法

我们加载图像&#xff0c;显示如下&#xff1a; 解决方法&#xff1a; 问题分析&#xff1a;Gamma值高于1影像亮化&#xff0c;低于1影像暗化。栅格影像导入进来呈现黑色&#xff0c;可能是因为影像的“Gamma校正”设置出现问题&#xff0c;影响了影像的拉伸度、亮度、对比度等…
阅读更多...
基于人工电场优化的BP神经网络（分类应用） - 附代码

基于人工电场优化的BP神经网络（分类应用） - 附代码

基于人工电场优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于人工电场优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.人工电场优化BP神经网络3.1 BP神经网络参数设置3.2 人工电场算法应用 4.测试结果…
阅读更多...
Python操作串口通信

Python操作串口通信

Python操作串口通信 注意Linux下先要修改串口的权限&#xff1a; sudo chmod 777 /dev/ttyUSB0 以下是python代码&#xff1a; # codingutf-8 # 包&#xff1a;pyserial&#xff0c;pymysql # 权限&#xff1a;sudo chmod 777 /dev/ttyUSB0 import serial # import pymysql …
阅读更多...
Apache Doris 在小鹅通的应用实践

Apache Doris 在小鹅通的应用实践

峰会官网已上线&#xff0c;最新议程请关注&#xff1a;doris-summit.org.cn 点击报名 先到先得 本文导读&#xff1a; 随着网络直播规模的不断扩大&#xff0c;在线知识服务在直播行业中迎来了广阔的发展机遇。小鹅通作为一家以用户服务为核心的技术服务商&#xff0c;通过多平…
阅读更多...
检测密码安全强度 和 凯撒加密

检测密码安全强度 和 凯撒加密

检测密码安全强度 按照含有数字,小写字母,大写字母,指定标点符号的种类,把安全强度分为强密码,中高,中低,弱密码. 编写程序,输入一个字符串,输出该字符串作为密码时的安全强度 from string import digits, ascii_lowercase, ascii_uppercasedef check(pwd):# 密码必须至少包含…
阅读更多...
6、docker下mysql修改配置文件

6、docker下mysql修改配置文件

1、查看mysql镜像 如果没有mysql镜像则下载 docker images |grep mysql 2、查看mysql容器 docker ps |grep mysql 如果没有显示mysql容器信息&#xff0c;则创建 3、创建容器 docker run -it --name mysql-test -e MYSQL_ROOT_PASSWORDroot -p 3306:3306 -d f9653 4、在…
阅读更多...
uni-app--》基于小程序开发的电商平台项目实战（六）

uni-app--》基于小程序开发的电商平台项目实战（六）

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;uni-app &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&#xf…
阅读更多...
前端食堂技术周刊第 100 期：TS 5.3 Beta、ViteConf2023、Rspress 1.0、Fresh 1.5、Chrome 118

前端食堂技术周刊第 100 期：TS 5.3 Beta、ViteConf2023、Rspress 1.0、Fresh 1.5、Chrome 118

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;乌龙金桂 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…
阅读更多...
springBoot实现发布订阅

springBoot实现发布订阅

应用场景&#xff1a; 在开发中&#xff0c;有时需要监听某些事件&#xff0c;在事件触发时&#xff0c;执行相应的逻辑。 也可以说是基于事件驱动的观察者模式。 比如当点击某个按钮时&#xff0c;触发相应的功能&#xff0c;或者用户下单通知等等。 SpringBoot 可以通过 …
阅读更多...
Leetcode 2906. Construct Product Matrix

Leetcode 2906. Construct Product Matrix

Leetcode 2906. Construct Product Matrix 1. 解题思路2. 代码实现 题目链接&#xff1a;2906. Construct Product Matrix 1. 解题思路 这道题其实算是一道数论题。 本来其实python的pow内置函数已经帮我们基本处理了所有的问题了&#xff0c;但是这里稍微做了一点复杂化操…
阅读更多...
《Node.js+Express+MongoDB+Vue.js全栈开发实战》简介

《Node.js+Express+MongoDB+Vue.js全栈开发实战》简介

今天介绍的这本书是《Node.jsExpressMongoDBVue.js全栈开发实战》。该书由清华大学出版社于2023年1月出版 外观 从书名故名思议&#xff0c;就是基于Node.jsExpressMongoDBVue.js来实现企业级应用全栈开发。 封面风格比较简约&#xff0c;插图是一张类似于罗马时代战车形象&…
阅读更多...
Leetcode刷题详解——找到字符串中所有字母异位词

Leetcode刷题详解——找到字符串中所有字母异位词

1. 题目链接&#xff1a;438. 找到字符串中所有字母异位词 2. 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括…
阅读更多...
最新文章

Copyright @ 2022~2023