前端（十四）——DOM节点操作手册：你需要了解的一切

在这里插入图片描述

🙂博主：小猫娃来啦
🙂文章核心：DOM节点操作手册：你需要了解的一切

文章目录

  • 前言
  • DOM基础知识
  • 操作现有节点
  • 创建新节点
  • 遍历节点树
  • 修改节点属性和样式
  • 事件处理
  • 实践应用
    • 动态创建表格
    • 动态更新列表

前言

DOM（文档对象模型）是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构，每个节点代表文档中的一个元素、属性、文本或其他内容。

DOM是很重要的，因为它让我们能够使用JavaScript等脚本语言直接操控网页内容，实现动态、交互性强的网页效果。通过DOM，我们可以改变网页的样式和结构，响应用户的操作，并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣，提升用户体验。同时，DOM的标准化也保证了开发者在不同浏览器下的兼容性，使得开发更加便捷和可靠。

本文深层次就DOM的相关操作，展开论述。

DOM基础知识

  • 节点的类型

  • 元素节点（Element Node）：表示HTML中的标签，例如<div>、<p>、<a>等。元素节点是文档树的主要成分，可以包含其他节点作为子节点。

  • 文本节点（Text Node）：表示HTML标签中的文本内容。例如，在<p>标签中的一段文字就是文本节点。

  • 注释节点（Comment Node）：表示HTML文档中的注释内容。注释节点以<!--开头，以-->结尾。

  • 属性节点（Attribute Node）：表示HTML元素的属性。例如，class、id、src等属性都属于属性节点。

  • 文档节点（Document Node）：表示整个HTML文档的根节点。在DOM树中，文档节点是所有其他节点的最高级父节点。

  • 文档片段节点（Document Fragment Node）：表示一个独立的文档片段。文档片段节点可以包含其他节点，常用于临时存储和处理一系列节点。

  • 获取节点的手段

通过ID获取节点：可以使用getElementById()方法，传入元素的ID来获取对应的节点。例如：

var myElement = document.getElementById("myId");

通过类名获取节点：可以使用getElementsByClassName()方法，传入类名来获取所有具有相同类名的节点组成的集合。该方法返回一个类数组对象。例如：

var myElements = document.getElementsByClassName("myClass");

通过标签名获取节点：可以使用getElementsByTagName()方法，传入标签名来获取所有具有相同标签名的节点组成的集合。该方法返回一个类数组对象。例如：

var myElements = document.getElementsByTagName("div");

通过选择器获取节点：可以使用querySelector()和querySelectorAll()方法来使用CSS选择器获取节点。querySelector()方法返回第一个匹配的节点，querySelectorAll()方法返回所有匹配的节点组成的集合。例如：

var myElement = document.querySelector("#myId");
var myElements = document.querySelectorAll(".myClass");

操作现有节点

我们通过操作DOM树来添加、删除和替换节点，从而动态修改网页的内容和结构。需要注意的是，这些方法都需要通过获取到相应的父节点才能进行操作。

  • 添加节点

appendChild()：用于将一个新节点添加为目标节点的最后一个子节点。例如：

var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
parentElement.appendChild(newElement);

insertBefore()：用于在目标节点的特定子节点之前插入一个新节点。例如：

var parentElement = document.getElementById("parent");
var targetElement = document.getElementById("target");
var newElement = document.createElement("div");
parentElement.insertBefore(newElement, targetElement);
  • 删除节点

removeChild()：用于从父节点中移除指定的子节点。例如：

var parentElement = document.getElementById("parent");
var childElement = document.getElementById("child");
parentElement.removeChild(childElement);
  • 替换节点

replaceChild()：用一个新节点替换目标节点的子节点。例如：

var parentElement = document.getElementById("parent");
var targetElement = document.getElementById("target");
var newElement = document.createElement("div");
parentElement.replaceChild(newElement, targetElement);

创建新节点

  1. createElement()：使用指定的标签名创建一个新的元素节点。可以通过document.createElement()方法来实现。例如：
var newElement = document.createElement("div");

这将创建一个新的<div>元素节点。

  1. createTextNode()：创建一个包含指定文本内容的新文本节点。可以通过document.createTextNode()方法来实现。例如：
var textNode = document.createTextNode("Hello, world!");

这将创建一个包含文本内容"Hello, world!"的文本节点。

  1. 其他创建方法：除了上述常用方法外，还有其他一些特定目的的创建方法。例如：
  • createDocumentFragment()：创建一个空的文档片段节点。文档片段节点可以用来存储临时的DOM节点，然后一次性插入到文档中。
  • createAttribute()：创建一个属性节点，用于为元素节点添加属性。
  • createComment()：创建一个注释节点，用于在DOM中添加注释内容。

