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

Javascript的进阶部分（DOM）操作 ！！

article 2024/11/5 13:37:22

#DOM是document object model (文档对象模型）的缩写，是一种与平台、语言无关的接口。  DOM允许程序动态地访问或更新 HTML/XMl 文档的内容、结构和样式。#

一、DOM的基本概念和函数

1.   前言

  • 当网页被加载时，浏览器将网页转为一个DOM，并用JS进行各种操作。改变页面中的HTML 元素及其属性，改变页面中的CSS 样式，对页面中的事件做出响应。
  • DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。

2.  DOM中常见的节点类型

  • Document  ： 整个文档是一个文档节点 ；       
  •   Element   ： HTML 标签是元素节点；                
  •   Attribute   ： HTML 元素的属性是属性节点；       
  •    Text         ： HTML 元素内的文本是文本节点；  

3.  节点之间的关系

  • 节点具有父子关系和同级关系等。除了根元素没有父节点，其他元素都有父节点，一个父节点可以有多个子节点

二、DOM节点的获取

属性描述
getElementsByTagName 

通过标签名来获取节点 （若有多个相同标签，返回含有多个节点的类数组对象）

getElementsByClassName 

通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）

getElementById  

通过id名来获取节点（直接返回可操控的节点）

querySelectorAll 

通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）

querySelector  

通过CSS选择器获取节点，返回第一个匹配上的节点

1.   getElementsByTagName 

①、前言

  • 返回对拥有指定标签名的对象的集合
  • 控制台中可以返回出结果

②、 getElementsByTagName 语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的获取</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>

        // getElementsByTagName 通过标签名来获取节点 （若有多个相同标签，返回含有多个
        节点的类数组对象）
        const p1 = document.getElementsByTagName("p");  
        console.log(p1);
        console.log(p1[0]);
        console.log(p1[1]);
    </script>
    
</body>
</html>
 代码运行后如下：

2. getElementsByClassName 

①、前言

  • 返回带有指定class属性的对象集合，该方法属于HTML5 DOM

②、 getElementsByClassName 语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的获取</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>
        const p2 = document.getElementsByClassName("pp");
        console.log(p2);
        console.log(p2[0]);
        console.log(p2[1]);
        console.log(p2[2]);
    </script>
    
</body>
</html>
 代码运行后如下：

3. getElementById  

①、前言

  • 返回对拥有指定ID的第一个对象

②、 getElementById   语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的获取</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>
        // getElementById 通过id名来获取节点（直接返回可操控的节点）
        const p3 = document.getElementById("p3");
        console.log(p3);
    </script>
    
</body>
</html>
 代码运行后如下：

4. querySelectorAll 

①、前言

  • 通过CSS选择器获取节点，返回NodeList对象

②、 querySelectorAll    语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的获取</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>
        // querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定
     选择器的节点）
        const p4 = document.querySelectorAll(".pp");
        console.log(p4);
        console.log(p4[0]);
        console.log(p4[1]);
        console.log(p4[2]);
    </script>
    
</body>
</html>
 代码运行后如下：

5. querySelector  

①、前言

  • 通过CSS选择器获取节点，返回第一个匹配上的节点

②、querySelector   语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的获取</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>

        // querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点
        const p5 = document.querySelector(".pp");
        console.log(p5);
    </script>
    
</body>
</html>
 代码运行后如下：

 

三、DOM节点属性修改

【实验一.  查看属性和修改属性】 

1.根据id获取节点

  • id 属性来读写当前元素节点的 id 名。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>
        // 【实验一.  查看属性和修改属性】
        // 1.根据id获取节点 
        const p = document.getElementById("p3");
        console.log(p);
    </script>
    
</body>
</html>
代码运行后如下：

2.查看标签节点的属性

  • className 属性用来读写当前元素节点的 class 名。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>
      // 2.查看标签节点的属性
        const p = document.getElementById("p3");
        console.log(p.id);
        console.log(p.className);
    </script>
    
</body>
</html>
代码运行后如下：

3.修改节点的id属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>
        // 3.修改节点的id属性
        p.id = "_p_3";
        console.log(p.id);
    </script>
    
</body>
</html>
代码运行后如下：

4.修改节点的class属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>
        // 4.修改节点的class属性
        p.className = "pp jj yy xx";
        console.log(p.className);
    </script>
    
</body>
</html>
代码运行后如下：

