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

JavaScript DOM 节点操作

news 来源：原创 2025/9/8 0:11:24

一、DOM 节点

节点类型（Node Types）

二、查找节点

1.查找父节点

1. parentNode

2. parentElement

2.查找子节点

1. childNodes

2. children

3. firstChild / lastChild

4. firstElementChild / lastElementChild

3.查找兄弟节点

1. previousSibling / nextSibling

2. previousElementSibling / nextElementSibling

4.查找特定祖先节点

closest(selector)

5.检查节点关系

contains(node)

6.综合示例

HTML 结构：

JavaScript 操作：

7.注意事项

三、增加节点

1. 创建节点

2. 插入节点

3. 插入 HTML 字符串

四、删除节点

1. 传统方法

2. 现代方法（ES6+）

五、替换节点

1. replaceChild()

2. replaceWith()（ES6+）

六、克隆节点

方法语法

示例代码

克隆注意事项

七、最佳实践与性能优化

示例：

一、DOM 节点

DOM（Document Object Model）节点 是 HTML 或 XML 文档中每个独立单元的抽象表示。整个文档被建模为一个树形结构（DOM 树），其中每个节点对应文档的一部分（如元素、属性、文本等）。节点是 DOM 操作的基本单位，通过 JavaScript 可以动态访问和修改节点，实现页面交互。

节点类型（Node Types）

DOM 规范定义了多种节点类型，每个类型通过 nodeType 属性标识（值为整数常量）：

节点类型	nodeType 值	说明
元素节点	`1` (Node.ELEMENT_NODE)	表示 HTML 标签（如 `<div>`, `<p>`）
属性节点	`2` (Node.ATTRIBUTE_NODE)	表示元素的属性（如 `id="content"`，已弃用，推荐用 `element.attributes`）
文本节点	`3` (Node.TEXT_NODE)	表示元素内的文本内容（包括空格和换行）
注释节点	`8` (Node.COMMENT_NODE)	表示 HTML 注释（如 `<!-- 注释 -->`）
文档节点	`9` (Node.DOCUMENT_NODE)	表示整个文档（根节点，如 `document`）
文档片段节点	`11` (Node.DOCUMENT_FRAGMENT_NODE)	轻量级容器，用于批量操作节点（如 `document.createDocumentFragment()`）

二、查找节点

1.查找父节点

1. `parentNode`

说明：返回任何类型的父节点（元素、文档、文档片段等）。

示例：

const child = document.querySelector('.child');
const parent = child.parentNode; // 父元素节点

2. `parentElement`

说明：仅返回元素类型的父节点。

示例：

const parent = child.parentElement; // 父元素节点（非元素返回 null）

2.查找子节点

1. `childNodes`

说明：返回所有子节点的动态集合（包括元素、文本、注释等）。

示例：

const children = parent.childNodes; // NodeList

2. `children`

说明：返回所有元素子节点的动态集合（HTMLCollection）。

示例：

const elements = parent.children; // 仅元素节点

3. `firstChild` / `lastChild`

说明：返回第一个/最后一个子节点（包括非元素节点）。

示例：

const first = parent.firstChild; // 可能是文本节点
const last = parent.lastChild;

4. `firstElementChild` / `lastElementChild`

说明：返回第一个/最后一个元素子节点。

示例：

const firstElement = parent.firstElementChild; // 第一个元素子节点
const lastElement = parent.lastElementChild;

3.查找兄弟节点

1. `previousSibling` / `nextSibling`

说明：返回前一个/后一个兄弟节点（包括非元素节点）。

示例：

const prevSibling = element.previousSibling; // 可能是文本节点
const nextSibling = element.nextSibling;

2. `previousElementSibling` / `nextElementSibling`

说明：返回前一个/后一个元素兄弟节点。

示例：

const prevElement = element.previousElementSibling; // 前一个元素节点
const nextElement = element.nextElementSibling;

4.查找特定祖先节点

`closest(selector)`

说明：返回匹配选择器的最近祖先元素。

示例：

const ancestor = element.closest('.container'); // 最近的 .container 祖先

5.检查节点关系

`contains(node)`

说明：检查当前节点是否包含指定后代节点。

示例：

const isChild = parent.contains(child); // true/false

6.综合示例

HTML 结构：

<div id="container"><!-- 注释 --><p class="text">段落1</p>文本节点<p class="text">段落2</p>
</div>

