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

JS语法进阶第一课！—DOM（重点）

news 2025/9/16 19:04:32

1、DOM概念

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）
当网页被加载时，浏览器将网页转为一个DOM，并用JS进行各种操作。比如：改变页面中的HTML 元素及其属性，改变页面中的CSS 样式，对页面中的事件做出响应。

DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。

掌握基本的概念和函数即可，后面会用JS库或者框架来简化操作，直接用原生JS来实现动态网页的机会不多，比如：jQuery和Vue

2、DOM Tree树状结构

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

最常用的节点类型：

（1）文档节点 document Nodes

表示整个文档，是DOM操作的起点

（2）元素节点 elemen Nodes

表示HTML元素，例如<div>等

（3）属性节点 attribute Nodes

表示HTML 元素的属性

（4）文本节点 text Nodes

表示HTML 元素内的文本

节点间的关系：

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

3、DOM操作

（1）获取已有的节点

1.getElementsByTagName ()

通过搜索 HTML 标签名来获取节点，返回符合条件的元素。它的返回值是一个类似数组的对象

若有多个相同标签，返回含有多个节点的类数组对象

eg：

<body>

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

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

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

        <script>

const p1 = document.getElementsByTagName("p");

console.log(p1);

console.log(p1[0]);//输出p标签的第一个

console.log(p1[1]);//输出p标签的第二个

        </script>

</body>

2.getElementsByClassName（）

通过class名来获取节点，返回一个类似数组的对象，包括了所有 class 名字符合指定条件的元素。

若有多个相同class，返回含有多个节点的类数组对象

eg：

<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);

        </script>

</body>

3.getElementById（）

通过id名来获取节点，直接返回匹配指定 id 属性的元素节点（而不是类似数组的对象）

eg：

<body>

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

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

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

        <script>

const p3 = document.getElementById("p3");

console.log(p3);

        </script>

</body>

4.querySelectorAll（）

与 querySelector 用法类似，区别是返回一个NodeList 对象，包含所有匹配给定选择器的节点

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

eg：

<body>

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

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

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

        <script>

const p4 = document.querySelectorAll(".pp");

console.log(p4);

        </script>

</body>

5. querySelector（）

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

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

eg：

<body>

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

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

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

        <script>

        const p5 = document.querySelector(".pp");

console.log(p5);

        </script>

</body>

（2）属性的查看与修改

1.id 属性

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

eg：

<body>

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

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

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

<script>

const p = document.getElementById("p3");

console.log(p);

console.log(p.id);

p.id = "_p_3";

console.log(p.id);

</script>

</body>

以上代码获取id属性后修改id名为 _p_3

2.className 属性

用来读写当前元素节点的 class 名，与id属性使用方法类似

eg：

<body>

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

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

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

<script>

const p = document.getElementById("p3");

console.log(p);

console.log(p.className);

p.className = "pp jj yy xx";

console.log(p.className);

</script>

</body>

以上代码获取class属性后修改class 名为pp jj yy xx

3.classList 属性

是一个对象

有下列方法：

add() ：增加一个 class 名。

eg：

p4.classList.add("zz");

remove() ：移除一个 class 名。

eg：

p4.classList.remove("xx");

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

eg：

console.log(p4.classList.contains("jj"));

4.innerHTML

返回一个字符串，等同于该元素包含的所有HTML代码。

该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括 <HTML> 和 <body> 元素。

eg：

<body>

        <img src="../xg.png" alt="图片加载失败" id="img1">；

        <script>

        const i = document.getElementById("img1");

        i.src = "../th.jpg";

        console.log("照片:"+ i.src);

        </script>

</body>

修改前：

修改后：

5.innerText

和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串。

（3）新节点的创建

1.createElement （）

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

eg：

var p4 = document.createElement("p");

2.createTextNode（）

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

eg：

var t4 = document.createTextNode("我是段落5");

3. createAttribute （）

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

var a4 = document.createAttribute("class"); // 创建属性节点

a4.value = "fruit"; // 为属性节点赋值

（4）新节点的插入

1. appendChild （）

为标签节点增加子节点

eg：

p4.appendChild(t4);

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

2. setAttributeNode（）

为标签节点插入属性节点，比如name，class，id, style等，若此属性节点已经设置到别的元素节点，则控制台会报错。

eg：

p4.setAttributeNode(a4);

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

3.插入<bady>标签中

最后不要忘了将已经配置号的<p>标签节点，作为子节点，插入body节点中

eg：

const body_node = document.getElementsByTagName("body")[0];

body_node.appendChild(p4);

4、定时器函数

（1）setInterval 函数

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

语法格式：

setInterval(函数名, 时长（单位为ms）);

eg：

<body>

<script>

function func1(){

console.log("定时任务: 喝水！");

}

setInterval(func, 1000);

</script>

</body>

每隔1000ms执行一次定时任务（无限重复）

（2）setTimeout 函数

用来指定某个函数在多少毫秒之后执行(仅执行一次)