这些创建方法提供了灵活的方式来创建不同类型的节点，并根据需求灵活使用。

遍历节点树

A. parentNode 和 childNode：

  • parentNode：属性用于获取当前节点的父节点。通过访问该属性，我们可以获取到某个节点在DOM树中的直接父节点。
  • childNodes：属性返回一个包含所有子节点的集合，以类数组对象形式表示。注意，该集合包含所有类型的节点，包括元素节点、文本节点、注释节点等。

B. firstChild、lastChild、nextSibling、previousSibling：

  • firstChild：属性表示当前节点的第一个子节点，如果没有子节点则返回null。
  • lastChild：属性表示当前节点的最后一个子节点，如果没有子节点则返回null。
  • nextSibling：属性表示当前节点的下一个兄弟节点，即与当前节点具有相同父节点的相邻节点。
  • previousSibling：属性表示当前节点的上一个兄弟节点，即与当前节点具有相同父节点的前一个节点。

举几个例子，看起来直观一些：

var parentElement = document.getElementById("parent");

// 获取父节点
var parentNode = parentElement.parentNode;

// 获取子节点集合
var childNodes = parentElement.childNodes;

// 获取第一个子节点和最后一个子节点
var firstChild = parentElement.firstChild;
var lastChild = parentElement.lastChild;

// 遍历兄弟节点
var siblingNode = parentElement.firstChild;
while (siblingNode) {
    // 处理兄弟节点
    console.log(siblingNode);
    
    siblingNode = siblingNode.nextSibling;
}

修改节点属性和样式

通过设置属性和样式，我们可以动态地调整节点的特征，从而实现网页的动态效果。

修改属性：

  • setAttribute(name, value)：设置节点的指定属性名为相应的值。例如：
var myElement = document.getElementById("myId");
myElement.setAttribute("class", "newClass");
  • 直接修改属性值：通过直接赋值的方式修改节点的属性值。例如：
var myElement = document.getElementById("myId");
myElement.className = "newClass";

修改样式：

  • 直接修改style属性：通过修改节点的style属性来设置具体的CSS样式。例如：
var myElement = document.getElementById("myId");
myElement.style.color = "red";
myElement.style.fontSize = "20px";

小栗子：

<!DOCTYPE html>
<html>
<head>
<style>
  .highlight {
    color: red;
    font-weight: bold;
  }
</style>
</head>
<body>
  <p id="myParagraph">Hello, world!</p>

  <script>
    var myElement = document.getElementById("myParagraph");
    
    // 修改属性
    myElement.setAttribute("class", "highlight");

    // 修改样式
    myElement.style.fontSize = "25px";
  </script>
</body>
</html>

事件处理

  • 添加事件监听器：
    addEventListener(event, handler)：通过调用元素节点的addEventListener()方法来添加事件监听器。其中，event参数是事件类型，如"click"、"mouseover"等，handler参数是事件触发时执行的函数。例如：
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
  // 处理点击事件的逻辑
  console.log("Button clicked!");
});
  • 事件冒泡和捕获：
    事件冒泡和捕获是DOM事件模型中的两个阶段。在事件冒泡阶段，事件从最具体的元素（例如被点击的按钮）向上级元素（例如包含该按钮的容器）传播；而在事件捕获阶段，事件则从上级元素向最具体的元素传播。在实践中，默认情况下，大多数事件都是在冒泡阶段进行处理。

举个栗子：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <button id="myButton">Click Me</button>

  <script>
    var myButton = document.getElementById("myButton");

    // 添加事件监听器
    myButton.addEventListener("click", function(event) {
      console.log("Button clicked!");

      // 阻止事件冒泡
      event.stopPropagation();
    });

    document.body.addEventListener("click", function() {
      console.log("Body clicked!");
    });
  </script>
</body>
</html>

我们给按钮元素添加了一个点击事件的监听器，当按钮被点击时，会输出"Button clicked!“。同时，我们还给页面的 body 元素添加了一个点击事件的监听器，当页面任意位置被点击时，会输出"Body clicked!”。这就是dom在事件处理中的魅力。

实践应用

动态创建表格

var table = document.createElement("table");

for (var i = 0; i < 3; i++) {
    var row = document.createElement("tr");

    for (var j = 0; j < 3; j++) {
        var cell = document.createElement("td");
        var cellText = document.createTextNode("Row " + i + ", Col " + j);

        cell.appendChild(cellText);
        row.appendChild(cell);
    }

    table.appendChild(row);
}

document.body.appendChild(table);