【实验二.  classList对象的操作】

  • classList 属性是一个对象，有下列方法：
  • add() ：增加一个 class 名。
  • remove() ：移除一个 class 名。
  • contains() ：检查当前元素是否包含某个 class 名，返回布尔值。

1.根据id获取节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 根据id获取节点
        const p4 = document.getElementById("p4");
        console.log(p4.classList);
        console.log(p4.classList[0]);
    </script>
    
</body>
</html>
代码运行后如下：

 

2.为classList添加一个新的class名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 为classList添加一个新的class名
        const p4 = document.getElementById("p4");
        p4.classList.add("zz");
        console.log(p4.classList);
    </script>
    
</body>
</html>
代码运行后如下：

3.为classList移除一个class名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 为classList移除一个class名
        const p4 = document.getElementById("p4");
        p4.classList.remove("xx");
        console.log(p4.classList);
    </script>
    
</body>
</html>
代码运行后如下：

4.检查classList中是否存在某个class名，返回布尔值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 检查classList中是否存在某个class名，返回布尔值。
        const p4 = document.getElementById("p4");
        console.log(p4.classList.contains("jj"));
        console.log(p4.classList.contains("zz"));
    </script>
    
</body>
</html>
代码运行后如下：

【实验三.  其他属性的查看与修改（以<img>标签为例）】

1.  <img>标签示例（修改前）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
    <img src="./img_src/logo.png" alt="图片加载失败" id="img1">

    <script>
        // 【实验三.  其他属性的查看与修改（以<img>标签为例）】
        const i = document.getElementById("img1");  
        console.log("修改前:"+ i.src);
    </script>
    
</body>
</html>
代码运行后如下：

2.  <img>标签示例（修改后） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的属性修改</title>
</head>
<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
    <img src="./img_src/logo.png" alt="图片加载失败" id="img1">

    <script>
        // 【实验三.  其他属性的查看与修改（以<img>标签为例）】
       const i = document.getElementById("img1");
        i.src = "./香蕉.jpg"; // 修改src属性
        console.log("修改后:"+ i.src);
    </script>
    
</body>
</html>
代码运行后如下：

四、节点创建于插入

1. 创建节点 

1.1 创建一个<p>标签节点

  • createElement 方法用来生成标签节点，并返回该节点。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的创建与插入</title>
</head>
<body>

    <p class="pp">
        我是段落2
    </p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 1. 创建节点
        // 1.1 创建一个<p>标签节点
        var p4 = document.createElement("p");
        console.log(p4);
    </script>
    
</body>
</html>
代码运行后如下：

 

1.2 创建一个文本节点

  • createTextNode 方法用来生成文本节点，并返回该节点。它的参数是文本节点的内容。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的创建与插入</title>
</head>
<body>

    <p class="pp">
        我是段落2
    </p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 1.2 创建一个文本节点
        var t4 = document.createTextNode("我是段落5");
        console.log(t4);
    </script>
    
</body>
</html>
代码运行后如下：

1.3 创建一个属性节点并为其赋值

  • createAttribute 方法生成一个新的属性节点，并返回该节点。可通过该节点的value属性，对其赋值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的创建与插入</title>
</head>
<body>

    <p class="pp">
        我是段落2
    </p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 1.3 创建一个属性节点并为其赋值
        var a4 = document.createAttribute("class"); // 创建属性节点
        a4.value = "fruit";  // 为属性节点赋值
        console.log(a4);
    </script>
    
</body>
</html>
代码运行后如下：

2. 插入节点

2.1 将文本节点作为子节点，加入新建的<p>标签节点下面

  • appendChild  为标签节点增加子节点。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的创建与插入</title>
</head>
<body>

    <p class="pp">
        我是段落2
    </p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 2. 插入节点
        // 2.1 将文本节点作为子节点，加入新建的<p>标签节点下面
         p4.appendChild(t4);
    </script>
    
</body>
</html>

2.2 将属性节点插入新建的<p>标签节点

  • setAttributeNode  为标签节点插入属性节点，比如name，class，id,  style等。
  • 若此属性节点已经设置到别的元素节点，则控制台会报错。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的创建与插入</title>
</head>
<body>

    <p class="pp">
        我是段落2
    </p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 2. 插入节点
        // 2.2 将属性节点插入新建的<p>标签节点
        p4.setAttributeNode(a4);
    </script>
    
</body>
</html>