它返回一个整数表示定时器的编号，如果突然想撤销这个定时任务，可以用这个编号取消。若要定时执行多次，只需多次调用setTimeout 即可。

语法格式：

<body>

<script>

function func1(){

console.log("起床啦！");

}

const time_id = setTimeout(func2, 5000);

clearTimeout(time_id); // 临时通知该定时器取消任务

</script>

</body>

5秒以后（仅仅）执行一次定时任务！返回的是该定时器唯一编码，可利用该编码临时取消任务

5、 CSS样式操作

（1）方法一

直接独立修改节点style下面的各种属性
ps：

属性名与CSS键名有区别，主要是小写变大写

eg：

<body>

<div class="box" id="div1">利用js修改CSS样式</div>

<script>

e.style.backgroundColor = "pink";

e.style.color = "white";

e.style.fontSize = "30px";

</script>

</body>

运行后：

（2）方法二

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

eg：

<body>

<div class="box" id="div1">利用js修改CSS样式</div>

<script>

e.style.cssText =

`

background-color: gray;

color:pink;

font-size: 50px;

`;

</script>

</body>

运行后：

JS语法进阶第一课！—DOM（重点）

1、DOM概念 DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model） 当网页被加载时，浏览器将网页转为一个DOM，并用JS进行各种操作。比如：改变页面中的HTML 元素及其属性&#x…...

编程日记 2024/11/6 15:06:12

Swift 开发教程系列 - 第5章：集合类型

Swift 提供了几种常用的集合类型，用于存储和管理一组数据。这些集合类型包括数组（Array）、字典（Dictionary）和集合（Set）。本章将介绍它们的使用方法及常见操作。 5.1 数组（Array&am…...

编程日记 2024/11/6 15:05:11

Spring：Bean（创建方式，抽象继承，工厂Bean，生命周期）

1，Bean的创建 1.1，调用构造器创建Bean 调用Bean类的无参构造函数来创造对象，因此要求提供无参构造函数。在这种情况下class元素是必须的，值就是Bean对象的实现类。如果采用设值注入，Spring容器将使用默认的构造器来创…...

编程日记 2024/11/6 15:04:09

Flutter中的Extension关键字

目录前言一、什么是扩展(Extension) 二、扩展的语法三、示例:为String 添加扩展方法四、使用扩展的场景五、复杂示例:为DateTime添加扩展前言在 Dart 和 Flutter 中，extension 关键字允许开发者为现有的类添加新的功能，而无需修改原有类的代…...

编程日记 2024/11/6 15:03:06

transformers 框架使用详解，bert-base-chinese

以 bert-base-chinese 模型为例，模型目录 model_name "C:/Users/Administrator.DESKTOP-TPJL4TC/.cache/modelscope/hub/tiansz/bert-base-chinese" bert-base-chinese 模型大小只有400多兆，参数的量级在百万级别，与现在动辄几十…...

编程日记 2024/11/6 15:00:02

STM32——ADC

目录 1、ADC的介绍 2、ADC主要特征 3、ADC结构与引脚 4、ADC配置流程 5、示例（光敏电阻的ADC采样） 6、提示 7、结语： 1、ADC的介绍 12位ADC是一种逐次逼近型模拟数字转换器。它有多达18个通道，可测量16个外部和2个内部信号…...

编程日记 2024/11/6 14:59:00

Unity SRP学习笔记（二）

Unity SRP学习笔记（二） 主要参考： https://catlikecoding.com/unity/tutorials/custom-srp/ https://docs.unity.cn/cn/2022.3/ScriptReference/index.html 中文教程部分参考（可选）： https://tuncle.blog/c…...

编程日记 2024/11/6 14:57:59

数据库第五次作业

一要求二建库建表触发器存储过程三查询触发器 1 建立触发器，订单表中增加订单数量后，商品表商品数量同步减少对应的商品订单出数量,并测试测试 2 建立触发器，实现功能:客户取消订单，恢复商品表对应商品的数量测试 3…...

编程日记 2024/11/6 14:55:57

健身房业务流程优化：SpringBoot解决方案

3系统分析 3.1可行性分析通过对本健身房管理系统实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性本健身房管理系统采用SSM框架，JAVA作为开发语言&a…...

编程日记 2024/11/6 14:54:56

【产品经理】工业互联网企业上市之路

树根互联2022年6月2日提交招股书之后，因财务资料超过六个月有效期加三个月延长期，2022年9月30日上市审核中止；2022年12月26日树根互联更新了2022年半年度财务资料，又九个月过去了，其上市进程将面临再一次中止。处于上…...

编程日记 2024/11/6 14:52:52

Java学习教程，从入门到精通，Java对象和类语法知识点（20）

1、Java对象和类语法知识点类的定义使用class关键字定义类。类名通常使用大写驼峰命名法（PascalCase）。类与对象类是创建对象的模板或蓝图，它定义了对象的属性和行为。对象是类的实例，它包含了类定义的数据（属性&am…...

编程日记 2024/11/6 14:51:51

金融场中的量化交易：民锋数据驱动策略的优势解析市