我们通过dom操作动态地创建了一个3x3的表格，并将其添加到了页面的 body 元素中。

动态更新列表

var list = document.createElement("ul");

for (var i = 0; i < 5; i++) {
    var item = document.createElement("li");
    var itemText = document.createTextNode("Item " + i);

    item.appendChild(itemText);
    list.appendChild(item);
}

document.body.appendChild(list);

我们创建了一个包含5个列表项的无序列表，并将其添加到页面的 body 元素中。

除了动态创建表格和更新列表之外，DOM还可以用于许多其他实际应用。例如：

  • 动态加载数据：通过JavaScript和DOM，可以实现异步加载数据并将其动态插入到网页中，从而实现动态内容的更新。

  • 实现动画效果：通过修改DOM节点的样式和位置，可以实现各种动画效果，如淡入淡出、滑动等。

  • 表单验证：可以使用DOM来获取表单元素的值，并进行验证和处理，以确保用户输入的准确性和完整性。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python爬虫逆向实战案例(五)——YRX竞赛题第五题

Python爬虫逆向实战案例(五)——YRX竞赛题第五题

题目&#xff1a;抓取全部5页直播间热度&#xff0c;计算前5名直播间热度的加和 地址&#xff1a;https://match.yuanrenxue.cn/match/5 cookie中m值分析 首先打开开发者工具进行抓包分析&#xff0c;从抓到的包来看&#xff0c;参数传递了查询参数m与f&#xff0c;同时页面中…
阅读更多...
C# 工厂模式

C# 工厂模式

一、概述 工厂模式&#xff08;Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一种创建对象的最佳方式。在C#中&#xff0c;工厂模式通过定义一个公共接口或抽象类来创建对象&#xff0c;而具体的对象创建则由工厂类来实现。 工厂模式主要包含三个角色…
阅读更多...
opencv-dnn

opencv-dnn

# utils_words.txt 标签文件 import osimage_types (".jpg", ".jpeg", ".png", ".bmp", ".tif", ".tiff")def list_images(basePath, containsNone):# return the set of files that are validreturn list_file…
阅读更多...
element-ui中的el-table合并单元格

element-ui中的el-table合并单元格

描述&#xff1a; 在写项目的时候有时候会经常遇到把行和列合并起来的情况&#xff0c;因为有些数据是重复渲染的&#xff0c;不合并行列会使表格看起来非常的混乱&#xff0c;如下&#xff1a; 而我们想要的数据是下面这种情况&#xff0c;将重复的行进行合并&#xff0c;使表…
阅读更多...
春秋云境：CVE-2022-0543（Redis 沙盒逃逸漏洞）

春秋云境：CVE-2022-0543（Redis 沙盒逃逸漏洞）

目录 一、i春秋题目 二、CVE-2022-0543&#xff1a;&#xff08;redis沙盒逃逸&#xff09; 漏洞介绍&#xff1a; 漏洞复现&#xff1a; 一、i春秋题目 靶标介绍&#xff1a; Redis 存在代码注入漏洞&#xff0c;攻击者可利用该漏洞远程执行代码。 进入题目&#xff1a;…
阅读更多...
vue 展开和收起

vue 展开和收起

