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

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

news 2026/2/8 20:57:54

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 操作网页的接口&#xff0c;全称为“文档对象模型”&#xff08;Document Object Model&#xff09; 当网页被加载时&#xff0c;浏览器将网页转为一个DOM&#xff0c;并用JS进行各种操作。比如&#xff1a;改变页面中的HTML 元素及其属性&#x…...

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

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

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

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

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

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

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

Flutter中的Extension关键字

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

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

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

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

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

STM32——ADC

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

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

Unity SRP学习笔记（二）

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

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

数据库第五次作业

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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慢速攻击&#xff08;Slow HTTP Attack&#xff09;是一种拒绝服务攻击&#xff08;DoS&#xff09;&#xff0c;攻击者通过故意缓慢地发送HTTP请求来耗尽服务器资源&#xff0c;导致合法…...

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

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

目录 一、问题综述 1. 进程和线程的区别&#xff1f; 2. 进程的状态有哪些&#xff1f; 3. 进程之间的通信方式? &#xff08;1&#xff09;管道 &#xff08;2&#xff09;消息队列 &#xff08;3&#xff09;共享内存 &#xff08;4&#xff09;信号量 &#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日在青岛举行&#xff0c;本次大会由中国自动化学会主办&#xff0c;青岛科技大学&#xff08;简称“青科大”&#xff09;承办。北京和隆优化科技股份有限公司&#xff08;简称“和隆优化”&#xff09;承办了重要的“智慧化工及复合人才培养”平行…...

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

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

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

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

跨平台Flutter 、ReactNative 开发原理

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

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

qt QToolBar详解

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

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

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/8 20:41:48

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2026/2/4 11:21:40

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/12/19 19:15:39

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2026/1/19 6:41:37

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2026/2/5 20:04:55