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

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

news 2025/8/5 1:36:33

在这里插入图片描述

🙂博主：小猫娃来啦
🙂文章核心：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来获取表单元素的值，并进行验证和处理，以确保用户输入的准确性和完整性。

在这里插入图片描述

http://www.lryc.cn/news/138407.html

相关文章：

  • PDF怎么转成PPT文件免费？一个软件解决
  • 数据结构基础：P3-树(上)----编程作业02：List Leaves
  • 山西电力市场日前价格预测【2023-08-25】
  • 手机无人直播软件，有哪些优势？
  • SpringBoot概述SpringBoot基础配置yml的使用多环境启动
  • Python Pandas 处理Excel数据 制图
  • 如何自己实现一个丝滑的流程图绘制工具（五）bpmn的xml和json互转
  • mysql--数据库的操作
  • kafka--技术文档--架构体系
  • ctfshow web入门 web103-web107
  • 前端工程化之模块化
  • 文件服务器实现方式汇总
  • ChatGPT计算机科学与技术专业的本科毕业论文，2000字。论文查重率低于30%。
  • 【Winform学习笔记（八）】通过委托实现跨窗体传值
  • Windows用户如何安装Cpolar
  • C++最易读手撸神经网络两隐藏层(任意Nodes每层)梯度下降230820a
  • 机器学习理论笔记（二）：数据集划分以及模型选择
  • 10*1000【2】
  • “探秘JS加密算法：MD5、Base64、DES/AES、RSA你都知道吗？”
  • Spark项目Java和Scala混合打包编译
  • 深度学习处理文本（NLP）
  • 汽车电子笔记之：AUTOSAR方法论及基础概念
  • 鼠标拖拽盒子移动
  • AUTOSAR从入门到精通-【应用篇】面向车联网的车辆攻击方法及入侵检测
  • 0101prox-shardingsphere-中间件
  • FactoryBean和BeanFactory：Spring IOC容器的两个重要角色简介
  • 微服务中间件--分布式搜索ES
  • 触摸屏与PLC之间 EtherNet/IP无线以太网通信
  • Crontab定时任务运行Docker容器（Ubuntu 20）
  • Fegin异步情况丢失上下文问题