通俗易懂的 JS DOM 操作指南：从创建到挂载
目录
🧩 1. 创建元素：document.createElement / createElementNS
📝 2. 创建文本：document.createTextNode
✏️ 3. 修改文本：node.nodeValue
🗑️ 4. 移除元素：el.removeChild()
📍 5. 精准插入：el.insertBefore()
➕ 6. 尾部追加：el.appendChild()
👨👦 7. 获取父元素：el.parentNode
👉 8. 获取兄弟元素：el.nextSibling
🌀 9. 挂载 Portal：document.querySelector
🌰 综合应用示例：动态列表操作
📚 核心知识点总结
DOM 演示操作 文档
理解 DOM 操作是前端开发的核心基础。下面我会用通俗的语言和实际场景，带你掌握这些关键 API 的使用技巧：
🧩 1. 创建元素：document.createElement / createElementNS
作用：创建 HTML 元素（标签）
区别：
createElement：创建普通 HTML 元素
const div = document.createElement('div'); // 创建 <div>
const button = document.createElement('button'); // 创建 <button>createElementNS：创建带命名空间的元素（如 SVG）
// 创建 SVG 元素必须使用命名空间
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');📝 2. 创建文本：document.createTextNode
-
作用：创建纯文本节点（非 HTML）
-
场景：当需要插入纯文本时（避免 XSS 攻击）
const text = document.createTextNode('安全文本内容');
div.appendChild(text); // <div>安全文本内容</div>✏️ 3. 修改文本：node.nodeValue
-
作用：修改文本节点的内容（注意：不适用于元素节点！）
-
正确用法：
const textNode = document.createTextNode('原始文本');
div.appendChild(textNode);// 修改文本内容
textNode.nodeValue = '修改后的文本'; // div内容实时更新🗑️ 4. 移除元素：el.removeChild()
-
作用：从父元素中移除指定的子元素
-
三步操作：
const parent = document.getElementById('parent');
const child = document.getElementById('child');// 必须通过父元素执行移除
parent.removeChild(child);📍 5. 精准插入：el.insertBefore()
-
作用：在指定子节点前插入新元素
-
参数顺序：
父元素.insertBefore(新元素, 参考元素)
const list = document.getElementById('list');
const newItem = document.createElement('li');
const thirdItem = list.children[2];// 在第三个元素前插入
list.insertBefore(newItem, thirdItem);➕ 6. 尾部追加：el.appendChild()
-
作用：在父元素末尾添加子元素
-
最常用操作：
const container = document.querySelector('.container');
const newCard = document.createElement('div');container.appendChild(newCard); // 添加到container末尾👨👦 7. 获取父元素：el.parentNode
-
作用：获取当前元素的直接父元素
-
典型场景：事件委托
button.addEventListener('click', (e) => {// 点击按钮后获取其父元素const parent = e.target.parentNode;parent.style.backgroundColor = 'yellow';
});;
👉 8. 获取兄弟元素：el.nextSibling
-
注意：返回下一个节点（可能是文本/注释/元素）
-
实际使用：通常配合
nodeType过滤
const current = document.getElementById('item3');
let next = current.nextSibling;// 跳过文本节点（如换行符）
while (next && next.nodeType !== 1) {next = next.nextSibling;
}
console.log(next); // 得到下一个元素节点🌀 9. 挂载 Portal：document.querySelector
-
特殊场景：渲染到 DOM 树之外的位置（如模态框）
// 在 body 末尾创建模态框容器
const modalRoot = document.createElement('div');
document.body.appendChild(modalRoot);// 创建 Portal 内容
const modalContent = document.createElement('div');
modalContent.innerHTML = '<h2>登录窗口</h2>';// 挂载到指定容器
const container = document.querySelector('#portal-root');
container.appendChild(modalContent);🌰 综合应用示例：动态列表操作
<ul id="list"><li>第一项</li><li>第二项</li>
</ul>
<button id="btn">添加项目</button><script>const list = document.getElementById('list');const btn = document.getElementById('btn');btn.addEventListener('click', () => {// 1. 创建元素const newItem = document.createElement('li');// 2. 创建文本（安全方式）const text = document.createTextNode('新项目');newItem.appendChild(text);// 3. 在第二项前插入const secondItem = list.querySelector('li:nth-child(2)');list.insertBefore(newItem, secondItem);// 4. 添加删除功能newItem.onclick = function() {this.parentNode.removeChild(this); // 通过父元素移除};});
</script>📚 核心知识点总结
| API | 作用 | 注意事项 |
|---|---|---|
createElement | 创建 HTML 元素 | 区分普通元素和 SVG |
createTextNode | 创建安全文本节点 | 防止 XSS 攻击 |
nodeValue | 修改文本节点内容 | 对元素节点无效 |
removeChild | 父元素移除子元素 | 需通过父元素调用 |
insertBefore | 在指定位置插入元素 | 参数顺序：(新元素, 参考元素) |
appendChild | 末尾添加元素 | 最常用的添加方法 |
parentNode | 获取父元素 | 事件委托的关键 |
nextSibling | 获取下一个兄弟节点 | 可能包含文本节点 |
querySelector | 精确查找元素 | Portal 挂载的核心 |
💡 最佳实践提示：操作 DOM 时，尽量减少重排（reflow）次数。可通过创建文档片段（
DocumentFragment）批量操作元素后再一次性添加到 DOM 树中。
掌握这些基础 API 后，你将能轻松应对大多数 DOM 操作需求，为学习现代前端框架打下坚实基础！
DOM 演示操作 文档
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作演示</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);color: #fff;min-height: 100vh;padding: 20px;line-height: 1.6;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}header {text-align: center;padding: 20px 0;margin-bottom: 30px;background: rgba(0, 0, 0, 0.3);border-radius: 15px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);backdrop-filter: blur(4px);border: 1px solid rgba(255, 255, 255, 0.1);}h1 {font-size: 2.8rem;margin-bottom: 10px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);}.subtitle {font-size: 1.2rem;opacity: 0.9;max-width: 800px;margin: 0 auto;}.content {display: flex;flex-wrap: wrap;gap: 30px;margin-bottom: 40px;}.demo-section {flex: 1;min-width: 300px;background: rgba(0, 0, 0, 0.2);border-radius: 15px;padding: 25px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);backdrop-filter: blur(4px);border: 1px solid rgba(255, 255, 255, 0.1);}.section-title {font-size: 1.8rem;margin-bottom: 20px;color: #ffcc00;text-align: center;}.controls {display: flex;flex-wrap: wrap;gap: 15px;margin-bottom: 25px;}.btn {flex: 1;min-width: 200px;padding: 15px 20px;background: linear-gradient(to right, #3498db, #2980b9);color: white;border: none;border-radius: 50px;font-size: 1.1rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);}.btn:hover {transform: translateY(-3px);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);background: linear-gradient(to right, #3cb0fd, #3498db);}.btn:active {transform: translateY(1px);}.btn-remove {background: linear-gradient(to right, #e74c3c, #c0392b);}.btn-remove:hover {background: linear-gradient(to right, #ff6b6b, #e74c3c);}.btn-insert {background: linear-gradient(to right, #2ecc71, #27ae60);}.btn-insert:hover {background: linear-gradient(to right, #1dd1a1, #2ecc71);}.btn-info {background: linear-gradient(to right, #9b59b6, #8e44ad);}.btn-info:hover {background: linear-gradient(to right, #be2edd, #9b59b6);}.demo-area {background: rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 20px;min-height: 150px;margin-top: 20px;border: 1px solid rgba(255, 255, 255, 0.1);}.code-section {background: rgba(0, 0, 0, 0.3);border-radius: 10px;padding: 20px;margin-top: 20px;font-family: 'Courier New', monospace;font-size: 0.95rem;overflow-x: auto;border: 1px solid rgba(255, 255, 255, 0.1);}.dom-tree {background: rgba(255, 255, 255, 0.05);border-radius: 10px;padding: 15px;margin-top: 15px;font-family: monospace;font-size: 0.9rem;white-space: pre;overflow-x: auto;}.explanation {background: rgba(255, 255, 255, 0.05);border-radius: 10px;padding: 20px;margin-top: 20px;border-left: 4px solid #3498db;}.explanation h3 {color: #3498db;margin-bottom: 10px;}.highlight {background: rgba(255, 215, 0, 0.2);padding: 2px 5px;border-radius: 4px;}.counter {text-align: center;font-size: 1.2rem;margin-top: 20px;padding: 10px;background: rgba(0, 0, 0, 0.3);border-radius: 10px;}.element {color: #ffcc00;}.text-node {color: #1abc9c;}footer {text-align: center;padding: 20px;margin-top: 30px;background: rgba(0, 0, 0, 0.3);border-radius: 15px;}@media (max-width: 768px) {.content {flex-direction: column;}.btn {min-width: 100%;}}</style>
</head><body><div class="container"><header><h1>DOM 操作演示</h1><p class="subtitle">本演示展示了JavaScript中常用的DOM操作方法，包括创建元素、修改文本、插入节点、移除节点等操作。</p></header><div class="content"><div class="demo-section"><h2 class="section-title">文本节点操作</h2><div class="controls"><button id="edit" class="btn">修改文字 (nodeValue)</button><button id="remove" class="btn btn-remove">移除文本节点 (removeChild)</button></div><div class="demo-area" id="text-demo"><div id="app"></div></div><div class="code-section"><pre><code>// 创建元素和文本节点
const heading = document.createElement('h1');
const textNode = document.createTextNode('hello world');// 添加文本节点到元素
heading.appendChild(textNode);// 添加元素到DOM
app.appendChild(heading);// 修改文本
editBtn.addEventListener('click', () => {textNode.nodeValue = 'hello vue';
});// 移除文本节点
removeBtn.addEventListener('click', () => {if (textNode.parentNode) {heading.removeChild(textNode);}
});</code></pre></div><div class="explanation"><h3>说明</h3><p><span class="highlight">nodeValue</span> 属性用于获取或设置文本节点的内容。</p><p><span class="highlight">removeChild()</span> 方法从DOM中移除指定的子节点。</p></div></div><div class="demo-section"><h2 class="section-title">节点插入操作</h2><div class="controls"><button id="insertBefore" class="btn btn-insert">insertBefore (在指定节点前插入)</button><button id="insertBefore2" class="btn btn-insert">insertBefore (在末尾插入)</button><button id="parentNode" class="btn btn-info">显示父节点和兄弟节点</button></div><div class="demo-area"><div id="parentDiv"><h1 id="childElement">childElement (原始节点)</h1></div></div><div class="dom-tree" id="domTree"><!-- DOM树结构将在这里显示 --></div><div class="code-section"><pre><code>// 在指定节点前插入
insertBeforeBtn.addEventListener('click', () => {const newNode = document.createElement("span");newNode.textContent = '新插入的span (之前)';newNode.className = 'new-node';const parentDiv = childElement.parentNode;parentDiv.insertBefore(newNode, childElement);
});// 在末尾插入（相当于appendChild）
insertBefore2Btn.addEventListener('click', () => {const newNode = document.createElement("span");newNode.textContent = '新插入的span (末尾)';newNode.className = 'new-node';const parentDiv = childElement.parentNode;parentDiv.insertBefore(newNode, null);
});// 显示节点关系
parentNodeBtn.addEventListener('click', () => {const parent = childElement.parentNode;const nextSibling = childElement.nextSibling;// 显示在DOM树区域
});</code></pre></div><div class="explanation"><h3>说明</h3><p><span class="highlight">insertBefore()</span> 方法在参考节点之前插入一个节点。</p><p>如果参考节点为 <span class="highlight">null</span>，则新节点将插入到子节点列表的末尾。</p><p><span class="highlight">parentNode</span> 属性返回指定节点的父节点。</p><p><span class="highlight">nextSibling</span> 属性返回指定节点之后紧跟的节点。</p></div></div></div><div class="counter">操作计数: <span id="operationCount">0</span></div><footer><p>DOM 操作演示 © 2023 | 通过本演示理解核心DOM操作</p></footer></div><script>// 操作计数器let operationCount = 0;const operationCountElement = document.getElementById('operationCount');// 更新操作计数function updateCounter() {operationCount++;operationCountElement.textContent = operationCount;}// 第一部分：文本节点操作const app = document.getElementById('app');const heading = document.createElement('h1');heading.className = 'element';const textNode = document.createTextNode('hello world');heading.appendChild(textNode);app.appendChild(heading);// 添加按钮事件document.getElementById('edit').addEventListener('click', () => {textNode.nodeValue = '文本已修改: hello vue!';updateCounter();});document.getElementById('remove').addEventListener('click', () => {if (textNode.parentNode) {heading.removeChild(textNode);updateCounter();}});// 第二部分：节点插入操作const childElement = document.getElementById('childElement');document.getElementById('insertBefore').addEventListener('click', () => {const newNode = document.createElement("span");newNode.textContent = '新插入的span (在原始节点之前)';newNode.className = 'new-node';const parentDiv = childElement.parentNode;parentDiv.insertBefore(newNode, childElement);updateCounter();updateDomTree();});document.getElementById('insertBefore2').addEventListener('click', () => {const newNode = document.createElement("span");newNode.textContent = '新插入的span (在父元素末尾)';newNode.className = 'new-node';const parentDiv = childElement.parentNode;parentDiv.insertBefore(newNode, null);updateCounter();updateDomTree();});document.getElementById('parentNode').addEventListener('click', () => {const parent = childElement.parentNode;const nextSibling = childElement.nextSibling;alert(`父节点ID: ${parent.id}\n下一个兄弟节点: ${nextSibling ? nextSibling.nodeName : '无'}`);updateCounter();});// 更新DOM树显示function updateDomTree() {const parentDiv = document.getElementById('parentDiv');const domTreeElement = document.getElementById('domTree');// 简单的DOM树表示let tree = `#${parentDiv.id}\n`;tree += `├── ${parentDiv.firstChild.nodeName} (文本节点)\n`;for (let i = 0; i < parentDiv.childNodes.length; i++) {const node = parentDiv.childNodes[i];if (node.nodeType === Node.ELEMENT_NODE) {tree += `├── <${node.nodeName.toLowerCase()}>`;if (node.id) tree += ` #${node.id}`;if (node.className) tree += ` .${node.className}`;if (node.textContent) tree += ` - "${node.textContent}"`;tree += '\n';}}domTreeElement.textContent = tree;}// 初始化DOM树显示updateDomTree();// 添加一些初始样式const style = document.createElement('style');style.textContent = `.element { color: #ffcc00; }.text-node { color: #1abc9c; }.new-node { display: block; padding: 10px; margin: 10px 0; background: rgba(52, 152, 219, 0.2); border: 1px dashed #3498db;border-radius: 5px;}`;document.head.appendChild(style);</script>
</body></html>相关文章：
通俗易懂的 JS DOM 操作指南：从创建到挂载
目录 🧩 1. 创建元素：document.createElement / createElementNS 📝 2. 创建文本：document.createTextNode ✏️ 3. 修改文本：node.nodeValue 🗑️ 4. 移除元素：el.removeChild() …...
CSS Day07
1.搭建项目目录 2.网页头部SEO三大标签 3.Favicon图标与版心 （1）Favicon图标 （2）版心 4.快捷导航 5.头部-布局 6.头部-logo 7.头部-导航 8.头部-搜索 9头部-购物车 10.底部-布局 11.底部-服务区域 12.底部-帮助中心 13.底部-版权…...
爬虫框架:scrapy使用心得
文章目录 前言一、scrapy是什么？二、使用步骤1.安装和创建2.请求以及参数3.代理池4.请求错误处理5.采集数据入库6.日志及其他配置 总结 前言 有些时候我们需要采集大量数据时,我们需要程序的运行效率高,当然如果有时候不想写请求代码的时候，这些情况我都…...
RV1126-OPENCV 交叉编译
一.下载opencv-3.4.16.zip到自己想装的目录下 二.解压并且打开 opencv 目录 先用 unzip opencv-3.4.16.zip 来解压 opencv 的压缩包，并且进入 opencv 目录(cd opencv-3.4.16) 三. 修改 opencv 的 cmake 脚本的内容 先 cd platforms/linux 然后修改 arm-gnueabi.to…...
【深度学习】 19. 生成模型：Diffusion Models
Diffusion Models Diffusion Models 简介 Diffusion 模型是一类通过逐步添加噪声并再逆向还原的方式进行图像生成的深度生成模型。其基本流程包括： 前向过程（Forward Process）：将真实图像逐步加噪，最终变为高斯噪声…...
JMeter 直连数据库
1.直连数据库的使用场景 1.1 参数化，例如登录使用的账户名密码都可以从数据库中取得 1.2 断言，查看实际结果和数据库中的预期结果是否一致 1.3 清理垃圾数据，例如插入一个用户，它的ID不能相同，在测试插入功能后将数据删…...
易路 iBuilder：解构企业 AI 落地困境，重构智能体时代生产力范式
一、从大模型到智能体的产业跃迁 2024 年堪称中国人工智能产业的 "战略拐点" 之年。当 DeepSeek R1 模型以 "技术 价格" 双重普惠模式掀起行业震荡时，各企业纷纷意识到，大模型的真正价值不在于技术炫技，而在于成为企业…...
数据库，Spring Boot，数据源
您是对的，我之前的回答解释了Spring Boot在操作MySQL时不一定需要显式配置指定的数据源类型，因为它有自动配置机制，但没有直接点明在自动配置情况下“数据源是什么”。 在Spring Boot自动配置机制下，这个“数据源”指的是一个连接…...
Linux 第三阶段课程：数据库基础与 SQL 应用
数据库定义 数据库是按一定规则存储数据的仓库，可存储海量数据（百万级至亿级），数据来源包括文本、图像、音视频等多种形式，如出行记录、消费数据等。 数据库分类 关系型数据库：基于二维表格模型࿰…...
计算机网络之路由表更新
1.解题思路 对新接收到的路由表进行更新，全部"距离"1，且"下一跳路由器"都写成发送方路由器的名称。 开始对比新表和原来的路由表 1.看目的网络 如果是新的目的网络，则直接把对应的各项信息填入表中；如果是相同…...
万兴PDF手机版
万兴PDF手机版(万兴PDF编辑器)是一款国产PDF编辑工具.万兴PDF安卓版提供PDF文档编辑,AI撰写摘要,文档签名,设置密码保护等功能,万兴PDF专家APP以简约风格及文档编辑功能为核心,支持多设备终端同步保存.全免 万兴 PDF 编辑器是一款功能强大的 PDF 编辑软件，它支持多种…...
Qt -使用OpenCV得到SDF
博客主页：【夜泉_ly】 本文专栏：【暂无】 欢迎点赞👍收藏⭐关注❤️ 目录 cv::MatdistanceTransform获得SDF 本文的目标， 是简单学习并使用OpenCV的相关函数， 并获得QImage的SDF(Signed Distance Field 有向距离场) 至…...
Python 中Vector类的格式化实现，重点拆解其超球面坐标系的设计精髓
📌 高维向量的格式化革新 在Vector类第5版中，格式化系统迎来重要升级： 坐标系转型：从Vector2d的极坐标（p’后缀）升级为超球面坐标（h’后缀），支持n维空间维度突破&#…...
DDR5 ECC详细原理介绍与基于协议讲解
本文篇幅较长，涉及背景原理介绍方便大家理解其运作方式 以及 基于DDR5协议具体展开介绍。 背景原理介绍 上图参考：DDR 内存中的 ECC 写入操作时，On-die ECC的工作过程如下： SoC将需要写入到Memory中的数据发送给控制器控制器将需要写入的数据直接发送给DRAM芯片在DDR5 DR…...
Linux系统之gettext详解
gettext 是一个用于国际化（i18n）和本地化（l10n）的工具集，旨在帮助开发者创建多语言支持的应用程序。它主要通过提供一系列工具和库来简化文本翻译过程。 gettext 工作流程 标记源代码：在源代码中用 _() 函…...
基于Qt封装数据库基本增删改查操作，支持多线程，并实现SQLite数据库单例访问
抽出来的，直接用就行 头文件CPP文件使用示例 头文件 #ifndef DATABASECOMMON_H #define DATABASECOMMON_H/** 单例封装SQLite通用操作，支持多线程调用；可扩展兼容其他数据库，照着SysRunDatabase写，并且重载openDataba…...
EC800X QuecDuino开发板介绍
支持的模组列表 EG800KEC800MEC800GEC800E 功能列表 基本概述 EC800X QuecDuino EVB 搭载移远 EC800 系列模组。支持模组型号为： EC800M 系列、EC800K 系列、EG800K 系列、EC800E 系列等。 渲染图 开发板的主要组件、接口布局见下图 资料下载 EC800X-QuecDui…...
ARM P15协处理器指令详解：架构、编程与应用实践
ARM P15协处理器指令详解：架构、编程与应用实践 引言 在ARM处理器架构中，协处理器(Coprocessor)系统是扩展处理器功能的关键机制，其中CP15(即协处理器15)作为系统控制协处理器，承担着内存管理、缓存控制、系统配置等核心功能。本…...
PHP轻量级聊天室源码（源码下载）
最新版本：v2.1.2 (2024.08更新) 运行环境：PHP5.6（无需MySQL） 核心特性：手机电脑自适应、TXT数据存储、50条历史消息 适用场景：小型社区/企业内网/教育培训即时通讯 一、核心功能亮点（SEO关键词布…...
MySQL数据表添加字段（三种方式）
基本概念解析 数据表由行和列组成，专业术语中： 字段（Field）：表的纵向列结构记录（Record）：表的横向行数据 字段添加方法详解 MySQL支持三种字段添加位置，语法格式均通…...
leetcode hot100刷题日记——33.二叉树的层序遍历
解题总结二维vector的初始化方法 题目描述情况1：不确定行数和列数情况2：已知行数和列数情况3：已知行数但不知道列数情况4：已知列数但不知道行数 题目描述 解答：用队列 思路都差不多，我觉得对于我自己来说&a…...
2、PyTorch基础教程：从张量到神经网络训练
1、PyTorch基础 PyTorch 是一个开源的深度学习框架，以其灵活性和动态计算图而广受欢迎。 PyTorch 主要有以下几个基础概念：张量（Tensor）、自动求导（Autograd）、神经网络模块（nn.Module…...
《数据结构初阶》【番外篇：快速排序的前世今生】
【番外篇：快速排序的前世今生】目录 前言：---------------起源---------------一、诞生：二、突破：三、核心： ---------------发展---------------1. 早期版本：简单但不稳定1960 年：初始版本 2. …...
【笔记】基于 MSYS2（MINGW64）的 Poetry 虚拟环境创建指南
#工作记录 基于 MSYS2（MINGW64）的 Poetry 虚拟环境创建指南 一、背景说明 在基于 MSYS2（MINGW64）的环境中，使用 Poetry 创建虚拟环境是一种高效且灵活的方式来管理 Python 项目依赖。本指南将详细介绍如何在 PyChar…...
PINNs案例——二维磁场计算
基于物理信息的神经网络是一种解决偏微分方程计算问题的全新方法… 有关PINN基础详见：PINNs案例——中心热源温度场预测问题的torch代码 今日分享代码案例：二维带电流源磁场计算 该案例参考学习论文：[1]张宇娇，孙宏达࿰…...
Hive SQL 中 BY 系列关键字全解析：从排序、分发到分组的核心用法
一、排序与分发相关 BY 关键字 1. ORDER BY：全局统一排序 作用：对查询结果进行全局排序，确保最终结果集完全有序（仅允许单个 Reducer 处理数据）。 语法： SELECT * FROM table_name ORDER BY column1 [A…...
数据类型检测有哪些方式?
typeof 其中数组 对象 null都会判断为Object,其他正确 typeof 2 // number typeof true //bolean typeof str //string typeof [] //Object typeof function (){} // function typeof {} //object typeof undefined //undefined typeof null // nullinstanceof 判断…...
算法打开13天
41.前 K 个高频元素 （力扣347题） 给你一个整数数组 nums 和一个整数 k ，请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2]示例 2: 输入: nums [1], k 1 输出: …...
Freeqwq 世界首个免费无限制 分布式 AI 算力平台 https://qwq.aigpu.cn/
官网：Free QWQ - 免费分布式 AI 算力平台 基于来自全国各地 50 台家用电脑的 3090、4080、4090 显卡分布式算力，我们为开发者提供完全免费、无限制的 QwQ 32B 大语言模型 API。无需注册，无需充值，立即获取 API Key 开始使用。 …...
广告拦截器：全方位拦截，畅享无广告体验
在数字时代，广告无处不在。无论是浏览网页、使用社交媒体，还是观看视频，广告的频繁弹出常常打断我们的体验，让人不胜其烦。更令人担忧的是，一些广告可能包含恶意软件，威胁我们的设备安全和个人隐私。AdGuar…...