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

斩！JavaScript语法进阶

article 2024/11/5 19:29:44

一、DOM 概述

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。当网页被加载时，浏览器将网页转为一个DOM，并用JS进行各种操作。比如：改变页面中的HTML 元素及其属性，改变页面中的CSS 样式，对页面中的事件做出响应。
可以这么理解，DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。

如图理解： 

浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。

（一）最常用的节点类型

  • 整个文档是一个文档节点                （document）
  • HTML 标签是元素节点；                （element）
  • HTML 元素的属性是属性节点；      （attribute）
  • HTML 元素内的文本是文本节点；  （text）

（二）节点间的关系

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

二、DOM 操作

（一）获取已有的节点

1.getElementsByTagName 方法：通过标签名获取节点。

搜索HTML标签名，返回符合条件的元素。它的返回值是一个类似数组的对象（HTMLCollection实例）。如果没有任何匹配的元素，就返回一个空集。‌

<body>
    <p class="aa">我是段落1</p>
    <p class="aa">我是段落2</p>
    <p class="aa" id="p3">我是段落3</p>

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

运行结果如下：

因为 “p” 有三个，p1 通过标签名获取了三个节点，p1[0] 表示获取到的第一个则是“我是段落1”，p1[1] 表示获取到的第2个则是 “我是段落2”。

2.getElementsByClassName 方法：通过类名获取节点。

返回一个类似数组的对象（ HTMLCollection 实例），包括了所有 class 名字符合指定条件的元素。

<body>
    <p class="aa">我是段落1</p>
    <p class="aa">我是段落2</p>
    <p class="aa" id="p3">我是段落3</p>
    
    <script>
        // getElementsByClassName 通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）
        const p2 = document.getElementsByClassName("aa");
        console.log(p2);
        console.log(p2[0]);
        console.log(p2[1]);
        console.log(p2[2]);
    </script>
</body>

因为 “aa” 有三个，p2 通过类名获取了三个节点，p2[0] 表示获取到的第一个则是“我是段落 “1”，p2[1] 表示获取到的第二个则是 “我是段落2”，p2[2] 表示获取到的是第三个则是 ”我是段落3“。

3.getElementById 方法：通过 id 获取节点

直接返回匹配指定 id 属性的元素节点（而不是类似数组的对象）。

<body>
    <p class="aa">我是段落1</p>
    <p class="aa">我是段落2</p>
    <p class="aa" id="p3">我是段落3</p>
    
    <script>
        // getElementById 通过id名来获取节点（直接返回可操控的节点）
        const p3 = document.getElementById("p3");
        console.log(p3);
    </script>
</body>

运行结果如下：

因为 ”p3“ 只有一个，p3通过 id名 获取了一个节点，则是 ”我是段落3“。

4.querySelectorAll 方法：获取所有匹配的元素

接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。

<body>
    <p class="aa">我是段落1</p>
    <p class="aa">我是段落2</p>
    <p class="aa" id="p3">我是段落3</p>
    
    <script>
        // querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
        const p4 = document.querySelectorAll(".aa");
        console.log(p4);
        console.log(p4[0]);
        console.log(p4[1]);
        console.log(p4[2]);
    </script>
</body>

运行结果如下：

因为 “.aa” 有三个，p4 通过选择器获取了三个节点，p4[0] 表示获取到的第一个则是“我是段落 “1”，p4[1] 表示获取到的第二个则是 “我是段落2”，p4[2] 表示获取到的是第三个则是 ”我是段落3“。

5.querySelector 方法：通过选择器（点击查看相关内容）获取节点

接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null。

<body>
    <p class="aa">我是段落1</p>
    <p class="aa">我是段落2</p>
    <p class="aa" id="p3">我是段落3</p>
    
    <script>
        // querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点
        const p5 = document.querySelector(".aa"); 
        console.log(p5);
    </script>
</body>

运行结果如下：

通过CSS选择器获取节点，”p5“ 返回第一个匹配上的节点则是 ”我是段落1“。

（二）属性的查看与修改

1.id和className属性的查看与修改

（1）id 获取属性
<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>

