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

斩！JavaScript语法进阶

news 2024/11/5 13:46:00

一、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.mrgr.cn/news/64973.html

相关文章：

  • 前端部署到Nginx服务器后产生的一些问题原因，如请求接口报错，或刷新页面后报500错误……
  • 【计网不挂科】计算机网络期末考试中常见【选择题＆填空题＆判断题＆简述题】题库（3）
  • 类被加载到jvm后再被注册到Spring中
  • Prometheus套装部署到K8S+Dashboard部署详解
  • redis：list列表命令和内部编码
  • Vivo手机怎样才能投屏到别的安卓手机上去？
  • 【stm32】RTC时钟的介绍与使用
  • 详解K8S--声明式API
  • C++之多态的深度剖析（2）
  • 环境报错：/usr/local/cuda/bin/nvcc: No such file or directory 错误
  • Windows的MySQL开机自动启动问题
  • 【c++篇】：掌握vector基础知识--基本操作与使用全知道
  • 看门狗电路原理与应用
  • 学习笔记——三小时玩转JQuery
  • 重读《人月神话》（11）-提纲挈领（The Documentary Hypothesis）
  • WPF怎么通过RestSharp向后端发请求
  • 计组-Cache的基本概念，计算Cache+主存的平均周期
  • 世界时区划分
  • 2. 从服务器的主接口入手
  • Leetcode刷题Python之638.大礼包
  • Windows配置Nodejs及nmp简明教程（2024可用）
  • 深入理解JavaScript中的 new 关键字
  • 【2024-10-31-2024-11-03】LeetCode刷题——python语法基础题
  • python如何调字体大小
  • 241029 网鼎杯青龙组 Crypto2
  • STM32 第22章 常用存储器介绍