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

js的DOM一遍过

article 2026/4/27 8:54:30

一、获取元素

1.根据id获取

document.getElementById('id');

2.根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

获取某个元素(父元素)内部所有指定标签名的子元素。

element.getElementsByTagName('标签名');

3.根据类名返回元素对象集合

document.getElementsByClassName('类名');

4.获取特殊元素（body，html）

doucumnet.body  // 返回body元素对象
document.documentElement  // 返回html元素对象

5.选择器获取

//根据指定选择器返回第一个元素对象
document.querySelector('选择器');//根据指定选择器返回
document.querySelectorAll('选择器');

二、事件

1.常见的鼠标事件

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>事件三要素</title></head><body><button id="btn">点击一下</button><script>// 点击一个按钮，弹出对话框// 1.事件是有三部分：事件源、事件类型、事件处理程序//(1)事件源：事件被触发的对象。谁--按钮var btn = document.getElementById("btn");//(2)事件类型：如何触发，什么事件，比如鼠标点击还是鼠标经过，还是键盘按下//(3)事件处理程序，通过一个函数赋值的方式完成btn.onclick = function () {alert("点击了按钮");};</script></body>
</html>

三、DOM操作

①修改元素内容

innerText innerHTML 改变元素内容

element.innerHTML  = '新的内容';

②修改元素样式

element.style.color  = 'red';
element.style.fontSize  = '16px';

③修改元素属性

element.setAttribute('id',  'newId');
element.setAttribute('class',  'newClass');

④创建新元素

var newElement = document.createElement('div'); 
newElement.innerHTML  = '新元素的内容';
document.body.appendChild(newElement); //将新元素添加入body子节点

⑤删除元素

document.body.removeChild(newElement);

⑥绑定事件监听

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>按钮</button><input type="text" value="输入内容" /><script>// 1.获取元素var btn = document.querySelector("button");var input = document.querySelector("input");// 2.注册事件 处理程序btn.onclick = function () {// 表单里面的值，文字内容是通过 value来修改的input.value = "被点击了";};</script></body>
</html>