运行结果如下：

（2）查看标签节点的属性

id 属性来读写当前元素节点的 id 名。

className 属性用来读写当前元素节点的 class 名。

<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);
        // 2.查看标签节点的属性
        console.log(p.id);
        console.log(p.className);
    </script>
</body>

运行结果如下：

p 通过 id名”p3“ 获取节点，p.id查看节点 id名，p.className查看节点类名。

（3）修改节点的id属性
<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);
        
        // 3.修改节点的id属性
        p.id = "_p_3";
        console.log(p.id);
    </script>
</body>

运行结果如下：

原来 id=”p3“改为 id=”_p_3“。

（4）修改节点的class属性
<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);

        // 4.修改节点的class属性
        p.className = "pp jj yy xx";
        console.log(p.className);
    </script>
</body>

运行结果如下：

原来 class=”p3“改为 class=”pp jj yy xx“。

2.classList对象的操作

（1）id获取节点
<body>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        // 【实验二.  classList对象的操作】
        // 根据id获取节点
        const p4 = document.getElementById("p4");
        console.log(p4.classList);
        console.log(p4.classList[0]);
    </script>
</body>

运行结果如下：

（2）add() ：增加一个 class 名
<body>
    <p class="pp jj yy xx" id="p4">我是段落4</p>
    <script>
        const p4 = document.getElementById("p4");

        // 为classList添加一个新的class名
        p4.classList.add("zz");
        console.log(p4.classList);
    </script>
</body>

运行结果如下：

增加一个 class 名 ”zz“。

（3）remove() ：移除一个 class 
<body>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        const p4 = document.getElementById("p4");

        // 为classList移除一个class名
        p4.classList.remove("xx");
        console.log(p4.classList);
    </script>
</body>

运行结果如下：

（4）contains() ：检查当前元素是否包含某个 class 名，返回布尔值
<body>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
        const p4 = document.getElementById("p4");

        // 检查classList中是否存在某个class名，返回布尔值。
        console.log(p4.classList.contains("jj"));
        console.log(p4.classList.contains("zz"));
    </script>
</body>

运行结果如下：

3.其他属性的查看与修改（以<img>标签为例）

<body>
    <img src="./photo.jpg" alt="图片加载失败" id="img1">

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

运行结果如下：

添加修改src属性后

<body>
    <img src="./photo.jpg" alt="图片加载失败" id="img1">

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

运行结果如下：

可以通过该方法更改网页中的图片.

（三）新节点的创建与插入

1.新节点的创建

（1）createElement ：创建一个<p>标签节点

createElement 方法用来生成标签节点，并返回该节点。

创建一个<p>标签节点，通过createElement 方法用来生成标签节点，并返回该节点。


    <script>
        // 1. 创建节点
        // 1.1 创建一个<p>标签节点
        var p4 = document.createElement("p");
        console.log(p4);
    </script>

运行结果如下：

（2）createTextNode ：创建一个文本节点

createTextNode 方法用来生成文本节点，并返回该节点。它的参数是文本节点的内容。

    <script>
        // 1.2 创建一个文本节点
        var t4 = document.createTextNode("我是段落5");
        console.log(t4);
    </script>

运行结果如下：

（3）createAttribute： 生成一个新的属性节点，并返回该节点。

创建一个属性节点并为其赋值，通过createAttribute 方法生成一个新的属性节点，并返回该节点。可通过该节点的value属性，对其赋值。

    <script>
        // // 1.3 创建一个属性节点并为其赋值
        var a4 = document.createAttribute("class"); // 创建属性节点
        a4.value = "fruit";  // 为属性节点赋值
        console.log(a4);
    </script>

运行结果如下：

2.新节点的插入

（1）appendChild  ：为标签节点增加子节点。

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

        // 2.1 将文本节点作为子节点，加入新建的<p>标签节点下面
        p4.appendChild(t4);
（2）setAttributeNode  为标签节点插入属性节点，比如name，class，id,  style等

若 setAttributeNode 已经设置到别的元素节点，则控制台会报错。

        // 2.2 将属性节点插入新建的<p>标签节点
        p4.setAttributeNode(a4);