JavaScript 操作：

const container = document.getElementById('container');
const secondP = document.querySelectorAll('.text')[1];// 查找父节点
console.log(secondP.parentNode.id); // "container"// 查找子节点
console.log(container.children.length); // 2（两个 p 元素）
console.log(container.firstElementChild.textContent); // "段落1"// 查找兄弟节点
const firstP = secondP.previousElementSibling;
console.log(firstP.textContent); // "段落1"// 检查包含关系
console.log(container.contains(secondP)); // true// 查找特定祖先
const closestDiv = secondP.closest('div');
console.log(closestDiv.id); // "container"

7.注意事项

动态集合与静态集合：
- childNodes 和 children 是动态集合（HTMLCollection/NodeList），会随 DOM 变化自动更新。
- querySelectorAll 返回静态 NodeList，不会自动更新。
空值处理：
- 若节点不存在（如 parentNode 为 null），使用可选链操作符避免报错：
```
const parentId = element.parentNode?.id; // 安全访问
```
节点类型判断：
- 非元素节点（如文本、注释）无法使用 children 或 firstElementChild 等方法。
兼容性：
- closest 和 previousElementSibling 等方法在现代浏览器中支持良好，但需注意旧版浏览器兼容性（如 IE）。

三、增加节点

1. 创建节点

// 创建元素节点
const newDiv = document.createElement("div");// 创建文本节点
const textNode = document.createTextNode("Hello World");

2. 插入节点

方法	说明	示例
`appendChild()`	在父元素末尾插入子节点	`parent.appendChild(newDiv)`
`insertBefore()`	在指定子节点前插入新节点	`parent.insertBefore(newDiv, referenceNode)`
现代方法	`append()`、`prepend()`、`before()`、`after()`（ES6+）	`parent.append("追加内容")`

示例：

// 插入到父元素末尾
const parent = document.getElementById("parent");
parent.appendChild(newDiv);// 插入到某个子节点前
const referenceNode = document.querySelector(".reference");
parent.insertBefore(newDiv, referenceNode);// 使用 append 插入多个元素
parent.append(newDiv, "文本节点", document.createElement("span"));

3. 插入 HTML 字符串

使用 insertAdjacentHTML 快速插入：

// 语法：insertAdjacentHTML(position, html)
const container = document.querySelector(".container");
container.insertAdjacentHTML("beforeend", "<div>新内容</div>");

位置参数：

beforebegin：元素之前
afterbegin：元素内部开头
beforeend：元素内部末尾
afterend：元素之后

四、删除节点

1. 传统方法

// 父元素删除子节点
const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.removeChild(child); // 需先获取父元素

2. 现代方法（ES6+）

// 直接删除自身
const element = document.querySelector(".to-remove");
element.remove(); // 无需父元素参与

注意：

删除后的节点仍存在于内存中，可重新插入 DOM。
若需彻底释放内存，将引用设为 null：element = null。

五、替换节点

1. `replaceChild()`

const oldNode = document.querySelector(".old");
const newNode = document.createElement("div");
parent.replaceChild(newNode, oldNode); // 用 newNode 替换 oldNode

2. `replaceWith()`（ES6+）

const oldElement = document.querySelector(".old");
const newElement = document.createElement("div");
oldElement.replaceWith(newElement); // 直接替换自身

六、克隆节点

通过 cloneNode() 方法可以复制节点，常用于动态添加相似结构的元素。

方法语法

const clonedNode = originalNode.cloneNode(deep);

deep（可选，默认 false）：
- true：深度克隆，复制节点及其所有子节点。
- false：浅克隆，仅复制节点本身，不包含子节点。

示例代码

const list = document.getElementById('list');// 浅克隆：仅复制 <ul> 节点，不含子节点 <li>
const shallowClone = list.cloneNode(false); // 深克隆：复制 <ul> 及其所有子节点 <li>
const deepClone = list.cloneNode(true); document.body.appendChild(deepClone); // 页面添加克隆的列表

克隆注意事项

ID 重复：克隆的元素的 id 属性与原元素相同，需手动修改以避免冲突。
事件监听器：cloneNode() 不会复制通过 addEventListener 绑定的事件。
表单值：部分表单元素（如 <input>）的值可能被克隆，具体行为因浏览器而异。

七、最佳实践与性能优化