2.3 将已经配置号的<p>标签节点，作为子节点，插入body节点中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点的创建与插入</title>
</head>
<body>

    <p class="pp">
        我是段落2
    </p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 2.3 将已经配置号的<p>标签节点，作为子节点，插入body节点中
        const body_node = document.getElementsByTagName("body")[0];
          body_node.appendChild(p4);
    </script>
    
</body>
</html>

五、CSS样式的修改

1.  常见的js修改CSS样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用js修改CSS样式</title>

    <style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;
            font-family: 楷体;
            
        }
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
    </script>
</body>
</html>
代码运行后如下：

2.  独立修改节点style下面的各种属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用js修改CSS样式</title>

    <style>
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        // 方式1:  我自己更常用，觉得更清晰
        e.style.backgroundColor = "gray";
        e.style.color = "white";
        e.style.fontSize = "30px";
        e.style.fontFamily = "宋体";
    </script>
</body>
</html>
代码运行后如下：

3.  修改节点的CSS代码（通过反引号实现）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用js修改CSS样式</title>

    <style>
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        // 方式2:  直接修改该节点的CSS代码
        // 利用反引号来解决过长字符串的换行问题，以提高阅读性
        // 如何在键盘中输入反引号：英文输入法下，按左上角那个键
        e.style.cssText = 
        `
            background-color: gray; 
            color:green;
            font-size: 50px;
        `;
        console.log(e.style.cssText)
    </script>
</body>
</html>
代码运行后如下：

六、定时器函数

1. setInterval 函数

①、前言

  • setInterval 函数指定某个任务每隔一段时间就执行一次（无限次的定时执行）

②. setInterval 函数案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器函数</title>
</head>
<body>

    <p class="pp">我是段落</p>

    <script>

        function func(){
            console.log("定时任务: 喝水！");
        }

        function func2(){
            console.log("定时任务: 去超市买酱油！");
        }
        // 每隔1000ms执行一次定时任务（无限重复）
        setInterval(func, 1000); 
    </script>
    
</body>
</html>
代码运行后如下：

2. setTimeout 函数

①、前言

  • setTimeout 函数用来指定某个函数，在多少毫秒之后执行(仅执行一次)。它返回一个整数表示定时器的编号，如果突然想撤销这个定时任务，可以用这个编号取消。
  • 若要定时执行多次，只需多次调用setTimeout 即可。

②. setTimeout 函数案例

代码运行后如下：

 5s后


http://www.kler.cn/a/380181.html

相关文章：

  • 路径规划 | ROS中多个路径规划算法可视化与性能对比分析
  • FFmpeg 4.3 音视频-多路H265监控录放C++开发十二：在屏幕上显示多路视频播放，可以有不同的分辨率，格式和帧率。
  • 数字后端零基础入门系列 | Innovus零基础LAB学习Day8
  • 光耦合器的关键作用和创新---腾恩科技
  • ELK之路第三步——日志收集筛选logstash和filebeat
  • 如何使用Web-Check和cpolar实现安全的远程网站监测与管理
  • ssm023实验室耗材管理系统设计与实现+jsp(论文+源码)_kaic
  • 开源与商业的碰撞TPFLOW与Gadmin低代码的商业合作
  • 机器视觉：ROI在机器视觉中的作用
  • Spring学习笔记_24——切入点表达式
  • Pwn学习笔记（10）--UAF
  • ElementUI中el-table双击单元格显示输入框
  • 基于SSM+小程序的高校寻物平台管理系统（失物1）
  • k8s简单的指令以及图解
  • 论文阅读：Computational Long Exposure Mobile Photography (二)
  • Spring3(代理模式 Spring1案例补充 Aop 面试题)
  • 使用commitizen用于项目git提交规范管理
  • HarmonyOS第一课 07 从网络获取数据-习题
  • 【python GUI编码入门-14】创建动态更新的Tkinter GUI应用
  • 【算法】【优选算法】双指针（下）
  • 了解bootstrap改造asp.net core MVC的样式模板
  • 【湖南-常德】《市级信息化建设项目初步设计方案编制规范和支出预算编制标准（试行）》-省市费用标准解读系列05
  • ElMessageBox 内容自定义
  • 嵌入式常用功能之通讯协议1--IIC
  • org.springframework.boot:type=Admin,name=SpringApplication异常
  • Chrome与傲游浏览器性能与功能的深度对比