效果图 代码块 <div><span v-for"(item,index) in showHandleList" :key"item.index"><span>{{item.emailFrom}}</span></span><span v-if"this.list.length > 4" click"showAll !showAll">{…
阅读更多...
element-ui中的el-table的summary-method（合计）的使用

element-ui中的el-table的summary-method（合计）的使用

场景图片&#xff1a; 图片1&#xff1a; 图片2&#xff1a; 一&#xff1a;使用element中的方法 优点&#xff1a; 直接使用summary-method方法&#xff0c;直接&#xff0c;方便 缺点&#xff1a; 只是在表格下面添加了一行&#xff0c;如果想有多行就不行了 1&#xff1a;h…
阅读更多...
计算机提示mfc120u.dll缺失（找不到）怎么解决

计算机提示mfc120u.dll缺失（找不到）怎么解决

在计算机领域&#xff0c;mfc120u.dll是一个重要的动态链接库文件。它包含了Microsoft Foundation Class (MFC) 库的特定版本&#xff0c;用于支持Windows操作系统中的应用程序开发。修复mfc120u.dll可能涉及到解决与该库相关的问题或错误。这可能包括程序崩溃、运行时错误或其…
阅读更多...
JavaWeb_LeadNews_Day7-ElasticSearch, Mongodb

JavaWeb_LeadNews_Day7-ElasticSearch, Mongodb

JavaWeb_LeadNews_Day7-ElasticSearch, Mongodb elasticsearch安装配置 app文章搜索创建索引库app文章搜索思路分析具体实现 新增文章创建索引思路分析具体实现 MongoDB安装配置SpringBoot集成MongoDB app文章搜索记录保存搜索记录思路分析具体实现 查询搜索历史删除搜索历史 搜…
阅读更多...
macOS - 安装 Python 及地址

macOS - 安装 Python 及地址

文章目录 Python 官方安装包Pip3Applications - PythonMiniconda多个python环境有多种方式安装 python，比如 Python 官方包、anaconda、miniconda、brew 等 这里记录使用 Python 官方包进行安装，和 miniconda 安装方式，以及安装后 各执行文件、安装包的地址。 明确这些地址后…
阅读更多...
linux————Keepalived—web双机热备

linux————Keepalived—web双机热备

一、概述 Keepalived 是一个基于 VRRP 协议来实现的 LVS 服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。 原理 在一个 LVS 服务集群中通常有主服务器&#xff08;MASTER&#xff09;和备份服务器&#xff08;BACKUP&#xff09;两种角色的服务器&#xff0c…
阅读更多...
MySQL回表是什么？哪些情况下会回表

MySQL回表是什么？哪些情况下会回表

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…
阅读更多...
PHP 安装Composer，vue前端依赖包

PHP 安装Composer，vue前端依赖包

电脑安装Composer 官网下载&#xff1a;https://getcomposer.org/Composer-Setup.exe 后端安装&#xff1a; 检查是否安装依赖&#xff1a; 安装Composer install 或 Composer i 前端安装&#xff1a; yarn install 安装依赖
阅读更多...
Python Pandas 处理Excel数据 制图

Python Pandas 处理Excel数据 制图

目录 1、饼状图 2、条形统计图 1、饼状图 import pandas as pd import matplotlib.pyplot as plt import numpy as np #from matplotlib.ticker import MaxNLocator # 解决中文乱码 plt.rcParams[font.sans-serif][SimHei] plt.rcParams[font.sans-serif]Microsoft YaHei …
阅读更多...
【面试】一文讲清组合逻辑中的竞争与冒险

【面试】一文讲清组合逻辑中的竞争与冒险

竞争的定义&#xff1a;组合逻辑电路中&#xff0c;输入信号的变化传输到电路的各级逻辑门&#xff0c;到达的时间有先后&#xff0c;也就是存在时差&#xff0c;称为竞争。 冒险的定义&#xff1a;当输入信号变化时&#xff0c;由于存在时差&#xff0c;在输出端产生错误&…
阅读更多...
基于IDEA使用maven创建hibernate项目

基于IDEA使用maven创建hibernate项目

1、创建maven项目 2、导入hibernate需要的jar包 <!--hibernate核心依赖--><dependency><groupId>org.hibernate</groupId><artifactId>hibernate-core</artifactId><version>5.4.1.Final</version></dependency><!--…
阅读更多...
uni-app 编译报错 Error: pages.json解析失败，不符合 json 规范Unexpected token ‘)‘

uni-app 编译报错 Error: pages.json解析失败，不符合 json 规范Unexpected token ‘)‘

问题 使用webstorm开发项目时&#xff0c;打开pages.json习惯性ctrlaltl把代码格式了&#xff0c;然后报错了。 接着使用HBuilder编译&#xff0c;但是一直显示在编译中&#xff0c;完全没有反映。重启编译器与重启电脑都没有用。 没管然后编译报错了。 加上逗号再运行还是报…
阅读更多...
taro h5 formData上传图片的坑-Required request part ‘file‘ is not present

taro h5 formData上传图片的坑-Required request part ‘file‘ is not present

描述&#xff1a;用formData上传图片 1、生成formData const formData new FormData() formData.append(file, data) // data是file formData.append(xxx, xxx) // 添加其他参数2、用taro.request请求 Taro.request({url: xxxx,data: formData,header: {Content-Type: mult…
阅读更多...
本地搭建CFimagehost私人图床【公网远程访问】

本地搭建CFimagehost私人图床【公网远程访问】

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…
阅读更多...
【DevOps视频笔记】4.Build 阶段 - Maven安装配置

【DevOps视频笔记】4.Build 阶段 - Maven安装配置

一、Build 阶段工具 二、Operate阶段工具 三、服务器中安装 四、修改网卡信息 五、安装 jdk 和 maven Stage1 : 安装 JDK Stage 2 : 安装 Maven 2-1 : 更换文件夹名称 2-2 : 替换配置文件 settings.xml- 2-3 : 修改settings.xml详情 A. 修改maven仓库地址 - 阿里云 B…
阅读更多...
最新文章

Copyright @ 2022~2023