JavaScript WebAPI 指南

DevilSeagull2025-09-13 2:30

JavaScript WebAPI 指南

    • [一、WebAPI 背景知识](#一、WebAPI 背景知识)
      • [1.1 什么是 WebAPI](#1.1 什么是 WebAPI)
      • [1.2 什么是 API](#1.2 什么是 API)
      • [1.3 API 参考文档](#1.3 API 参考文档)
    • [二、DOM 基本概念](#二、DOM 基本概念)
      • [2.1 什么是 DOM](#2.1 什么是 DOM)
      • [2.2 DOM 树](#2.2 DOM 树)
      • [2.3 重要概念](#2.3 重要概念)
    • 三、获取元素
    • 四、事件初识
      • [4.1 基本概念](#4.1 基本概念)
      • [4.2 事件三要素](#4.2 事件三要素)
      • [4.3 简单示例](#4.3 简单示例)
    • 五、操作元素
      • [5.1 获取/修改元素内容](#5.1 获取/修改元素内容)
      • [5.2 获取/修改元素属性](#5.2 获取/修改元素属性)
        • [5.2.1 获取属性](#5.2.1 获取属性)
        • [5.2.2 修改属性](#5.2.2 修改属性)
      • [5.3 获取/修改表单元素属性](#5.3 获取/修改表单元素属性)
        • [5.3.1 表单元素属性](#5.3.1 表单元素属性)
        • [5.3.3 代码示例：点击计数](#5.3.3 代码示例：点击计数)
      • [5.4 获取/修改样式属性](#5.4 获取/修改样式属性)
        • [5.4.1 行内样式操作](#5.4.1 行内样式操作)
        • [5.4.2 类名样式操作](#5.4.2 类名样式操作)
    • 六、操作节点
        • [6.1.1 创建元素节点](#6.1.1 创建元素节点)
        • [6.1.2 插入节点到 DOM 树中](#6.1.2 插入节点到 DOM 树中)
        • [6.1.3 使用`insertBefore`](#6.1.3 使用insertBefore)
        • [6.2 删除节点](#6.2 删除节点)
    • 七、代码案例
        • [7.1 猜数字游戏](#7.1 猜数字游戏)

一、WebAPI 背景知识

1.1 什么是 WebAPI

WebAPI 是 JavaScript 的重要组成部分，它包含了 DOM（文档对象模型）和 BOM（浏览器对象模型）。DOM 主要用于操作页面结构，BOM 用于操作浏览器窗口。WebAPI 是 W3C 组织规定的标准，是构建动态网页的基础。

参考文档: link

1.2 什么是 API

API（Application Programming Interface）是现成的函数和对象集合，供开发者使用。WebAPI 特指 DOM 和 BOM。API 可以看作是一个工具箱，帮助开发者快速实现功能。

1.3 API 参考文档

MDN（Mozilla Developer Network）提供了丰富的 WebAPI 文档，可以通过以下链接访问：

MDN WebAPI 文档\]([Web API \| MDN](https://developer.mozilla.org/zh-CN/docs/Web/API#%E8%A7%84%E8%8C%83)) ### 二、DOM 基本概念 #### 2.1 什么是 DOM DOM（Document Object Model）是 W3C 标准的一部分，提供了一系列函数，用于操作网页内容、结构和样式。DOM 将网页视为一个树形结构，称为 DOM 树。 #### 2.2 DOM 树 一个页面的结构是一个树形结构，形如： ```html 文档标题 我的链接

我的标题

``` DOM 树结构形如： 文档 ├── 根元素： │ ├── 元素： │ │ └── 元素： │ │ └── 文本：文档标题 │ └── 元素：<body> │ ├── 元素：<a> │ │ └── 属性：href │ │ └── 文本：我的链接 │ └── 元素：<h1> │ └── 文本：我的标题 #### 2.3 重要概念 • 文档：一个页面是一个文档，使用`document`表示。 • 节点：网页中所有的内容都可以称为节点（标签节点、注释节点、文本节点、属性节点等），使用`node`表示。 ### 三、获取元素 #### 3.1`querySelector` `querySelector`是 HTML5 新增的方法，可以使用 CSS 选择器`获取页面中的元素`。返回文档中与指定选择器匹配的第一个元素。 ```javascript var elem1 = document.querySelector('.box'); var elem2 = document.querySelector('#id'); var elem3 = document.querySelector('h3 span input'); ``` #### 3.2`querySelectorAll` `querySelectorAll`返回文档中与指定选择器匹配的所有元素的列表。 ```javascript var elems = document.querySelectorAll('div'); ``` ### 四、事件初识 #### 4.1 基本概念 事件是用户对页面的操作（如点击、选择、修改等），这些操作会在浏览器中产生事件，被 JavaScript 获取并处理。 #### 4.2 事件三要素 • 事件源：哪个元素触发的事件。 • 事件类型：如点击、选中、修改等。 • 事件处理程序：处理事件的函数。 #### 4.3 简单示例 ```html <button id="btn">点我一下</button> <script> var btn = document.getElementById('btn'); btn.onclick = function() { alert("hello world"); }; </script> ``` ### 五、操作元素 #### 5.1 获取/修改元素内容 ##### 5.1.1`innerText` `innerText`表示一个节点及其后代的"渲染"文本内容。不识别 HTML 标签，是非标准的。 ```javascript var div = document.querySelector('div'); console.log(div.innerText); // 读取内容 div.innerText = 'hello js <span>hello js</span>'; // 修改内容 ``` ##### 5.1.2`innerHTML` `innerHTML`表示一个节点及其后代的 HTML 内容。识别 HTML 标签，是 W3C 标准的。 ```javascript var div = document.querySelector('div'); console.log(div.innerHTML); // 读取内容 div.innerHTML = '<span>hello js</span>'; // 修改内容 ``` #### 5.2 获取/修改元素属性 ##### 5.2.1 获取属性 可以通过`Element`对象的属性直接获取。 ```javascript var img = document.querySelector('img'); console.log(img.src); // 获取 src 属性 console.log(img.title); // 获取 title 属性 console.log(img.alt); // 获取 alt 属性 ``` ##### 5.2.2 修改属性 可以直接修改`Element`对象的属性。 ```javascript var img = document.querySelector('img'); img.onclick = function() { if (img.src.lastIndexOf('rose.jpg') !== -1) { img.src = './rose2.png'; } else { img.src = './rose.jpg'; } }; ``` #### 5.3 获取/修改表单元素属性 ##### 5.3.1 表单元素属性 表单元素（主要是`input`标签）的以下属性可以通过 DOM 修改： • `value`：输入框的值。 • `disabled`：禁用状态。 • `checked`：复选框的选中状态。 • `selected`：下拉框的选中状态。 • `type`：输入框的类型（文本、密码、按钮、文件等）。 5.3.2 代码示例：切换按钮文本 ```html <input type="button" value="播放"> <script> var btn = document.querySelector('input'); btn.onclick = function() { if (btn.value === '播放') { btn.value = '暂停'; } else { btn.value = '播放'; } }; </script> ``` ##### 5.3.3 代码示例：点击计数 ```html <input type="text" id="text" value="0"> <input type="button" id="btn" value='点我+1'> <script> var text = document.querySelector('#text'); var btn = document.querySelector('#btn'); btn.onclick = function() { var num = +text.value; num++; text.value = num; }; </script> ``` #### 5.4 获取/修改样式属性 ##### 5.4.1 行内样式操作 通过`style`属性操作行内样式。 ```javascript var div = document.querySelector('div'); div.onclick = function() { var curFontSize = parseInt(this.style.fontSize); curFontSize += 10; this.style.fontSize = curFontSize + 'px'; }; ``` ##### 5.4.2 类名样式操作 通过`className`属性操作类名样式。 ```javascript var div = document.querySelector('div'); div.onclick = function() { if (div.className.indexOf('light') !== -1) { div.className = 'container dark'; } else { div.className = 'container light'; } }; ``` ### 六、操作节点 ###6.1 新增节点 ##### 6.1.1 创建元素节点 使用`document.createElement`创建元素节点。 ```javascript var div = document.createElement('div'); div.id = 'mydiv'; div.className = 'box'; div.innerHTML = 'hehe'; console.log(div); ``` ##### 6.1.2 插入节点到 DOM 树中 使用`appendChild`将节点插入到指定节点的最后一个孩子之后。 ```javascript var container = document.querySelector('.container'); container.appendChild(div); ``` ##### 6.1.3 使用`insertBefore` 使用`insertBefore`将节点插入到指定节点之前。 ```javascript var newDiv = document.createElement('div'); newDiv.innerHTML = '我是新的节点'; var container = document.querySelector('.container'); container.insertBefore(newDiv, container.children[0]); ``` ##### 6.2 删除节点 使用`removeChild`删除子节点。 ```javascript var container = document.querySelector('.container'); var child = container.children[0]; container.removeChild(child); ``` ### 七、代码案例 ##### 7.1 猜数字游戏 ```html <button type="button" id="reset">重新开始一局游戏</button><br> <input type="text" id="guess"> <button type="button" id="button">猜</button> <br> 已经猜的次数：<span id="count">0</span> <br> 结果：<span id="result"></span> <script> var inputE = document.querySelector('#guess'); var countE = document.querySelector('#count'); var resultE = document.querySelector('#result'); var btn = document.querySelector('#button'); var resetBtn = document.querySelector('#reset'); var guessNumber = Math.floor(Math.random() * 100) + 1; var count = 0; btn.onclick = function() { var userGuess = parseInt(inputE.value, 10); if (isNaN(userGuess)) { resultE.innerText = '请输入一个有效的数字！'; return; } count++; countE.innerText = count; if (userGuess === guessNumber) { resultE.innerText = '恭喜你猜对了！'; } else if (userGuess < guessNumber) { resultE.innerText = '太小了，再试一次！'; } else { resultE.innerText = '太大了，再试一次！'; } }; resetBtn.onclick = function() { guessNumber = Math.floor(Math.random() * 100) + 1; count = 0; countE.innerText = count; resultE.innerText = ''; inputE.value = ''; }; </script> ``` </p></div></div><!----><!--]--></div></div><span data-v-9d593865></span><div class="article-tag-list" data-v-9d593865><!--[--><a href="/tag/3" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->java<!--]--></span></button></a><a href="/tag/13" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->开发语言<!--]--></span></button></a><a href="/tag/15" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->javascript<!--]--></span></button></a><a href="/tag/353" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->html<!--]--></span></button></a><a href="/tag/410" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->ecmascript<!--]--></span></button></a><a href="/tag/1045" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->html5<!--]--></span></button></a><!--]--></div><div class="article-pre-next" data-v-9d593865><div data-v-9d593865><a href="/article/1966564831865651201" class="" data-v-9d593865><span data-v-9d593865>上一篇：</span><span class="article-pre-next-item-title" data-v-9d593865>OpenCV：图像直方图</span></a></div><div data-v-9d593865><a href="/article/1966570963925516289" class="" data-v-9d593865><span data-v-9d593865>下一篇：</span><span class="article-pre-next-item-title" data-v-9d593865>Vue3 + Element-Plus 抽屉关闭按钮居中</span></a></div></div></div><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-4340231068438843" data-ad-slot="3187524902" data-ad-format="auto" data-full-width-responsive="true" data-v-9d593865></ins><!----><div class="article-recommend-card" data-v-9d593865><span class="article-recommend-card-title" data-v-9d593865>相关推荐</span><div class="el-divider el-divider--horizontal" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><div class="article-recommend-list" data-v-9d593865><!--[--><a href="/article/2028321930839916545" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>晴殇i</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>25 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>揭秘JavaScript中那些“不冒泡”的DOM事件</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>面试</span><!--]--><!--]--></div></a><a href="/article/2028316901609373698" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>孟陬</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>国外技术周刊 #1：Paul Graham 重新分享最受欢迎的文章《创作者的品味》、本周被划线最多 YouTube《如何在 19 分钟内学会 AI》、为何我不</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>后端</span><!--]--><!--]--></div></a><a href="/article/2028316716787367937" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>BER_c</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>前端权限校验最佳实践：一个健壮的柯里化工具函数</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--]--></div></a><a href="/article/2028316217828769794" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>想用offer打牌</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>一站式了解四种限流算法</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>后端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>go</span><!--]--><!--]--></div></a><a href="/article/2028308643993681921" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>敲敲敲敲暴你脑袋</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>写个添加注释的vscode插件</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>typescript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>visual studio code</span><!--]--><!--]--></div></a><a href="/article/2028308597843755009" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>华仔啊</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Java 开发千万别给布尔变量加 is 前缀！很容易背锅</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--]--></div></a><a href="/article/2028299718338609154" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>SuperEugene</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>2 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>后台权限与菜单渲染：基于路由和后端返回的几种实现方式</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>vue.js</span><!--]--><!--]--></div></a><a href="/article/2028299163755151362" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>csdn飘逸飘逸</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>2 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Autojs基础-全局函数与变量(globals)</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>javascript</span><!--]--><!--]--></div></a><a href="/article/2028296819797721090" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>KKKK</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>2 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>手写Promise，从测试用例的角度理解</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>javascript</span><!--]--><!--]--></div></a><!--]--></div></div><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-4340231068438843" data-ad-slot="3187524902" data-ad-format="auto" data-full-width-responsive="true" data-v-9d593865></ins><!----></div><div class="right" data-v-9d593865><div class="right-body" data-v-9d593865><div class="hot-article-rank hot-article-rank-wrapper" data-v-9d593865 data-v-9f329d47><span class="title" data-v-9f329d47>热门推荐</span><div class="el-divider el-divider--horizontal" style="--el-border-style:solid;" role="separator" data-v-9f329d47><!--v-if--></div><div class="article-list" data-v-9f329d47><!--[--><a href="/article/1965957555249266689" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>01</span><span class="article-title" data-v-9f329d47>GitHub 镜像站点</span></a><a href="/article/2023750894639185922" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆</span></a><a href="/article/2026151995774664706" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>OpenClaw 使用和管理 MCP 完全指南</span></a><a href="/article/2027230829093650433" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>OpenClaw优化飞书API 额度已耗尽问题</span></a><a href="/article/2026455806397448193" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>OpenClaw + 飞书（Feishu）环境搭建指南</span></a><a href="/article/2016543499354161154" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services</span></a><a href="/article/2025360924857663490" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>Window 10部署openclaw报错node.exe : npm error code 128</span></a><a href="/article/2026231921366335489" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>OpenClaw大龙虾机器人完整安装教程</span></a><a href="/article/2024756382478696450" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤</span></a><a href="/article/2026818562921398273" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>OpenClaw 接入阿里云百炼 Coding Plan 指南</span></a><!--]--></div></div><!----></div></div></div></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":359,"once":362,"_errors":363,"serverRendered":365,"path":366},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":192,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":194,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":322},[5,19,51,68,79,103,120,136,146,168],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":18},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。","",52072,"1851173111697772545","BillKu","https://profile-avatar.csdnimg.cn/default.jpg",[15],{"id":16,"name":17},424,"github",1757555781000,{"id":20,"title":21,"description":22,"imgUrl":23,"views":24,"ownerId":25,"ownerName":26,"ownerHeadUrl":27,"tagList":28,"time":50},"2023750894639185922","【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆","【OpenClaw 本地实战 Ep.1】抛弃 Ollama？转向 LM Studio！Windows 下用 NVIDIA 显卡搭建 OpenClaw 本地极速推理服务","https://i-blog.csdnimg.cn/direct/2feebd721e934828b95ae588d164e231.png",813,"1846613939052351489","love530love","https://profile-avatar.csdnimg.cn/a71e5cb0b48e4bd28db4738f34c35e67_u014451778.jpg",[29,32,35,38,41,44,47],{"id":30,"name":31},39,"人工智能",{"id":33,"name":34},44,"windows",{"id":36,"name":37},354,"json",{"id":39,"name":40},3423,"cuda",{"id":42,"name":43},40509,"lm studio",{"id":45,"name":46},126452,"openclaw",{"id":48,"name":49},129865,"context length",1771334787000,{"id":52,"title":53,"description":54,"imgUrl":9,"views":55,"ownerId":56,"ownerName":57,"ownerHeadUrl":58,"tagList":59,"time":67},"2026151995774664706","OpenClaw 使用和管理 MCP 完全指南","OpenClaw（原名 Clawdbot）是一款开源的本地 AI 智能体框架，在 GitHub 上拥有超过 180K 星标。MCP（Model Context Protocol）是由 Anthropic 推出的一种开放标准协议，旨在让 AI 模型通过统一接口连接各种外部工具和数据源。通过配置 MCP，OpenClaw 可以直接访问本地文件系统、数据库、GitHub 仓库，甚至 Google Drive 和 Slack 等服务。",524,"1845262207491772418","aiAIman","https://profile-avatar.csdnimg.cn/329ca119ed654c5c96c0aa1bef849331_coolyoung520.jpg",[60,61,64],{"id":30,"name":31},{"id":62,"name":63},202,"语言模型",{"id":65,"name":66},322,"开源",1771907254000,{"id":69,"title":70,"description":71,"imgUrl":9,"views":72,"ownerId":73,"ownerName":74,"ownerHeadUrl":75,"tagList":76,"time":78},"2027230829093650433","OpenClaw优化飞书API 额度已耗尽问题","亲爱的开发者，你所在企业的 API 可调用次数已耗尽，详细使用情况如下：你的应用发出的 API 请求会被拒绝。关于具体规则，可阅读",228,"2025095108908089345","Guass","https://p3-passport.byteacctimg.com/img/user-avatar/14391f7080fe24287278076089c0e30e~300x300.image",[77],{"id":30,"name":31},1772164468000,{"id":80,"title":81,"description":82,"imgUrl":83,"views":84,"ownerId":85,"ownerName":86,"ownerHeadUrl":87,"tagList":88,"time":102},"2026455806397448193","OpenClaw + 飞书（Feishu）环境搭建指南","简 述: 一个全面、实用、可直接上手的 Windows 环境下 OpenClaw × 飞书 插件安装与调试指南的部署教程。","https://i-blog.csdnimg.cn/direct/836ad4fb1e40429d893437937818c1d5.png",320,"1741848768992514049","偕臧x","https://file.jishuzhan.net/user/1741848768992514049/head.webp",[89,92,95,96,99],{"id":90,"name":91},446,"部署",{"id":93,"name":94},774,"飞书",{"id":45,"name":46},{"id":97,"name":98},130820,"feishu",{"id":100,"name":101},130821,"spawn einval",1771979688000,{"id":104,"title":105,"description":106,"imgUrl":107,"views":108,"ownerId":109,"ownerName":110,"ownerHeadUrl":111,"tagList":112,"time":119},"2016543499354161154","Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services","如果你在安装 Claude Code 的过程中使用了梯子（代理），或者因为网络原因，导致在最后运行 claude 的时候，一直卡在连接界面并报错，无法连接国内的智谱（GLM）服务器。","https://i-blog.csdnimg.cn/direct/7c55e6dc5b9d4aa9bfb6a70ed0e16527.png",1241,"1690240030502555649","lyx4949","https://file.jishuzhan.net/user/1690240030502555649/head.png",[113,116],{"id":114,"name":115},189,"ai",{"id":117,"name":118},95315,"claude code",1769616410000,{"id":121,"title":122,"description":123,"imgUrl":9,"views":124,"ownerId":125,"ownerName":126,"ownerHeadUrl":127,"tagList":128,"time":135},"2025360924857663490","Window 10部署openclaw报错node.exe : npm error code 128","用官方方式部署openclaw时提示node.exe : npm error code 1281、手动配置Windows环境变量-系统变量-Path目录：",331,"1718165775904149506","受打击无法动弹","https://file.jishuzhan.net/user/1718165775904149506/head.webp",[129,131,134],{"id":84,"name":130},"npm",{"id":132,"name":133},324,"node.js",{"id":45,"name":46},1771718648000,{"id":137,"title":138,"description":139,"imgUrl":9,"views":140,"ownerId":141,"ownerName":142,"ownerHeadUrl":143,"tagList":144,"time":145},"2026231921366335489","OpenClaw大龙虾机器人完整安装教程","OpenClaw（大龙虾机器人）是一款本地部署的全能AI助手，可通过WhatsApp、Telegram、飞书等聊天软件实现邮件处理、日历管理、系统操作等功能，数据本地存储更隐私。本教程适配macOS/Linux/Windows系统，包含基础安装、初始化配置、聊天软件对接及常见问题解决，新手也能快速上手。",219,"2009115345815650306","家兴网络技术工作室","https://pic.cnblogs.com/face/1278162/20251110113354.png",[],1771926310000,{"id":147,"title":148,"description":149,"imgUrl":9,"views":150,"ownerId":151,"ownerName":152,"ownerHeadUrl":153,"tagList":154,"time":167},"2024756382478696450","Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤","Clawdbot 是一个统一的 AI 代理网关与管理平台，专为开发者设计，目标很实在：让你不用反复折腾配置、写胶水代码、搭中间层，就能快速构建、部署和监控自己的自主 AI 代理。",460,"2024756385733476354","leniou的牙膏","https://profile-avatar.csdnimg.cn/cf84ae9887f04d45a3181b805aaa4657_weixin_36303305.jpg",[155,158,161,164],{"id":156,"name":157},898,"大语言模型",{"id":159,"name":160},4988,"qwen",{"id":162,"name":163},24906,"api网关",{"id":165,"name":166},130180,"文本交互",1771574514000,{"id":169,"title":170,"description":171,"imgUrl":9,"views":172,"ownerId":173,"ownerName":174,"ownerHeadUrl":175,"tagList":176,"time":191},"2026818562921398273","OpenClaw 接入阿里云百炼 Coding Plan 指南","在 OpenClaw 中使用千问及第三方模型（qwen3.5-plus、qwen3-max、MiniMax、GLM、Kimi 等）",203,"2026818565547032578","Shacoray","https://profile-avatar.csdnimg.cn/f1933e41104f4bf8ad2e05497ae93e25_jllion.jpg",[177,180,181,184,187,188],{"id":178,"name":179},161,"阿里云",{"id":114,"name":115},{"id":182,"name":183},344,"云计算",{"id":185,"name":186},88906,"qwen3",{"id":45,"name":46},{"id":189,"name":190},131003,"coding plan",1772066176000,{"adMap":193},["Map"],[195,215,232,244,259,276,287,301,312],{"id":196,"title":197,"description":198,"imgUrl":199,"views":200,"ownerId":201,"ownerName":202,"ownerHeadUrl":203,"tagList":204,"time":214},"2028321930839916545","揭秘JavaScript中那些“不冒泡”的DOM事件","在前端开发中，DOM事件流（捕获阶段→目标阶段→冒泡阶段）是核心基础之一。我们熟知的click、keydown、mouseover等事件，都会在触发后从目标元素向上冒泡至父元素、document甚至window，这也是事件委托的核心原理。","https://oss.xyyzone.com/jishuzhan/article/2028321930839916545/bd51aa7e322c78afe26957fd54aa1a42.webp",1,"1907265429159096321","晴殇i","https://p26-passport.byteacctimg.com/img/user-avatar/6e3179678c010d3d64b9383790b92805~300x300.image",[205,208,211],{"id":206,"name":207},14,"前端",{"id":209,"name":210},15,"javascript",{"id":212,"name":213},211,"面试",1772424607000,{"id":216,"title":217,"description":218,"imgUrl":219,"views":200,"ownerId":220,"ownerName":221,"ownerHeadUrl":222,"tagList":223,"time":231},"2028316901609373698","国外技术周刊 #1：Paul Graham 重新分享最受欢迎的文章《创作者的品味》、本周被划线最多 YouTube《如何在 19 分钟内学会 AI》、为何我不","正如计算机科学教授、ICSE技术债务会议主题演讲人Margaret-Anne Storey所说，我们必须先求甚解，再求速度。“认知债务不像技术债务，它没有构建失败的警报，也没有部署后的隐秘报错。它的出现，悄无声息，只表现为团队共同认知的逐渐模糊。”","https://oss.xyyzone.com/jishuzhan/article/2028316901609373698/df1a7660c9427d46e08b2406ecef7a7d.webp","1727889085772599298","孟陬","https://file.jishuzhan.net/user/1727889085772599298/head.webp",[224,227,228],{"id":225,"name":226},3,"java",{"id":206,"name":207},{"id":229,"name":230},55,"后端",1772423408000,{"id":233,"title":234,"description":235,"imgUrl":9,"views":236,"ownerId":237,"ownerName":238,"ownerHeadUrl":239,"tagList":240,"time":243},"2028316716787367937","前端权限校验最佳实践：一个健壮的柯里化工具函数","在业务开发中，权限校验是绕不开的常见场景。无论是管理后台的按钮权限控制，还是金融系统的操作权限验证，都需要在业务逻辑执行前进行权限判断。",0,"1947166212563185666","BER_c","https://p9-passport.byteacctimg.com/img/user-avatar/46f44cf4bdbec59c6c9ec3c37b20c55f~300x300.image",[241,242],{"id":206,"name":207},{"id":209,"name":210},1772423364000,{"id":245,"title":246,"description":247,"imgUrl":248,"views":200,"ownerId":249,"ownerName":250,"ownerHeadUrl":251,"tagList":252,"time":258},"2028316217828769794","一站式了解四种限流算法","对于后端开发（Java/Go）来说，限流（Rate Limiting）是高可用架构中的核心环节。本文讨论一下关于四种限流常见方案以及对应的一些问题。","https://oss.xyyzone.com/jishuzhan/article/2028316217828769794/ab3007e022934f09fed9e91c49c49136.webp","1929453675252068354","想用offer打牌","https://p3-passport.byteacctimg.com/img/user-avatar/ee8b2620f5e18cc02e7b784a2da736d7~300x300.image",[253,254,255],{"id":225,"name":226},{"id":229,"name":230},{"id":256,"name":257},349,"go",1772423245000,{"id":260,"title":261,"description":262,"imgUrl":263,"views":200,"ownerId":264,"ownerName":265,"ownerHeadUrl":266,"tagList":267,"time":275},"2028308643993681921","写个添加注释的vscode插件","写注释真的好烦，每次都得/**……*/的形式才有jsDoc的效果，真的不想浪费时间了，于是写个vscode插件，添加一下jsDoc注释，提升点效率","https://oss.xyyzone.com/jishuzhan/article/2028308643993681921/3dc1f145b427138522fb3da8ac9538b2.webp","1684383782959845378","敲敲敲敲暴你脑袋","https://file.jishuzhan.net/user/1684383782959845378/head.jpeg",[268,269,272],{"id":209,"name":210},{"id":270,"name":271},250,"typescript",{"id":273,"name":274},2460,"visual studio code",1772421439000,{"id":277,"title":278,"description":279,"imgUrl":280,"views":200,"ownerId":281,"ownerName":282,"ownerHeadUrl":283,"tagList":284,"time":286},"2028308597843755009","Java 开发千万别给布尔变量加 is 前缀！很容易背锅","大家好，我是大华。前几天我在改一个老项目的代码。 本来只是加一个很小的判断，结果一行代码让我卡了 10 分钟。","https://oss.xyyzone.com/jishuzhan/article/2028308597843755009/fda68c2d0d2bbe389369ed6228f66079.webp","1904737469759827969","华仔啊","https://p9-passport.byteacctimg.com/img/user-avatar/8fba7e9dbb3f8324db9555cb38fcfcfb~300x300.image",[285],{"id":225,"name":226},1772421428000,{"id":288,"title":289,"description":290,"imgUrl":9,"views":200,"ownerId":291,"ownerName":292,"ownerHeadUrl":293,"tagList":294,"time":300},"2028299718338609154","后台权限与菜单渲染：基于路由和后端返回的几种实现方式","同学们好，我是 Eugene（尤金），一个拥有多年中后台开发经验的前端工程师~（Eugene 发音很简单，/juːˈdʒiːn/，大家怎么顺口怎么叫就好）","2021140647013580802","SuperEugene","https://p3-passport.byteacctimg.com/img/user-avatar/fd71fbd019883fb1b05e60975189ffca~300x300.image",[295,296,297],{"id":206,"name":207},{"id":209,"name":210},{"id":298,"name":299},36,"vue.js",1772419311000,{"id":302,"title":303,"description":304,"imgUrl":305,"views":200,"ownerId":306,"ownerName":307,"ownerHeadUrl":308,"tagList":309,"time":311},"2028299163755151362","Autojs基础-全局函数与变量(globals)","全局函数与变量可以理解为能够直接使用的函数或变量。官方文档中介绍的内容比较少，有很多函数或者变量也加在了全局里面，官方文档中只是将前面没有涉及的全局函数和变量进行了介绍。虽然这部分内容比较少，但是用的屏幕非常多。","https://oss.xyyzone.com/jishuzhan/article/2028299163755151362/0807fc135f0b0c0555a1ef5a6f9be8fe.webp","2026173840401956865","csdn飘逸飘逸","https://p3-passport.byteacctimg.com/img/user-avatar/2b8ad3ceda0f41f49d2ec523b626dd6a~300x300.image",[310],{"id":209,"name":210},1772419179000,{"id":313,"title":314,"description":315,"imgUrl":9,"views":200,"ownerId":316,"ownerName":317,"ownerHeadUrl":318,"tagList":319,"time":321},"2028296819797721090","手写Promise，从测试用例的角度理解","最近在补基础，发现Promise里面有挺多东西需要理解的，函数绕来绕去的先来一个都可看懂的代码框架，剩余的慢慢补充","1996857218449342466","KKKK","https://p3-passport.byteacctimg.com/img/mosaic-legacy/3792/5112637127~300x300.image",[320],{"id":209,"name":210},1772418620000,{"id":323,"title":324,"description":325,"content":326,"imgUrl":9,"views":236,"ownerId":327,"ownerName":328,"ownerHeadUrl":329,"tagList":330,"time":345,"articleSourceUrl":346,"preArticle":347,"nextArticle":353},"1966570208967573505","JavaScript WebAPI 指南","WebAPI 是 JavaScript 的重要组成部分，它包含了 DOM（文档对象模型）和 BOM（浏览器对象模型）。DOM 主要用于操作页面结构，BOM 用于操作浏览器窗口。WebAPI 是 W3C 组织规定的标准，是构建动态网页的基础。","#### JavaScript WebAPI 指南\n\n*\n * [一、WebAPI 背景知识](#一、WebAPI 背景知识)\n *\n * [1.1 什么是 WebAPI](#1.1 什么是 WebAPI)\n * [1.2 什么是 API](#1.2 什么是 API)\n * [1.3 API 参考文档](#1.3 API 参考文档)\n * [二、DOM 基本概念](#二、DOM 基本概念)\n *\n * [2.1 什么是 DOM](#2.1 什么是 DOM)\n * [2.2 DOM 树](#2.2 DOM 树)\n * [2.3 重要概念](#2.3 重要概念)\n * [三、获取元素](#三、获取元素)\n *\n * [3.1\\`querySelector\\`](#3.1`querySelector`)\n * [3.2\\`querySelectorAll\\`](#3.2`querySelectorAll`)\n * [四、事件初识](#四、事件初识)\n *\n * [4.1 基本概念](#4.1 基本概念)\n * [4.2 事件三要素](#4.2 事件三要素)\n * [4.3 简单示例](#4.3 简单示例)\n * [五、操作元素](#五、操作元素)\n *\n * [5.1 获取/修改元素内容](#5.1 获取/修改元素内容)\n *\n * [5.1.1\\`innerText\\`](#5.1.1`innerText`)\n * [5.1.2\\`innerHTML\\`](#5.1.2`innerHTML`)\n * [5.2 获取/修改元素属性](#5.2 获取/修改元素属性)\n *\n * [5.2.1 获取属性](#5.2.1 获取属性)\n * [5.2.2 修改属性](#5.2.2 修改属性)\n * [5.3 获取/修改表单元素属性](#5.3 获取/修改表单元素属性)\n *\n * [5.3.1 表单元素属性](#5.3.1 表单元素属性)\n * [5.3.3 代码示例：点击计数](#5.3.3 代码示例：点击计数)\n * [5.4 获取/修改样式属性](#5.4 获取/修改样式属性)\n *\n * [5.4.1 行内样式操作](#5.4.1 行内样式操作)\n * [5.4.2 类名样式操作](#5.4.2 类名样式操作)\n * [六、操作节点](#六、操作节点)\n *\n *\n * [6.1.1 创建元素节点](#6.1.1 创建元素节点)\n * [6.1.2 插入节点到 DOM 树中](#6.1.2 插入节点到 DOM 树中)\n * [6.1.3 使用\\`insertBefore\\`](#6.1.3 使用`insertBefore`)\n * [6.2 删除节点](#6.2 删除节点)\n * [七、代码案例](#七、代码案例)\n *\n *\n * [7.1 猜数字游戏](#7.1 猜数字游戏)\n\n### 一、WebAPI 背景知识\n\n#### 1.1 什么是 WebAPI\n\nWebAPI 是 JavaScript 的重要组成部分，它包含了 DOM（文档对象模型）和 BOM（浏览器对象模型）。DOM 主要用于操作页面结构，BOM 用于操作浏览器窗口。WebAPI 是 W3C 组织规定的标准，是构建动态网页的基础。\n> 参考文档: [link](https://developer.mozilla.org/zh-CN/docs/Web/API)\n\n#### 1.2 什么是 API\n\nAPI（Application Programming Interface）是现成的函数和对象集合，供开发者使用。WebAPI 特指 DOM 和 BOM。API 可以看作是一个工具箱，帮助开发者快速实现功能。\n\n#### 1.3 API 参考文档\n\nMDN（Mozilla Developer Network）提供了丰富的 WebAPI 文档，可以通过以下链接访问： \n\n\\[MDN WebAPI 文档\\]([Web API \\| MDN](https://developer.mozilla.org/zh-CN/docs/Web/API#%E8%A7%84%E8%8C%83))\n\n### 二、DOM 基本概念\n\n#### 2.1 什么是 DOM\n\nDOM（Document Object Model）是 W3C 标准的一部分，提供了一系列函数，用于操作网页内容、结构和样式。DOM 将网页视为一个树形结构，称为 DOM 树。\n\n#### 2.2 DOM 树\n\n一个页面的结构是一个树形结构，形如：\n\n```html\n\u003Chtml>\n \u003Chead>\n \u003Ctitle>文档标题\u003C/title>\n \u003C/head>\n \u003Cbody>\n \u003Ca href=\"\">我的链接\u003C/a>\n \u003Ch1>我的标题\u003C/h1>\n \u003C/body>\n\u003C/html>\n```\n\nDOM 树结构形如：\n\n 文档\n ├── 根元素：\u003Chtml>\n │ ├── 元素：\u003Chead>\n │ │ └── 元素：\u003Ctitle>\n │ │ └── 文本：文档标题\n │ └── 元素：\u003Cbody>\n │ ├── 元素：\u003Ca>\n │ │ └── 属性：href\n │ │ └── 文本：我的链接\n │ └── 元素：\u003Ch1>\n │ └── 文本：我的标题\n\n#### 2.3 重要概念\n\n• 文档：一个页面是一个文档，使用`document`表示。\n\n• 节点：网页中所有的内容都可以称为节点（标签节点、注释节点、文本节点、属性节点等），使用`node`表示。\n\n### 三、获取元素\n\n#### 3.1`querySelector`\n\n`querySelector`是 HTML5 新增的方法，可以使用 CSS 选择器`获取页面中的元素`。返回文档中与指定选择器匹配的第一个元素。\n\n```javascript\nvar elem1 = document.querySelector('.box');\nvar elem2 = document.querySelector('#id');\nvar elem3 = document.querySelector('h3 span input');\n```\n\n#### 3.2`querySelectorAll`\n\n`querySelectorAll`返回文档中与指定选择器匹配的所有元素的列表。\n\n```javascript\nvar elems = document.querySelectorAll('div');\n```\n\n### 四、事件初识\n\n#### 4.1 基本概念\n\n事件是用户对页面的操作（如点击、选择、修改等），这些操作会在浏览器中产生事件，被 JavaScript 获取并处理。\n\n#### 4.2 事件三要素\n\n• 事件源：哪个元素触发的事件。\n\n• 事件类型：如点击、选中、修改等。\n\n• 事件处理程序：处理事件的函数。\n\n#### 4.3 简单示例\n\n```html\n\u003Cbutton id=\"btn\">点我一下\u003C/button>\n\u003Cscript>\n var btn = document.getElementById('btn');\n btn.onclick = function() {\n alert(\"hello world\");\n };\n\u003C/script>\n```\n\n### 五、操作元素\n\n#### 5.1 获取/修改元素内容\n\n##### 5.1.1`innerText`\n\n`innerText`表示一个节点及其后代的\"渲染\"文本内容。不识别 HTML 标签，是非标准的。\n\n```javascript\nvar div = document.querySelector('div');\nconsole.log(div.innerText); // 读取内容\ndiv.innerText = 'hello js \u003Cspan>hello js\u003C/span>'; // 修改内容\n```\n\n##### 5.1.2`innerHTML`\n\n`innerHTML`表示一个节点及其后代的 HTML 内容。识别 HTML 标签，是 W3C 标准的。\n\n```javascript\nvar div = document.querySelector('div');\nconsole.log(div.innerHTML); // 读取内容\ndiv.innerHTML = '\u003Cspan>hello js\u003C/span>'; // 修改内容\n```\n\n#### 5.2 获取/修改元素属性\n\n##### 5.2.1 获取属性\n\n可以通过`Element`对象的属性直接获取。\n\n```javascript\nvar img = document.querySelector('img');\nconsole.log(img.src); // 获取 src 属性\nconsole.log(img.title); // 获取 title 属性\nconsole.log(img.alt); // 获取 alt 属性\n```\n\n##### 5.2.2 修改属性\n\n可以直接修改`Element`对象的属性。\n\n```javascript\nvar img = document.querySelector('img');\nimg.onclick = function() {\n if (img.src.lastIndexOf('rose.jpg') !== -1) {\n img.src = './rose2.png';\n } else {\n img.src = './rose.jpg';\n }\n};\n```\n\n#### 5.3 获取/修改表单元素属性\n\n##### 5.3.1 表单元素属性\n\n表单元素（主要是`input`标签）的以下属性可以通过 DOM 修改：\n\n• `value`：输入框的值。\n\n• `disabled`：禁用状态。\n\n• `checked`：复选框的选中状态。\n\n• `selected`：下拉框的选中状态。\n\n• `type`：输入框的类型（文本、密码、按钮、文件等）。\n\n5.3.2 代码示例：切换按钮文本\n\n```html\n\u003Cinput type=\"button\" value=\"播放\">\n\u003Cscript>\n var btn = document.querySelector('input');\n btn.onclick = function() {\n if (btn.value === '播放') {\n btn.value = '暂停';\n } else {\n btn.value = '播放';\n }\n };\n\u003C/script>\n```\n\n##### 5.3.3 代码示例：点击计数\n\n```html\n\u003Cinput type=\"text\" id=\"text\" value=\"0\">\n\u003Cinput type=\"button\" id=\"btn\" value='点我+1'>\n\u003Cscript>\n var text = document.querySelector('#text');\n var btn = document.querySelector('#btn');\n btn.onclick = function() {\n var num = +text.value;\n num++;\n text.value = num;\n };\n\u003C/script>\n```\n\n#### 5.4 获取/修改样式属性\n\n##### 5.4.1 行内样式操作\n\n通过`style`属性操作行内样式。\n\n```javascript\nvar div = document.querySelector('div');\ndiv.onclick = function() {\n var curFontSize = parseInt(this.style.fontSize);\n curFontSize += 10;\n this.style.fontSize = curFontSize + 'px';\n};\n```\n\n##### 5.4.2 类名样式操作\n\n通过`className`属性操作类名样式。\n\n```javascript\nvar div = document.querySelector('div');\ndiv.onclick = function() {\n if (div.className.indexOf('light') !== -1) {\n div.className = 'container dark';\n } else {\n div.className = 'container light';\n }\n};\n```\n\n### 六、操作节点\n\n###6.1 新增节点\n\n##### 6.1.1 创建元素节点\n\n使用`document.createElement`创建元素节点。\n\n```javascript\nvar div = document.createElement('div');\ndiv.id = 'mydiv';\ndiv.className = 'box';\ndiv.innerHTML = 'hehe';\nconsole.log(div);\n```\n\n##### 6.1.2 插入节点到 DOM 树中\n\n使用`appendChild`将节点插入到指定节点的最后一个孩子之后。\n\n```javascript\nvar container = document.querySelector('.container');\ncontainer.appendChild(div);\n```\n\n##### 6.1.3 使用`insertBefore`\n\n使用`insertBefore`将节点插入到指定节点之前。\n\n```javascript\nvar newDiv = document.createElement('div');\nnewDiv.innerHTML = '我是新的节点';\nvar container = document.querySelector('.container');\ncontainer.insertBefore(newDiv, container.children[0]);\n```\n\n##### 6.2 删除节点\n\n使用`removeChild`删除子节点。\n\n```javascript\nvar container = document.querySelector('.container');\nvar child = container.children[0];\ncontainer.removeChild(child);\n```\n\n### 七、代码案例\n\n##### 7.1 猜数字游戏\n\n```html\n\u003Cbutton type=\"button\" id=\"reset\">重新开始一局游戏\u003C/button>\u003Cbr>\n\u003Cinput type=\"text\" id=\"guess\">\n\u003Cbutton type=\"button\" id=\"button\">猜\u003C/button>\n\u003Cbr>\n已经猜的次数：\u003Cspan id=\"count\">0\u003C/span>\n\u003Cbr>\n结果：\u003Cspan id=\"result\">\u003C/span>\n\u003Cscript>\n var inputE = document.querySelector('#guess');\n var countE = document.querySelector('#count');\n var resultE = document.querySelector('#result');\n var btn = document.querySelector('#button');\n var resetBtn = document.querySelector('#reset');\n var guessNumber = Math.floor(Math.random() * 100) + 1;\n var count = 0;\n\n btn.onclick = function() {\n var userGuess = parseInt(inputE.value, 10);\n if (isNaN(userGuess)) {\n resultE.innerText = '请输入一个有效的数字！';\n return;\n }\n count++;\n countE.innerText = count;\n\n if (userGuess === guessNumber) {\n resultE.innerText = '恭喜你猜对了！';\n } else if (userGuess \u003C guessNumber) {\n resultE.innerText = '太小了，再试一次！';\n } else {\n resultE.innerText = '太大了，再试一次！';\n }\n };\n\n resetBtn.onclick = function() {\n guessNumber = Math.floor(Math.random() * 100) + 1;\n count = 0;\n countE.innerText = count;\n resultE.innerText = '';\n inputE.value = '';\n };\n\u003C/script>\n\n```\n\n","1966570213333843970","DevilSeagull","https://i-avatar.csdnimg.cn/c079bc3b34bf4ef0ab9f2dcdb3b12f9c_2501_92963994.jpg",[331,332,335,336,339,342],{"id":225,"name":226},{"id":333,"name":334},13,"开发语言",{"id":209,"name":210},{"id":337,"name":338},353,"html",{"id":340,"name":341},410,"ecmascript",{"id":343,"name":344},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":348,"title":349,"description":350,"imgUrl":351,"views":352},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",28,{"id":354,"title":355,"description":356,"imgUrl":357,"views":358},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",9,["Reactive",360],{"$sisPC2":361},false,["Set"],["ShallowReactive",364],{"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":-1,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":-1,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":-1,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":-1,"qIlciY345ekoW5xxI7HGGLS3X9-8cAkpz62K8bBlpdM":-1},true,"/article/1966570208967573505"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{env:"prod",apiRootUrl:"https://jishuzhan.net/api"},app:{baseURL:"/",buildId:"ab5c42e1-054a-430d-b75b-67d3003b8fad",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>