批量操作减少重绘
使用 DocumentFragment 进行多次操作后一次性插入：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const li = document.createElement("li");li.textContent = `Item ${i}`;fragment.appendChild(li);
}
document.getElementById("list").appendChild(fragment);

谨慎操作 DOM
- 避免频繁操作 DOM（如循环内直接插入节点）。
- 必要时先隐藏元素（display: none），操作完成后再显示。

示例：

<div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"></ul></div>
</div>
<script>// 1. 重构  let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]const ul = document.querySelector('.box-bd ul')// 1. 根据数据的个数，创建 对应的小lifor (let i = 0; i < data.length; i++) {// 2. 创建新的小liconst li = document.createElement('li')// 把内容给lili.innerHTML = `<a href="#"><img src=${data[i].src} alt=""><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a>`// 3. ul追加小liul.appendChild(li)}
</script>

JavaScript DOM 节点操作

目录一、DOM 节点节点类型（Node Types） 二、查找节点 1.查找父节点 1. parentNode 2. parentElement 2.查找子节点 1. childNodes 2. children 3. firstChild / lastChild 4. firstElementChild / lastElementChild 3.查找兄弟节点 1. pre…...

编程日记 2025/9/8 0:11:24

JDBC常用的接口

一、什么是JDBC JDBC是Java语言连接数据库的接口规范。二、JDBC的体系 1、Java官方提供一个操作数据库的抽象接口抽象接口有很多的接口和抽象类。例如：Driver、Connection、Statement。 2、各个数据库厂商提供各自的Java实现类需要各自实现具体的细节。例如&am…...

编程日记 2025/9/8 18:04:04

【DLI】Generative AI with Diffusion Models通关秘籍

Generative AI with Diffusion Models，加载时间在20分钟左右，耐心等待。 6.2TODO 这里是在设置扩散模型的参数，代码里的FIXME部分需要根据上下文进行替换。以下是各个FIXME的替换说明： 1.a_bar 是 a 的累积乘积，在 …...

编程日记 2025/9/8 5:36:38