⑦样式属性操作

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style></head><body><div></div><script>var div = document.querySelector("div");div.onclick = function () {// div.style.backgroundColor = "green";// div.style里面的属性，采用驼峰命名法this.style.backgroundColor = "purple";this.style.width = "250px";};</script></body>
</html>

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}.change {background-color: purple;color: #fff;font-size: 25px;margin-top: 100px;}</style></head><body><div>文本</div><script>var div = document.querySelector("div");div.onclick = function () {// this.style.backgroundColor = "purple";// this.style.color = "#fff";// this.style.fontSize = "25px";// this.style.marginTop = "100px";// 让我们当前元素的类名改为了 changethis.className = "change";};</script></body>
</html>

⑧排他思想

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1.获取所有按钮元素var btns = document.getElementsByTagName("button");for (var i = 0; i < btns.length; i++) {btns[i].onclick = function () {// (1)我们先把所有的按钮背景颜色去掉for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = "";}// (2)然后才让当前的元素背景颜色为 pinkthis.style.backgroundColor = "pink";};}</script></body>
</html>

⑨自定义属性操作

获取属性值

（1）element.属性获取内置属性值（元素本身自带的属性）

（2）element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

移除属性

（1）element.removeAttribute(‘属性’);

四、节点操作

①父子节点的获取

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div class="demo"><div class="box"><div class="erweima">x</div></div></div><script>// 1. 父节点 parentNodevar erweima = document.querySelector(".erweima");// var box = document.querySelector('.box');// 得到的是离元素最近的父级节点,如果找不到父节点就返回为 nullconsole.log(erweima.parentNode);</script></body>
</html>

子节点：

1. parentNode.childNode   //标准
2. parentNode.children	  //非标准

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。

案例

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><ol><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ol><div class="demo"><div class="box"><div class="erweima">x</div></div></div><script>// DOM 提供的方法 (API) 获取var ul = document.querySelector("ul");// var lis = ul.querySelect('li');// 1.子节点 childNodes 所有的子节点，包含：元素节点，文本节点等等console.log(ul.childNodes);// 1.children 获取所有的子节点元素 也是我们实际开发常用的console.log(ul.children);</script></body>
</html>

3. parentNode.firstChild
4. parentNode.lastChild
5. parentNode.firstElementChild
6. parentNode.lastElementChild

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
firstElementChild 返回第一个子元素节点，找不到则返回null。
lastElementChild 返回最后一个子元素节点，找不到则返回null。

注意：firstElementChild和lastElementChild，这两个方法有兼容性问题，IE9 以上才支持。

剩下的看原文吧
原文链接：https://blog.csdn.net/m0_48964052/article/details/125962081

js的DOM一遍过

一、获取元素 1.根据id获取 document.getElementById(id);2.根据标签名获取使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。 document.getElementsByTagName(标签名);获取某个元素(父元素)内部所有指定标签名的子元素。 element.getElementsByTag…...

编程日记 2026/4/17 4:09:42

文章目录 Machine LearningTrainingStep 1.Contract Function with Unknown ParametersStep 2.Define Loss from Training DataStep 3.Optimization Linear ModelPiecewise Linear CurveBeyond Piecewise Liner?FunctionLossOptimization Model Deformation Machine Learning …...

编程日记 2026/4/11 21:20:57

Excel 笔记

实际问题记录 VBA脚本实现特殊的行转列已知：位于同一Excel工作簿文件中的两个工作表：Sheet1、Sheet2。问题：现要将Sheet2中的每一行，按Sheet1中的样子进行转置： Sheet2中每一行的黄色单元格，为列头。…...

编程日记 2026/4/16 8:54:29

基于 GEE 利用插值方法填补缺失影像

目录 1 完整代码 2 运行结果利用GEE合成NDVI时，如果研究区较大，一个月的影像覆盖不了整个研究区，就会有缺失的地方，还有就是去云之后，有云量的地区变成空值。所以今天来用一种插值的方法来填补缺失的影像&#xf…...

编程日记 2026/4/11 23:02:38

如何设置爬虫的IP代理？

在爬虫开发中，设置IP代理是避免被目标网站封禁、提升爬取效率和保护隐私的重要手段。以下是设置爬虫IP代理的详细方法和注意事项： 一、获取代理IP 免费代理IP： 可以通过一些免费的代理IP网站获取代理IP，但这些IP的稳定性和速度通…...

编程日记 2026/4/3 13:54:25

如何在浏览器中搭建开源Web操作系统Puter的本地与远程环境

文章目录前言1.关于Puter2.本地部署Puter3.Puter简单使用4. 安装内网穿透5.配置puter公网地址6. 配置固定公网地址前言嘿，小伙伴们！是不是每次开机都要像打地鼠一样不停地点击各种网盘和应用程序的登录按钮，感觉超级麻烦？更让…...

编程日记 2026/4/27 2:38:51

使用EVE-NG-锐捷实现单臂路由

一、基础知识 1.三层vlan vlan在三层环境中通常用作网关vlan配上ip网关内部接口ip 2.vlan创建步骤创建vlan将接口划分到不同的vlan给vlan配置ip地址二、项目案例 1、项目拓扑 2、项目实现 PC1配置配置PC1IP地址为192.168.1.10/24网关地址为192.168.1.1 ip 192.168.1…...

编程日记 2026/4/11 21:18:45

二、通义灵码插件保姆级教学-IDEA(使用篇)

一、IntelliJ IDEA 中使用指南 1.1、代码解释选择需要解释的代码 —> 右键 —> 通义灵码 —> 解释代码解释代码很详细，感觉很强大有木有，关键还会生成流程图，对程序员理解业务非常有帮忙，基本能做到哪里不懂点哪里。…...

编程日记 2026/4/11 21:19:10

水下 SLAM 定位模组的设计与实现

标题:水下 SLAM 定位模组的设计与实现内容:1.摘要摘要：本文介绍了水下 SLAM 定位模组的设计与实现。首先，对水下定位技术的背景和需求进行了分析。然后，详细阐述了模组的设计思路和关键技术，包括传感器选型、数据融合算法等。接…...

编程日记 2026/4/3 9:35:43

HAL库外设宝典：基于CubeMX的STM32开发手册（持续更新）

目录前言 GPIO（通用输入输出引脚） 推挽输出模式浮空输入和上拉输入模式 GPIO其他模式以及内部电路原理输出驱动器输入驱动器中断外部中断（EXTI） 深入中断（内部机制及原理） 外部中断/事件控…...

编程日记 2026/4/11 21:18:54

HarmonyOS 5.0应用开发——ContentSlot的使用

【高心星出品】文章目录 ContentSlot的使用使用方法案例运行结果完整代码 ContentSlot的使用用于渲染并管理Native层使用C-API创建的组件同时也支持ArkTS创建的NodeContent对象。支持混合模式开发，当容器是ArkTS组件，子组件在Native侧创建时&#…...

编程日记 2026/4/16 9:10:02

RabbitMQ的死信队列的产生与处理

死信队列（Dead Letter Queue, DLQ） 1. 死信（Dead Letter）是怎么产生的？ 在 RabbitMQ 中，消息会变成死信（Dead Letter）的常见情况有以下几种： 消息被拒绝（R…...

编程日记 2026/3/6 13:34:35

[AI]Mac本地部署Deepseek R1模型 — — 保姆级教程

[AI]Mac本地部署DeepSeek R1模型 — — 保姆级教程 DeepSeek R1是中国AI初创公司深度求索（DeepSeek）推出大模型DeepSeek-R1。作为一款开源模型，R1在数学、代码、自然语言推理等任务上的性能能够比肩OpenAI o1模型正式版，并采用MI…...

编程日记 2026/4/11 21:18:52

群晖NAS如何通过WebDAV和内网穿透实现Joplin笔记远程同步

文章目录前言1. 检查群晖Webdav 服务2. 本地局域网IP同步测试3. 群晖安装Cpolar工具4. 创建Webdav公网地址5. Joplin连接WebDav6. 固定Webdav公网地址7. 公网环境连接测试前言在数字化浪潮的推动下，笔记应用已成为我们记录生活、整理思绪的重要工具。Joplin&…...

编程日记 2026/4/11 21:19:00

CSS3+动画

浏览器内核以及其前缀 css标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确的情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所有会加厂商前缀加以区分。如果某个属性…...

编程日记 2026/4/26 20:45:07

C++ list介绍

文章目录 1. list简介2. list的实现框架2.1 链表结点2.2 链表迭代器2.3 链表 3. list迭代器及反向迭代器设计3.1 list迭代器3.2 list反向迭代器3.3 list迭代器失效 4. list与vector比较 1. list简介 list，即链表。链表的种类有很多，是否带头结点&#…...

编程日记 2026/4/24 9:51:59

Java - 在Linux系统上使用OpenCV和Tesseract

系统环境确保Linux系统安装了cmake构建工具，以及java和ant（这两者如果没有，可能会影响到后面编译opencv生成.so和.jar文件）。 sudo apt-get update sudo apt-get install build-essential sudo apt install cmake build-essen…...

编程日记 2026/4/11 21:19:01

自有服务与软件包

—— 小峰编程目录编辑一、自有服务概述二、systemctl管理服务命令 1、显示服务 2、查看启动和停止服务 3、服务持久化三、常用自有服务（ntp,firewalld,crond) 1、ntp时间同步服务 1）NTP同步服务器原理 2）到哪里去找NPT服务…...

编程日记 2026/4/19 21:53:55

Python 鼠标轨迹 - 防止游戏检测

一.简介鼠标轨迹算法是一种模拟人类鼠标操作的程序，它能够模拟出自然而真实的鼠标移动路径。鼠标轨迹算法的底层实现采用C/C语言，原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。鼠标轨迹算法具有以下优势： 模拟…...

编程日记 2026/4/11 21:21:35

BootstrapBlazor Table组件使用的注入数据服务实现类：使用 EF Core

一、使用示例：UsersManager.razor 注：TLog 相关内容参见 .NET 9.0 的 Blazor Web App 项目、Bootstrap Blazor 组件库、自定义日志 TLog 使用备忘-CSDN博客 page "/Log/TLogManager"<Table TItem"TLogEntity" DataService&qu…...

编程日记 2026/4/2 14:06:08

chrome-mojo C++ Bindings API

概述 Mojo C 绑定 API 利用C 系统 API提供一组更自然的原语，用于通过 Mojo 消息管道进行通信。结合从Mojom IDL 和绑定生成器生成的代码，用户可以轻松地跨任意进程内和进程间边界连接接口客户端和实现。本文档通过示例代码片段提供了绑定 API 用法的详…...

编程日记 2026/4/11 21:22:39

git如何把多个commit合成一个

在 Git 中，如果你想把多个提交（commit）合并成一个，可以使用 git rebase 或 git reset 来完成。下面是两种常用方法： 方法一：使用 git rebase（推荐） git rebase 是合并多个提交为一…...

编程日记 2026/2/21 16:30:04

java: framework from BLL、DAL、IDAL、MODEL、Factory using oracle

oracel 21c sql: -- 创建 School 表 CREATE TABLE School (SchoolId CHAR(5) NOT NULL,SchoolName NVARCHAR2(500) NOT NULL,SchoolTelNo VARCHAR2(8) NULL,PRIMARY KEY (SchoolId) );CREATE OR REPLACE PROCEDURE addschool(p_school_id IN CHAR,p_school_name IN NVARCHAR2,p…...

编程日记 2026/4/11 21:19:02