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

DOM API-JS通过文档对象树操作Doc和CSS

article 2025/9/11 22:39:11

还记得我在之前的前端文章里面老是提及的 DOM 吗，当时只是简单介绍了它的组成以及作用，今天我们就来详细聊聊

Web浏览器

先来聊聊web浏览器，web浏览器是非常复杂的软件，有许多活动部件，许多部件并不能由开发者通过 JS 控制或操纵，这主要是出于安全考虑。不然网站可以访问密码等敏感信息

尽管有限制，但是 Web API 仍然给开发者提供了很多权限，比如

        窗口：窗口（window）是载入网页的浏览器标签；在 JS 中，它由 Window 对象表示，通过这个对象上的方法，我们可以对窗口进行操作，比如：返回窗口的大小（Window.innerWidth、Window.innerHeight），操作加载到窗口的文档，在客户端存储该文档的特定数据（例如使用本地数据库或其他存储机制），为当前窗口附加一个事件处理器（ addEventListener( ) ）等

        导航器：(navigator) 在网络上出现时，代表浏览器的状态和身份（即用户代理）。在 JS 中，它由 Navigator 对象表示，我们可以通过这个对象检索用户的首选语言、用户网络摄像头的媒体流等信息

        文档：(document，在浏览器中用 DOM 表示）是加载到窗口的实际页面，在 JS 中，它由 Document 对象表示。我们可以使用这个对象来返回和操作构成文档的 HTML 和 CSS 的信息，例如，在 DOM 中获得一个元素的引用，改变其文本内容（比如之前的 output ），对其应用新样式，创建新的元素并将其作为子元素加到当前元素，甚至完全删除它

本文主要讲的是 DOM API 的操作，也会聊聊其他部分

基础

目前在浏览器标签加载的文档是由一个文档对象模型也就是DOM表示的，它是浏览器创建的“树状结构”表示，使 HTML 结构能被编程语言轻松访问，浏览器本身在渲染页面时使用它将样式和其他信息应用于正确的元素，开发者可以在页面渲染后通过 JS 操作 DOM

DOM 的树状结构主要看 HTML 的嵌套，同层的就是兄弟节点，在里层的就是后代节点（子节点是直连的后代节点）

比如

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8" /><title>Simple DOM example</title></head><body><section><imgsrc="dinosaur.png"alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." /><p>Here we will add a link to the<a href="https://www.mozilla.org/">Mozilla homepage</a></p></section></body>
</html>

它的DOM树如下（Live DOM Viewer这个网站可以将HTML转为DOM）

 树上的节点中，有的代表标签元素，有的代表文本（根节点一般是 HTML）

下面给个例子

<!DOCTYPE html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Simple DOM example</title></head><body><section><img src="pow.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."><p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p></section><script src="ex1.js"></script></body>
</html>

const link=document.querySelector('a');link.textContent='pow';

我们通过DOM的方法 document.querySelector( ) 选择除了第一个 <a> 元素，并更改了这个链接的文本内容（它们定义在 <a> 元素的 HTMLAnchorElement 接口上，继承于更一般的父接口 HTMLElement 以及 Node）

还有其他方法：

Document.getElementById( )

Document.getElementsByTagName( )

但是还是推荐用 querySelector 这个CSS选择器，因为它支持 CSS 语法

创建新节点

document.creatElement( ); 创建新段落

Node.appendChild( ); 在后面追加新段落，其中 Node 代表DOM中的节点名

document.createTextNode( ); 在内部链接的段落添加文本节点

移除和删除节点

Node,removeChild( )         删除节点的父节点.remove(删除节点名)

Element.remove( )         删除仅基于自身的节点（图论）

        旧浏览器不支持这种删除自身的方式，得用: 删除节点.parentNode.removeChild(删除节点)

制作副本

Node.cloneNode( )

操作样式CSS

首先，可以用 Document.stylesheets 来获得一个附加在文档上的所有样式表的列表，它返回一个包含 CSSStyleSheet 对象的类数组，接着就可以根据需要添加/删除样式（但这种方法过时了）

（CSSStyleSheet 是用于表示 CSS样式表的接口，属于 CSS对象模型（CSSOM）的一部分，通过 StyleSheet 接口继承，内含属性和方法： cssRules、insertRule(rule,index)在指定位置插入CSS规则、delete(index)、ownerRule 若样式通过@import引入，指向对应规则。比如 document.styleSheets[0].cssRules 可以得到第一个样式表的规则列表）

直接内联样式添加到元素上，通过 HTMLElement.style 属性实现

比如 para.style.color="white";

        para.style.backgroundColor="black";

相关文章：

DOM API-JS通过文档对象树操作Doc和CSS

还记得我在之前的前端文章里面老是提及的 DOM 吗&#xff0c;当时只是简单介绍了它的组成以及作用&#xff0c;今天我们就来详细聊聊 Web浏览器 先来聊聊web浏览器&#xff0c;web浏览器是非常复杂的软件&#xff0c;有许多活动部件&#xff0c;许多部件并不能由开发者通过 J…...

编程日记 2025/9/11 22:39:11

实现了TCP的单向通信

1. 客户端代码：Client.java package com.xie.javase.net1;import java.io.*; import java.net.*;public class Client {public static void main(String[] args) {Socket socket = null;BufferedWriter bw = null;try {// 1. 获取本机IP地址对象InetAddress localHost = Inet…...

编程日记 2025/8/11 14:08:20

PostgreSQL中通过查询数据插入到表的几种方法( SELECT INTO和INSERT INTO ... SELECT)

使用 SELECT INTO 创建新表 在PostgreSQL中，SELECT INTO语法有两种主要用途：创建新表和将查询结果存储到变量中（在PL/pgSQL函数或存储过程中）。以下是详细介绍： 1. 创建新表并复制数据（类似SQL标准） SELECT * INTO new_table FROM existing_table WHERE condition;说…...

编程日记 2025/6/20 9:44:36

STM32项目实战：ADC采集

STM32F103C8T6的ADC配置。PB0对应的是ADC1的通道8。在标准库中&#xff0c;需要初始化ADC&#xff0c;设置通道&#xff0c;时钟&#xff0c;转换模式等。需要配置GPIOB的第0脚为模拟输入模式&#xff0c;然后配置ADC1的通道8&#xff0c;设置转换周期和触发方式。 接下来是I2C…...

编程日记 2025/9/7 15:52:58

CYT4BB Dual Bank - 安全启动

本节介绍TRAVEO™ T2G微控制器（MCU）的启动顺序。有关TRAVEO™ T2G微控制器的安全特性、不同的生命周期阶段以及“安全启动”序列的详细描述，请参阅 AN228680 -Secure system configuration in TRAVEO™ T2G family.   TRAVEO™ T2G微控制器（MCU）的启动序列（见图3）基于…...

编程日记 2025/9/11 22:39:05

Windows系统下MySQL 8.4.5压缩包安装详细教程

一、MySQL 8.4.5新特性概览 相较于旧版本&#xff0c;MySQL 8.4.5在性能与功能上实现了显著提升&#xff1a; 性能优化&#xff1a;官方测试显示&#xff0c;在高并发场景下&#xff0c;其读写性能较5.7版本提升近2倍&#xff0c;尤其在处理热点数据竞争问题时表现更为出色。…...

编程日记 2025/8/9 22:54:55

科技行业智能化升级经典案例—某芯片公司

案例标题 CSGHub赋能某芯片公司&#xff1a;国产AI芯片全链路管理平台的高效落地与生态共建 执行摘要 某芯片公司在开发内部模型管理平台时&#xff0c;选择AgenticOps体系中的CSGHub作为核心工具&#xff0c;通过其本地化部署能力、中文支持及RESTful API接口&#xff0c;解决…...

编程日记 2025/9/11 22:38:56

Python编程从入门到实践 PDF 高清版

各位程序员朋友们&#xff0c;还在为找不到合适的Python学习资料而烦恼吗&#xff1f;还在为晦涩难懂的编程书籍而头疼吗&#xff1f;今天&#xff0c;就给大家带来一份重磅福利——237完整版PDF&#xff0c; 我用网盘分享了「Python编程&#xff1a;从入门到实践__超清版.pdf…...

编程日记 2025/9/11 22:38:45

互联网大厂Java求职面试：Spring Cloud微服务架构与AI集成挑战

互联网大厂Java求职面试&#xff1a;Spring Cloud微服务架构与AI集成挑战 引言 在当前快速发展的互联网行业中&#xff0c;Java开发者在面对复杂的分布式系统设计时&#xff0c;需要掌握从微服务架构到AI模型集成的多种技能。本文通过一场模拟面试&#xff0c;深入探讨了基于…...

编程日记 2025/6/18 7:20:02

MySQL中索引最左前缀法则、索引失效情况、前缀索引、索引设计原则

最左前缀法则 联合索引中&#xff0c;最左前缀法则指的是查询从索引的最左列开始&#xff0c;并且不跳过索引中的列&#xff0c;如果跳跃某一列&#xff0c;索引将会部分失效&#xff08;后面的字段索引失效&#xff09;举例假设有一个联合索引包含三个字段按顺序&#xff1a;…...

编程日记 2025/6/10 2:20:03

⚡ Linux Debian 安装与配置 Docker

&#x1f427; Linux Debian 安装与配置 Docker &#x1f4e6; 1. Docker 简介 Docker 是一个开源的应用容器引擎&#xff0c;它允许开发者将应用及其依赖打包到一个标准化的镜像中&#xff0c;然后在任何地方快速部署和运行。 Docker 利用了 Linux 的 容器技术&#xff08;N…...

编程日记 2025/9/12 8:11:30

系统性能不达标，如何提升用户体验？

当系统性能不达标时&#xff0c;要想有效提升用户体验&#xff0c;必须从性能优化、前后端协同、用户感知改善、监控预警机制四个关键维度切入。其中&#xff0c;性能优化是最直接有效的策略&#xff0c;它通过代码优化、资源压缩、缓存机制、CDN加速等手段&#xff0c;显著提升…...

编程日记 2025/9/2 13:32:25

《深度掌控Linux：openEuler、CentOS、Debian、Ubuntu的全方位运维指南》

《深度掌控Linux&#xff1a;openEuler、CentOS、Debian、Ubuntu的全方位运维指南》 一、引言 在当今数字化的时代背景下&#xff0c;Linux操作系统凭借其卓越的性能、可靠性和开源的优势&#xff0c;在服务器、云计算、嵌入式系统等众多领域占据着举足轻重的地位。对于IT运维…...

编程日记 2025/8/31 8:29:47

Sentinel原理与SpringBoot整合实战

前言 随着微服务架构的广泛应用&#xff0c;服务和服务之间的稳定性变得越来越重要。在高并发场景下&#xff0c;如何保障服务的稳定性和可用性成为了一个关键问题。阿里巴巴开源的Sentinel作为一个面向分布式服务架构的流量控制组件&#xff0c;提供了从流量控制、熔断降级、…...

编程日记 2025/9/4 5:17:01

智能守护校园“舌尖安全“：AI视频分析赋能名厨亮灶新时代

引言&#xff1a; 在校园食品安全备受关注的今天&#xff0c;一套融合视频监控管理平台与AI视频分析盒子的智能解决方案正在全国多地学校食堂悄然落地&#xff0c;为传统的"名厨亮灶"工程注入科技新动能。这套系统不仅实现了后厨操作的"透明化"&#xff0…...

编程日记 2025/9/2 13:32:22

c++ 模板技巧——类型萃取

//traits.h/*制定输入 - 输出类型规则*/ template <class T> struct RtnType {typedef T return_type;//默认返回类型和输入类型一致 };template <class T> struct RtnType<T*> {//特化&#xff0c;当输入的是指针类型&#xff0c;返回类型规定为指针原型typ…...

编程日记 2025/7/5 3:29:52

初步尝试AI应用开发平台——Dify的本地部署和应用开发

随着大语言模型LLM和相关应用的流行&#xff0c;在本地部署并构建知识库&#xff0c;结合企业的行业经验或个人的知识积累进行定制化开发&#xff0c;是LLM的一个重点发展方向&#xff0c;在此方向上也涌现出了众多软件框架和工具集&#xff0c;Dify就是其中广受关注的一款&…...

编程日记 2025/9/2 13:32:19

卷积神经网络中的局部卷积：原理、对比与应用解析

【内容摘要】 本文聚焦卷积神经网络中的局部卷积&#xff0c;重点解析全连接、局部连接、全卷积与局部卷积四种连接方式的差异&#xff0c;结合人脸识别任务案例&#xff0c;阐述局部卷积的应用场景及优势&#xff0c;为理解卷积网络连接机制提供技术参考。 关键词&#xff1a…...

编程日记 2025/9/2 13:32:15

重拾童年，用 CodeBuddy 做自己的快乐创作者

某个炎炎的夏日午后&#xff0c;阳光透过稀疏的树叶洒落在地上&#xff0c;一道道光影斑驳陆离。那时候的我们&#xff0c;还只是三五个小朋友&#xff0c;蹲坐在村头的一棵老槐树下&#xff0c;手里握着并不属于自己的游戏掌机&#xff0c;轮流按动着手柄的按键&#xff0c;在…...

编程日记 2025/9/2 13:32:12

MyBatis-Plus的自带分页方法生成的SQL失败：The error occurred while setting parameters

1、error描述 数据库是postgres&#xff0c;Java使用mybatis-plus的分页功能&#xff0c;生成的分页SQL不能正常运行。 "msg": "nested exception is org.apache.ibatis.exceptions.PersistenceException: Error querying database. Cause: com.baomidou.my…...

编程日记 2025/8/9 3:01:57

Redis 的速度为什么这么快

这里的速度快&#xff0c;Redis 的速度快是与 MySQL 等数据库相比较的&#xff0c;与直接操作内存数据相比&#xff0c;Redis 还是略有逊色。 Redis 是一个单线程模型&#xff0c;为什么比其他的多线程程序还要快&#xff0c;原因有以几点&#xff1a; 1、访问的对象不同 Re…...

编程日记 2025/7/9 12:12:59

HarmonyOS实战：自定义时间选择器

前言 最近在日常鸿蒙开发过程中&#xff0c;经常会使用一些时间选择器&#xff0c;鸿蒙官方提供的时间选择器满足不了需求&#xff0c;所以自己动手自定义一些经常会使用到的时间选择器&#xff0c;希望能帮到你&#xff0c;建议点赞收藏&#xff01; 实现效果 需求分析 默认…...

编程日记 2025/9/8 7:52:48

Flannel后端为UDP模式下，分析数据包的发送方式——tun设备(三)

在分析 Kubernetes 环境中 Flannel UDP 模式的数据包转发时&#xff0c;我们提到 flannel.1 是一个 TUN 设备&#xff0c;它在数据包处理中起到了关键作用。 什么是 TUN 设备&#xff1f; TUN 设备&#xff08;Tunnel 设备&#xff09;是 Linux 系统中一种虚拟网络接口&#x…...

编程日记 2025/8/19 3:22:00

6：OpenCV—图像滤波

过滤图像和视频 图像滤波是一种邻域运算&#xff0c;其中输出图像中任何给定像素的值是通过对相应输入像素附近的像素值应用某种算法来确定的。该技术通常用于平滑、锐化和检测图像和视频的边缘。 让我们了解在讨论图像过滤技术、内核和卷积时使用的一些术语的含义。 内核 内…...

编程日记 2025/9/2 13:31:38

pytorch语法学习

启动 python main.py --config llve.yml --path_y test -i output...

编程日记 2025/9/10 21:42:23

5：OpenCV—图像亮度、对比度变换

1.更改图像和视频的亮度 更改亮度 更改图像的亮度是常用的点操作。在此操作中&#xff0c;图像中每个像素的值应增加/减少一个常数。要更改视频的亮度&#xff0c;应对视频中的每一帧执行相同的操作。 如果要增加图像的亮度&#xff0c;则必须为图像中的每个像素添加一些正常…...

编程日记 2025/9/9 18:26:19

Oracle 的V$ACTIVE_SESSION_HISTORY 视图

Oracle 的V$ACTIVE_SESSION_HISTORY 视图 V$ACTIVE_SESSION_HISTORY显示数据库中的 Sampled Session 活动。 它包含每秒拍摄一次的活动数据库会话的快照。如果数据库会话位于 CPU 上或正在等待不属于等待类的事件&#xff0c;则认为该会话处于活动状态。请参阅 view 以了解有…...

编程日记 2025/9/2 13:31:23

redis数据持久化和配置-13（配置 AOF：Appendfsync 策略）

配置 AOF&#xff1a;Appendfsync 策略 在 Redis 中配置仅附加文件 &#xff08;AOF&#xff09; 持久性机制涉及选择正确的 appendfsync 策略。此策略指示 Redis 将数据写入磁盘上的 AOF 文件的频率。策略的选择会显著影响数据安全和性能。了解这些策略之间的权衡对于确保 Re…...

编程日记 2025/9/2 20:35:17

【Python 算法零基础 4.排序 ② 冒泡排序】

目录 一、引言 二、算法思想 三、时间复杂度和空间复杂度 1.时间复杂度 2.空间复杂度 四、冒泡排序的优缺点 1.算法的优点 2.算法的缺点 五、实战练习 88. 合并两个有序数组 算法与思路 ① 合并数组 ② 冒泡排序 2148. 元素计数 算法与思路 ① 排序 ② 初始化计数器 ③ 遍历数组…...

编程日记 2025/9/2 13:31:19

Python：操作Excel设置行高和列宽

Python 操作 Excel：轻松设置行高与列宽 📊✨ 在处理 Excel 表格时，除了正确展示数据本身，合理设置行高与列宽也是提升可读性和专业度的关键因素。本文将带你了解如何使用 Python 的 openpyxl 库，优雅地控制 Excel 表格的排版布局，实现行高、列宽的灵活设置与自动适配！ …...

编程日记 2025/9/2 13:31:16