（3）将已经配置号的<p>标签节点，作为子节点，插入body节点中
        const body_node = document.getElementsByTagName("body")[0];
        body_node.appendChild(p4);

举例：

运行代码如下：

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

    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>
    <script>
        var p4 = document.createElement("p");
         var t4 = document.createTextNode("我是段落5");
        console.log(t4);
        var a4 = document.createAttribute("class"); 
        a4.value = "fruit";  
        console.log(a4);

        // 2. 插入节点
        // 2.1 将文本节点作为子节点，加入新建的<p>标签节点下面
        p4.appendChild(t4);    
        // 2.2 将属性节点插入新建的<p>标签节点
        p4.setAttributeNode(a4);
        // 2.3 将已经配置号的<p>标签节点，作为子节点，插入body节点中
        const body_node = document.getElementsByTagName("body")[0];
        body_node.appendChild(p4);
    </script>
</body>

运行结果如下：

三、定时器函数

1.setInterval 函数

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

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

    <script>
        function func1(){
            console.log("定时任务: 喝水！");
        }

        // 每隔1000ms执行一次定时任务（无限重复）
        setInterval(func1, 1000); 
    </script>
</body>

运行结果如下：

2.setTimeout 函数

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

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

    <script>
        function func2(){
            console.log("定时任务: 去超市买酱油！");
        }

        // 5秒以后（仅仅）执行一次定时任务！返回的是该定时器唯一编码，可利用该编码临时取消任务
        const time_id = setTimeout(func2, 5000); 
        // 临时通知该定时器取消任务 
        clearTimeout(time_id);  
    </script>
</body>

该代码将在五秒后执行一次，且只执行一次。

setTimeout ：不会阻塞主线程

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

    <script>
        // 你可以在这里继续执行其他代码，setTimeout 不会阻塞主线程 
        console.log("正在执行别的代码...");
    </script>
</body>

运行结果如下： 

四、CSS样式操作

通过节点可以创建节点，修改图片，还可以修改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;
            
        }
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
</body>
</html>

运行结果如下：

1.方法一：

运行代码如下：

<!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;
            
        }
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        var e = document.getElementById("div1");

        // 方式1:  展示更清晰
        e.style.backgroundColor = "red";
        e.style.color = "white";
        e.style.fontSize = "30px";

    </script>
</body>
</html>

运行结果如下：

 

2.方法二：

运行代码如下：

<!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;
            
        }
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        var e = document.getElementById("div1");

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

运行结果如下：

要理解其中的内容要自己敲打运行代码，才能加深理解！


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

相关文章：

  • H265编码丢帧问题分析
  • 力扣动态规划基础版（矩阵型）
  • SQL拦截（二）InnerInterceptor
  • QEMU学习之路（4）— Xilinx开源项目systemctlm-cosim-demo安装与使用
  • 视频去水印怎么办？两种方法教会你
  • linux同步执行命令脚本 (xcall)
  • GDB(GNU Debugger)的使用教程
  • 代码随想录算法训练营第三十四天|Day34 动态规划
  • 四川无人机航测服务公司产品应用案例
  • 深度学习揭秘：神经网络如何模拟人脑
  • 100种算法【Python版】第38篇——Boyer-Moore算法
  • Python 如何在 Web 环境中使用 Matplotlib 进行数据可视化
  • PyQt入门指南四十 图形视图框架Graphics View
  • 使用WebStorm开发Vue3项目
  • 18.04Ubuntu遇到Unable to locate package
  • Games101笔记-三维Transform变换（三）
  • 手机怎么玩森林之子？远程玩森林之子教程
  • 【解决】Linux环境中mysqlclient安装失败问题
  • LLM懂不懂揣摩式思考
  • 华为大数据和数据库有关系吗？
  • 面试问题：hash和history的区别
  • 正式开源：从 Greenplum 到 Cloudberry 迁移工具 cbcopy 发布
  • Chrome浏览器音/视频无法自动播放
  • 微服务设计模式 - 网关路由模式（Gateway Routing Pattern）
  • dns主从服务器的配置
  • Web 词汇表