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

斩！JavaScript语法进阶

news 文章来源：https://blog.csdn.net/2401_84309743/article/details/143469325 2025/5/25 6:06:37

一、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>

运行结果如下：

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

一、DOM 概述

（一）最常用的节点类型

（二）节点间的关系

二、DOM 操作

（一）获取已有的节点

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

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

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

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

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

（二）属性的查看与修改

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

（1）id 获取属性

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

（3）修改节点的id属性

（4）修改节点的class属性

2.classList对象的操作

（1）id获取节点

（2）add() ：增加一个 class 名

（3）remove() ：移除一个 class

（4）contains() ：检查当前元素是否包含某个 class 名，返回布尔值

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

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

1.新节点的创建

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

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

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

2.新节点的插入

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

（2）setAttributeNode 为标签节点插入属性节点，比如name，class，id, style等

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

三、定时器函数

1.setInterval 函数

2.setTimeout 函数

四、CSS样式操作

1.方法一：

2.方法二：

相关文章：

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