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框架中的一个控件，用于在工具栏中显示一组操作按钮和其他控件。它提供了一种方便的方式来组织和管理应用程序中的工具和操作。工具栏通常位于软件或应用程序界面的上方，包含一系列常用工具和命令按钮，用于快速访问和执行…...
MongoDB基础介绍以及从0~1语法介绍
目录 MongoDB 教程导读 NoSQL 简介 关系型数据库遵循ACID规则 分布式系统 分布式计算的优点 分布式计算的缺点 什么是NoSQL? 为什么使用NoSQL ? RDBMS vs NoSQL NoSQL 简史 CAP定理（CAP theorem） NoSQL的优点/缺点 BASE ACID vs BASE N…...
利用Docker Compose构建微服务架构
💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 利用Docker Compose构建微服务架构 引言 Docker Compose 简介 安装 Docker Compose 创建项目结构 编写 Dockerfile 前端 Dockerf…...
数据中台一键大解析！
自从互联玩企业掀起了数据中台风，数据中台这个点马上就火起来了，短短几年数据中台就得到了极高的热度，一大堆企业也在跟风做数据中台，都把数据中台作为企业数字化转型的救命稻草，可是如果我告诉你数据中台并不是万能钥…...
MySQL45讲 第十六讲 “order by”是怎么工作的？
文章目录 MySQL45讲 第十六讲 “order by”是怎么工作的？一、引言二、全字段排序（一）索引创建与执行情况分析（二）执行流程（三）查看是否使用临时文件 三、rowid 排序（一）参…...
智慧商城项目-VUE2
实现效果 项目收获 通过本项目的练习，可以掌握以下内容： 创建项目 ##基本创建 基于 VueCli 自定义创建项目架子,并对相关的配置进行选择 vue create demo-shopping调整目录 删除文件 删除初始化的一些默认文件 src/assets/logo.pngsrc/components…...
音视频入门基础：FLV专题（22）——FFmpeg源码中，获取FLV文件音频信息的实现（中）
本文接着《音视频入门基础：FLV专题（21）——FFmpeg源码中，获取FLV文件音频信息的实现（上）》，继续讲解FFmpeg获取FLV文件的音频信息到底是从哪个地方获取的。本文的一级标题从“四”开始。 四、音…...
Chrome与火狐哪个浏览器的性能表现更好
在数字时代，浏览器是我们日常生活中不可或缺的工具。无论是工作、学习还是娱乐，一个好的浏览器都能显著提高我们的效率和体验。市场上有许多优秀的浏览器，其中Google Chrome和Mozilla Firefox无疑是最受欢迎的两款。本文将比较这两款浏览器的…...
uniapp在js方法中，获取当前用户的uid(uni-id-user)表中的用户id
// 1.判断当前用的权限 let uid uniCloud.getCurrentUserInfo().uid //获取当前用户的uid // 用户uid等于发布者id或者用户权限等于admin或者用户角色等于webmaster if (uid this.item.user_id[0]._id || this.uniIDHasRole…...
影响神经网络速度的因素- FLOPs、MAC、并行度以及计算平台
影响神经网络速度的四个主要因素分别是 FLOPs（浮点操作数）、MAC（内存访问成本）、并行度以及计算平台。这些因素共同作用，直接影响到神经网络的计算速度和资源需求。 1. FLOPs（Floating Point Operations&a…...
【万字详解】如何在微信小程序的 Taro 框架中设置静态图片 assets/image 的 Base64 转换上限值
设置方法 mini 中提供了 imageUrlLoaderOption 和 postcss.url 。 其中： config.limit 和 imageUrlLoaderOption.limit 服务于 Taro 的 MiniWebpackModule.js ， 值的写法要 （）KB * 1024。 config.maxSize 服务于 postcss-url 的…...