前端(十四)——DOM节点操作手册:你需要了解的一切

在这里插入图片描述

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

文章目录

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

前言

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

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

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

DOM基础知识

  • 节点的类型
  • 获取节点的手段

通过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");

这将创建一个新的

元素节点。

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

  <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来获取表单元素的值,并进行验证和处理,以确保用户输入的准确性和完整性。

在这里插入图片描述


你可能感兴趣的:(前端,JS,前端,javascript,开发语言)