随着科技的发展，量化交易成为金融市场的重要组成部分。民锋公司通过智能算法和大数据分析，设计了一系列量化交易策略，帮助投资者实现科学投资。本文将探讨民锋在数据驱动策略上的优势，并展示如何通过量化模型在复杂的市场中获得收…...

编程日记 2024/11/6 14:50:50

Docker 配置镜像加速

docker 拉取代码时出现 ERROR: failed to solve: node:16: unexpected status from HEAD request to https:// xxxxxx.mirror.aliyuncs.com/v2/library/node/m…...

编程日记 2024/11/6 14:48:48

HTTP慢速攻击原理及解决办法

目录引言 HTTP慢速攻击原理解决办法 Nginx Tomcat 华宇TAS IIS 结论引言 HTTP慢速攻击（Slow HTTP Attack）是一种拒绝服务攻击（DoS），攻击者通过故意缓慢地发送HTTP请求来耗尽服务器资源，导致合法…...

编程日记 2024/11/6 14:47:45

【系统面试篇】进程和线程类（1）（笔记）——区别、通讯方式、同步、互斥、锁分类

目录一、问题综述 1. 进程和线程的区别？ 2. 进程的状态有哪些？ 3. 进程之间的通信方式? （1）管道 （2）消息队列 （3）共享内存 （4）信号量 &#xff08…...

编程日记 2024/11/6 14:46:44

[C++]——哈希（附源码）

目录编辑编辑一、前言二、正文 2.1 unorder系列关联式容器 2.1.1 unordered_map 2.1.1.1 unorderer_map的介绍 ①unordered_map的构造 ②unordered_map的容量 ③unordered_map的迭代器 ④unordered_map的元素访问 ⑤unordered_map的查询 ⑥unordered_map的修改操…...

编程日记 2024/11/6 14:45:43

2024中国自动化大会（CAC2024）“智慧化工及复合人才培养”平行会议圆满落幕

2024中国自动化大会于11月1-3日在青岛举行，本次大会由中国自动化学会主办，青岛科技大学（简称“青科大”）承办。北京和隆优化科技股份有限公司（简称“和隆优化”）承办了重要的“智慧化工及复合人才培养”平行…...

编程日记 2024/11/6 14:43:40

计算机毕业设计——ssm基于JAVA的求职招聘网站的设计与实现演示录像 2021

作者：程序媛9688开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等。 🌟文末获取源码数据库🌟感兴趣的可以先收藏起来，还有大家在毕设选题（免费咨询指导选题）&#xff0…...

编程日记 2024/11/6 14:41:38

跨平台Flutter 、ReactNative 开发原理

一、跨平台Flutter开发原理 Flutter是一个跨平台的应用程序开发框架，它允许你使用一组代码库来构建同时运行在Android和iOS上的应用程序。 1.1.Flutter的核心原理基于以下几点： Dart异步、Widget构建块灵活配置、自工化工具链、热重载、Skia图库、Dar…...

编程日记 2024/11/6 14:34:28

qt QToolBar详解

1、概述 QToolBar是Qt框架中的一个控件，用于在工具栏中显示一组操作按钮和其他控件。它提供了一种方便的方式来组织和管理应用程序中的工具和操作。工具栏通常位于软件或应用程序界面的上方，包含一系列常用工具和命令按钮，用于快速访问和执行…...

编程日记 2024/11/6 14:33:27

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/9/3 1:27:59

QMC5883L的驱动

简介本篇文章的代码已经上传到了github上面，开源代码作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/8/12 6:01:40

思维导图 1-3 章 4-7章 8-11 章参考资料源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/9/14 7:52:42

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2025/9/2 19:31:47

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2025/9/4 15:27:33

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12

Selenium常用函数介绍

目录一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口四，弹窗五，等待六，导航七，文件上传 …...

编程新知 2025/9/3 20:57:36

基于Springboot+Vue的办公管理系统

角色： 管理员、员工技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...

编程新知 2025/9/2 17:48:57

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具，专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑（如DBC、LDF、ARXML、HEX等），并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

编程新知 2025/9/7 8:47:54

1、DOM概念

2、DOM Tree树状结构

最常用的节点类型：

（1） 文档节点 document Nodes

（2）元素节点 elemen Nodes

（3）属性节点 attribute Nodes

（4）文本节点 text Nodes

节点间的关系：

3、DOM操作

（1）获取已有的节点

1.getElementsByTagName ()

2.getElementsByClassName（）

3.getElementById（）

4.querySelectorAll（）

5. querySelector（）

（2）属性的查看与修改

1.id 属性

2.className 属性

3.classList 属性

4.innerHTML

5.innerText

（3）新节点的创建

1.createElement （）

2.createTextNode（）

3. createAttribute （）

（4）新节点的插入

1. appendChild （）

2. setAttributeNode（）

3.插入<bady>标签中

4、定时器函数

（1）setInterval 函数

（2）setTimeout 函数

5、 CSS样式操作

（1）方法一

（2）方法二

相关文章：

（1）文档节点 document Nodes