JS语法进阶第一课！—DOM（重点）
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…...
Swift 开发教程系列 - 第5章：集合类型
Swift 提供了几种常用的集合类型，用于存储和管理一组数据。这些集合类型包括数组（Array）、字典（Dictionary）和集合（Set）。本章将介绍它们的使用方法及常见操作。 5.1 数组（Array&am…...
Spring：Bean（创建方式，抽象继承，工厂Bean，生命周期）
1，Bean的创建 1.1，调用构造器创建Bean 调用Bean类的无参构造函数来创造对象，因此要求提供无参构造函数。在这种情况下class元素是必须的，值就是Bean对象的实现类。 如果采用设值注入，Spring容器将使用默认的构造器来创…...
Flutter中的Extension关键字
目录 前言 一、什么是扩展(Extension) 二、扩展的语法 三、示例:为String 添加扩展方法 四、使用扩展的场景 五、复杂示例:为DateTime添加扩展 前言 在 Dart 和 Flutter 中，extension 关键字允许开发者为现有的类添加新的功能，而无需修改原有类的代…...
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多兆，参数的量级在百万级别，与现在动辄几十…...
STM32——ADC
目录 1、ADC的介绍 2、ADC主要特征 3、ADC结构与引脚 4、ADC配置流程 5、示例（光敏电阻的ADC采样） 6、提示 7、结语： 1、ADC的介绍 12位ADC是一种逐次逼近型模拟数字转换器。它有多达18个通道，可测量16个外部和2个内部 信号…...
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…...
数据库第五次作业
一要求 二建库建表 触发器 存储过程 三查询 触发器 1 建立触发器，订单表中增加订单数量后，商品表商品数量同步减少对应的商品订单出数量,并测试 测试 2 建立触发器，实现功能:客户取消订单，恢复商品表对应商品的数量 测试 3…...
健身房业务流程优化：SpringBoot解决方案
3系统分析 3.1可行性分析 通过对本健身房管理系统实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本健身房管理系统采用SSM框架，JAVA作为开发语言&a…...
【产品经理】工业互联网企业上市之路
树根互联2022年6月2日提交招股书之后，因财务资料超过六个月有效期加三个月延长期，2022年9月30日上市审核中止；2022年12月26日树根互联更新了2022年半年度财务资料，又九个月过去了，其上市进程将面临再一次中止。 处于上…...
Java学习教程，从入门到精通，Java对象和类语法知识点（20）
1、Java对象和类语法知识点 类的定义 使用class关键字定义类。类名通常使用大写驼峰命名法（PascalCase）。类与对象 类是创建对象的模板或蓝图，它定义了对象的属性和行为。对象是类的实例，它包含了类定义的数据（属性&am…...
金融场中的量化交易：民锋数据驱动策略的优势解析市
随着科技的发展，量化交易成为金融市场的重要组成部分。民锋公司通过智能算法和大数据分析，设计了一系列量化交易策略，帮助投资者实现科学投资。本文将探讨民锋在数据驱动策略上的优势，并展示如何通过量化模型在复杂的市场中获得收…...
Docker 配置镜像加速
docker 拉取代码时出现 ERROR: failed to solve: node:16: unexpected status from HEAD request to https:// xxxxxx.mirror.aliyuncs.com/v2/library/node/m…...
HTTP慢速攻击原理及解决办法
目录 引言 HTTP慢速攻击原理 解决办法 Nginx Tomcat 华宇TAS IIS 结论 引言 HTTP慢速攻击（Slow HTTP Attack）是一种拒绝服务攻击（DoS），攻击者通过故意缓慢地发送HTTP请求来耗尽服务器资源，导致合法…...
【系统面试篇】进程和线程类（1）（笔记）——区别、通讯方式、同步、互斥、锁分类
目录 一、问题综述 1. 进程和线程的区别？ 2. 进程的状态有哪些？ 3. 进程之间的通信方式? （1）管道 （2）消息队列 （3）共享内存 （4）信号量 （…...
[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中国自动化大会（CAC2024）“智慧化工及复合人才培养”平行会议圆满落幕
2024中国自动化大会于11月1-3日在青岛举行，本次大会由中国自动化学会主办，青岛科技大学（简称“青科大”）承办。北京和隆优化科技股份有限公司（简称“和隆优化”）承办了重要的“智慧化工及复合人才培养”平行…...
计算机毕业设计——ssm基于JAVA的求职招聘网站的设计与实现演示录像 2021
作者：程序媛9688开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等。 🌟文末获取源码数据库🌟感兴趣的可以先收藏起来，还有大家在毕设选题（免费咨询指导选题）࿰…...
跨平台Flutter 、ReactNative 开发原理
一、跨平台Flutter开发原理 Flutter是一个跨平台的应用程序开发框架，它允许你使用一组代码库来构建同时运行在Android和iOS上的应用程序。 1.1.Flutter的核心原理基于以下几点： Dart异步、Widget构建块灵活配置、自工化工具链、热重载、Skia图库、Dar…...
qt QToolBar详解
1、概述 QToolBar是Qt框架中的一个控件，用于在工具栏中显示一组操作按钮和其他控件。它提供了一种方便的方式来组织和管理应用程序中的工具和操作。工具栏通常位于软件或应用程序界面的上方，包含一系列常用工具和命令按钮，用于快速访问和执行…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
云计算——弹性云计算器（ECS）
弹性云服务器：ECS 概述 云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术，说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...