TP6图片操作 Image::open 调用-＞save(）方法时候报错Type is not supported

错误提示： { "code": 0, "msg": "Type is not supported", "data": { "code": 0, "line": 50, "file": "/www/wwwroot/ytems/vendor/topthink/framework/src/think…...

编程日记 2025/9/4 9:23:04

11_常用函数

文章目录一、概述二、字符函数2.1、获取字符串所占字节数2.2、获取字符个数2.3、拼接字符串2.4、大小写转换2.5、获取子串2.6、获取子串第一次出现的索引2.7、去除字符串前后子字符串2.7.1、去掉左侧空格2.7.2、去掉右侧空格 2.8、左右填充2.9、字符串替换三、数学函数3.1、四…...

编程日记 2025/9/3 18:15:03

《inZOI（云族裔）》50+MOD整合包

载具 RebelCore - 年龄和时间 mod启动器优化补丁去除雾气坦克模型菜单前置跳过启动更好性能等共计50MOD整合在游戏的世界里，追求更丰富、更优质的体验是玩家们永恒的主题。RebelCore 这款游戏通过精心打造的 50MOD 整合，为玩家带来了前所未有的…...

编程日记 2025/9/6 22:27:30

【技术报告】GPT-4o 原生图像生成的应用与分析

【技术报告】GPT-4o 原生图像生成的应用与分析 1. GPT-4o 原生图像生成简介1.1 文本渲染能力1.2 多轮对话迭代1.3 指令遵循能力1.4 上下文学习能力1.5 跨模态知识调用1.6 逼真画质与多元风格1.7 局限性与安全性 2. GPT-4o 技术报告2.1 引言2.2 安全挑战、评估与缓解措施2.2.1 安…...

编程日记 2025/9/3 9:07:36

拼多多延迟发货解答2

三、延迟发货处理标准延迟发货极大地影响了消费者的购物体验，平台对延迟发货行为也有相应的处理标准，因此各位商家一定不要以为延迟发货是小事儿。延迟发货处理标准具体可查看《拼多多发货规则》第3条。商家发生延迟发货的，拼多多平台有权…...

编程日记 2025/9/6 5:39:02

RTOS基础 -- NXP M4小核的RPMsg-lite与端点机制回顾

一、RPMsg-lite与端点机制回顾在RPMsg协议框架中： Endpoint（端点） 是一个逻辑通信端口，由本地地址（local addr）、远程地址（remote addr）和回调函数组成。每个消息都会发送到特定的…...

编程日记 2025/9/4 10:41:23

25.4.3学习总结【Java】

又是一道错题： 1. 班级活动https://www.lanqiao.cn/problems/17153/learning/?page1&first_category_id1&sortdifficulty&asc1&second_category_id3 问题描述小明的老师准备组织一次班级活动。班上一共有 n 名 (n 为偶数) 同学，老师…...

编程日记 2025/9/6 21:17:22

市场交易策略优化与波动管理

市场交易策略优化与波动管理在市场交易中，策略的优化和波动的管理至关重要。市场价格的变化受多种因素影响，交易者需要根据市场环境动态调整策略，以提高交易的稳定性，并有效规避市场风险。一、市场交易策略的优化方法趋势交易策…...

编程日记 2025/9/6 14:57:17

TypeScript 元数据操作 API 及示例

TypeScript 元数据操作 API 及示例 1. 配置环境安装依赖 npm install reflect-metadatatsconfig.json 配置 {"compilerOptions": {"experimentalDecorators": true,"emitDecoratorMetadata": true,"target": "ES6"} }2…...

编程日记 2025/9/5 4:04:22

蓝桥杯刷题记录【并查集001】（2024）

主要内容：并查集并查集并查集的题目感觉大部分都是模板题，上板子！！ class UnionFind:def __init__(self, n):self.pa list(range(n))self.size [1]*n self.cnt ndef find(self, x):if self.pa[x] ! x:self.pa[x] self.fi…...

编程日记 2025/9/8 11:10:44

搜广推校招面经六十六

高德推荐算法一、介绍Transformer中的位置编码（Positional Encoding） 在 Transformer 结构中，由于模型没有内置的序列信息（不像 RNN 那样有时间步的顺序依赖），需要通过**位置编码（Positional…...

编程日记 2025/9/5 7:48:29

Java高频面试题2：集合框架

一、集合框架概述 1. 常见的集合框架有哪些？ Collection：存储单个元素的集合。 List（有序、可重复）：ArrayList（动态数组）、LinkedList（双向链表）。Set（无序…...

编程日记 2025/9/4 13:34:55

06-公寓租赁项目-后台管理-公寓管理篇

尚庭公寓项目/公寓管理模块 https://www.yuque.com/pkqzyh/qg2yge/5ba67653b51379d18df61b9c14c3e946 一、属性管理属性管理页面包含公寓和房间各种可选的属性信息，其中包括房间的可选支付方式、房间的可选租期、房间的配套、公寓的配套等等。其所需接口如下 1.1…...

编程日记 2025/9/6 1:29:20

目前主流OCR/语义理解/ASR

OCR 基于多篇专业评测的结果，以下是目前免费开源OCR工具的推荐排名（侧重中文场景）： 1. RapidOCR 优势：基于PaddleOCR优化，在印刷中文、自然场景文字识别中综合评分第一，支持180度旋转和低对比…...

编程日记 2025/8/30 17:48:21

Selenium 元素定位方法详解

Selenium 提供了多种元素定位方式，掌握这些方法是进行 Web 自动化测试的基础。以下是主要的元素定位方法及其使用示例： 1. 基本定位方法 1.1 通过 ID 定位 element driver.find_element(By.ID, "element_id") 1.2 通过 Name 定位 element …...

编程日记 2025/9/3 1:33:36

fastGPT—前端开发获取api密钥调用机器人对话接口（HTML实现）

官网文档链接：OpenAPI 介绍 | FastGPT 首先按照文档说明创建api密钥 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…...

编程日记 2025/9/4 19:13:07

c语言数据结构--------拓扑排序和逆拓扑排序(Kahn算法和DFS算法实现)

#include <stdio.h> #include <string.h> #include <stdbool.h> #include <stdlib.h>//使用卡恩算法(Kahn)和深度优先算法(DFS)实现//拓扑排序和逆拓扑排序//拓扑排序和逆拓扑排序顶点顺序相反//图，邻接矩阵存储 #define MaxVertexNum 100 …...

编程日记 2025/8/29 2:03:48

日期类的实现

本文运用c类和对象中的构造函数， 析构函数 ，拷贝构造函数 ， 赋值运算符重载等为大家模拟实现日期类的操作 #define _CRT_SECURE_NO_WARNINGS 1 #include"date.h" void Date:: showinfo() {cout << _year << "年&…...

编程日记 2025/9/3 7:08:14

3dgs通俗讲解

3d gaussian splatting：基于splatting和机器学习的三维重建方法。特点： 无深度学习简单的机器学习大量的CG知识复杂的线性代数对GPU的高性能编程一、什么是splatting 1、选择“雪球”； 为什么使用核（雪球） 各向…...

编程日记 2025/9/5 16:30:05

源码分析之Leaflet比例尺控件Control.Scale实现原理

概述 Control.Scale 是一个用于显示地图比例尺的控件，是 Leaflet 中实现比例尺控件的核心逻辑，用于在地图上动态显示公制（米/千米）和英制（英尺/英里）的比例尺。源码分析源码实现 Control.Scale的源码…...

编程日记 2025/9/6 19:28:47

【无标题 langsmith

【GPT入门】第32课 langsmith介绍与实战 1.lang smith作用2.lang smith配置方法3. 上手第一个lang smith3.1 可运行代码3.2 lang smith 官网，个人项目下 1.lang smith作用 LangSmith是由LangChain开发的一个平台，主要用于构建生产级LLM应用程序&#xf…...

编程日记 2025/8/29 2:03:38

智能建造新范式：装配式建筑 4.0 的数字化进阶

在全球数字化与可持续发展的浪潮中，建筑业正经历着第四次工业革命的深刻变革。装配式建筑4.0的出现，标志着建筑行业从传统的“钢筋水泥时代”迈向“数据驱动时代”，其核心在于通过技术融合重构建筑全生命周期的生产方式，实现从设计…...

编程日记 2025/9/2 20:42:00

从标准输入中读取所有内容sys.stdin.read()

sys.stdin.read().strip() 用于从标准输入中读取所有内容并去除首尾的空白字符。 1. sys.stdin.read() 作用：从标准输入流中读取所有内容，直到遇到文件结束符（EOF）。在命令行中，EOF 可以通过 CtrlD（Linux…...

编程日记 2025/9/4 1:26:28

网络：华为数通HCIA学习：静态路由基础

文章目录前言静态路由基础静态路由应用场景静态路由配置静态路由在串行网络的配置静态路由在以太网中的配置负载分担配置验证路由备份（浮动静态路由）配置验证缺省路由配置验证总结华为HCIA 基础实验－静态路由 & eNSP静态路由基础…...

编程日记 2025/9/3 0:42:57

DAY 35 leetcode 202--哈希表.快乐数

题号202 编写一个算法来判断一个数 n 是不是快乐数。「快乐数」定义为： 对于一个正整数，每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1，也可能是无限循环但始终变不到 1。如果这个过程结果为 1&a…...

编程日记 2025/9/6 2:34:35

Linux Command nmap 网络扫描

tags: 网络文章目录简介原理端口状态选项基本扫描发现扫描禁用DNS名称解析无ping扫描端口扫描版本检测防火墙规避技术故障排除和调试NMAP 脚本简介 Nmap（“ Network Mapper ”）是一个用于网络探索和安全审计的开源工具。它旨在快速扫描大型网络&…...

编程日记 2025/9/4 6:27:32

根据源码分析vue中nextTick的实现原理

根据源码分析vue中nextTick的实现原理一. ‌核心变量定义‌‌二. 异步策略选择（降级处理）‌1. 微任务优先‌2. 降级到 MutationObserver‌3. 降级到宏任务‌ 三、回调执行逻辑‌四、 ‌nextTick 函数实现‌五、 ‌与 Vue 更新流程的结合‌六‌、关键设计…...

编程日记 2025/9/8 7:18:22

Linux内核TCP/IP协议栈中的设计模式：从面向对象到系统级软件的跨界实践

引言设计模式（Design Patterns）自GoF（Gang of Four）在1994年提出以来，已成为软件工程领域的核心概念。尽管其经典定义基于面向对象编程（OOP），但设计模式的本质是解决复杂问题的经验总结，而非局限于特定编程范式。本文以Linux内核的TCP/IP协议栈为例，探讨设计模式在…...

编程日记 2025/9/7 8:14:09

风云可测：华为AI天气大模型将暴雨预测误差缩至3公里内

华为云正式发布全球首个气象专用人工智能大模型"盘古气象"，实现台风路径24小时预测误差<30公里、暴雨落区72小时精度91%，较传统数值预报效率提升10000倍。本文基于对西北太平洋10个台风回溯测试、全国2360个气象站验证数据，解析…...

编程日记 2025/8/31 16:02:22

DeepSeek-R1 面试题汇总

Deepseek-r1 面试宝典原文地址：https://articles.zsxq.com/id_91kirfu15qxw.html DeepSeek-R1 面试题汇总 DeepSeek-R1 面试题汇总 GRPO（Group Relative Policy Optimization）常见面试题汇总篇 DeepSeek-R1 DeepSeek-R1-Zero 常见面试题汇总…...

编程日记 2025/9/4 3:57:54

ASM1042A型CANFD芯片通信可靠性研究

摘要本文旨在深入探讨ASM1042A型CAN-FD芯片在多节点通信中的可靠性表现。通过对芯片的电气特性、测试环境、多节点通信测试结果等多方面进行分析，结合实验数据与理论研究，全面评估其在复杂通信场景下的性能与可靠性。研究结果表明，ASM1042A…...

编程日记 2025/9/3 9:32:35

Java8 到 Java21 系列之 Stream API：数据处理的新方式（Java 8）

Java 8 到 Java 21 系列之 Stream API：数据处理的新方式（Java 8） 系列目录 Java8 到 Java21 系列之 Lambda 表达式：函数式编程的开端（Java 8）Java 8 到 Java 21 系列之 Stream API：数据处理的…...

编程日记 2025/9/7 10:47:34

【每日一个知识点】分布式数据湖与实时计算

在现代数据架构中，分布式数据湖（Distributed Data Lake） 结合实时计算（Real-time Computing） 已成为大数据处理的核心模式。数据湖用于存储海量的结构化和非结构化数据，而实时计算则确保数据能够被迅速处理…...

编程日记 2025/8/29 2:03:10

使用parametrize之前： def add(x,y):return xy class TestAddFunction(object):def test01(self):resadd(2,4)assert 6resdef test02(self):resadd(4,6)assert 10resparametrize参数化之后： import pytest def add(x,y):return xydata[(10,20,30),(200…...

编程日记 2025/9/1 16:54:27

呼叫中心系统压力测试文档

前期准备用户需要准备两台配置相同的服务器，A服务器和B服务器。我们在这两台服务器上部署相同授权的程序。配置流程 1. 创建话术 A服务器和B服务器都需要创建压力测试放音的话术，用于放音。按图操作： 2. 线路和线路组配置 A服务器&am…...

编程日记 2025/9/7 5:54:52

从0开始的构建的天气预报小时钟（基于STM32F407ZGT6，ESP8266 + SSD1309）——第1章简单的介绍一下ESP8266和他的编程指令

目录 ESP8266编程指令前导——三种工作模式 ESP8266编程指令工作确认指令（用于非穿透模式下） 设置工作模式：ATCWMODEX 两个重要的复位硬复位ATRESTORE 软复位ATRST 加入Wifi ATCWJAP 开始一次TCP通信进入和退出穿透模式进入 ES…...

编程日记 2025/9/2 20:36:10

Cadence Integrity 3D-IC的解密

Early System-Level Analysis and Signoff Flow 请看下期发布...

编程日记 2025/8/29 2:03:03

清晰易懂的 Flutter 开发环境搭建教程

Flutter 是 Google 推出的跨平台应用开发框架，支持 iOS/Android/Web/桌面应用开发。本教程将手把手教你完成 Windows/macOS/Linux 环境下的 Flutter 安装与配置，从零到运行第一个应用，全程避坑指南！ 一、安装 Flutter SDK 1. 下载…...

编程日记 2025/9/3 17:16:30

NO.63十六届蓝桥杯备战|基础算法-⼆分答案|木材加工|砍树|跳石头(C++)

⼆分答案可以处理⼤部分「最⼤值最⼩」以及「最⼩值最⼤」的问题。如果「解空间」在从⼩到⼤的「变化」过程中，「判断」答案的结果出现「⼆段性」，此时我们就可以「⼆分」这个「解空间」，通过「判断」，找出最优解。这个「⼆分答案…...

编程日记 2025/9/5 20:06:05

Python星球日记 - 第1天：欢迎来到Python星球

🌟引言： 上一篇：Python星球日记专栏介绍（持续更新ing） 名人说：莫听穿林打叶声，何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》创作者：Code_流苏(CSDN)（一个喜欢古诗…...

编程日记 2025/9/8 1:09:42

去中心化交易所（DEX）

核心概念与DEX类型 DEX vs CEX 中心化交易所（CEX）风险：资产托管风险（如2019年超2.9亿美元被盗）、隐私泄露（如50万用户信息泄漏）。 DEX优势：用户自持资产（非托管&#x…...

编程日记 2025/9/8 13:11:25

HTTP数据传输的几个关键字Header

本文着重针对http在传输数据时的几种封装方式进行描述。 1. Content-Type(描述body内容类型以及字符编码) HTTP的Content-Type用于定义数据传输的媒体类型（MIME类型），主要分为以下几类： (一)、‌基础文本类型‌ text/plain‌ …...

编程日记 2025/9/5 15:27:59

Redis 的 Raft 选举协议

Redis 的 Raft 选举协议主要用于 Redis Sentinel 和 Redis Cluster 的高可用实现中（尽管 Redis Cluster 默认使用类似 Gossip 的协议，但 Raft 的思想在 Sentinel 的领导者选举中有体现）。以下是关于 Raft 协议在 Redis 中的应用及脑裂问题的详细解析：一、Redis 中的 Raft…...

编程日记 2025/9/3 3:36:45

sshd启动报错“Failed to start OpenSSH Server daemon”

“systemctl restart sshd”启动sshd服务异常，报错“Failed to start OpenSSH Server daemon”。使用sshd -t命令检查sshd配置文件，返回关键信息gssapikexalgorithms相关错误。解决方法禁用 GSSAPI 相关的 KEX 算法编辑sshd配置文件，注…...

编程日记 2025/9/2 11:49:59

MIT6.828 Lab3-2 Print a page table (easy)

实验内容实现一个函数来打印页表的内容，帮助我们更好地理解 xv6 的三级页表结构。修改内容 kernel/defs.h中添加函数声明，方便其它函数调用 void vmprint(pagetable_t);// lab3-2 Print a page tablekernel/vm.c中添加函数具体定义采用…...

编程日记 2025/9/3 14:56:10

AI本地部署之ragflow

Ubunturagflowdeepseek本地部署目录一、配置说明1. 软件配置说明2. 硬件配置说明二、RagFlow安装和部署1. 前置条件2. 安装注：如果发现没有出现这个界面，可以进入ragflow/docker/ragflow-logs这个路径，查看ragflow_server.log文件中的内容&…...

编程日记 2025/9/3 4:38:04

源码分析之Leaflet属性控件Control.Attribution实现原理

概述 Control.Attribution 是一个 Leaflet 地图控件，用于显示地图的版权信息。它可以显示地图提供者的名称和链接，以及地图上的图层的版权信息。源码分析源码实现 Control.Attribution的源码实现如下 var ukrainianFlag <svg aria-hidden"…...

编程日记 2025/9/2 14:43:13

一、DOM 节点

节点类型（Node Types）

二、查找节点

1.查找父节点

1. parentNode

2. parentElement

2.查找子节点

1. childNodes

2. children

3. firstChild / lastChild

4. firstElementChild / lastElementChild

3.查找兄弟节点

1. previousSibling / nextSibling

2. previousElementSibling / nextElementSibling

4.查找特定祖先节点

closest(selector)

5.检查节点关系

contains(node)

6.综合示例

HTML 结构：

JavaScript 操作：

7.注意事项

三、增加节点

1. 创建节点

2. 插入节点

3. 插入 HTML 字符串

四、删除节点

1. 传统方法

2. 现代方法（ES6+）

五、替换节点

1. replaceChild()

2. replaceWith()（ES6+）

六、克隆节点

方法语法

示例代码

克隆注意事项

七、最佳实践与性能优化

示例：

相关文章：

1. `parentNode`

2. `parentElement`

1. `childNodes`

2. `children`

3. `firstChild` / `lastChild`

4. `firstElementChild` / `lastElementChild`

1. `previousSibling` / `nextSibling`

2. `previousElementSibling` / `nextElementSibling`

`closest(selector)`

`contains(node)`

1. `replaceChild()`

2. `replaceWith()`（ES6+）