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/2043339779329294337" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>PD我是你的真爱粉</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>14 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>MCP 协议详解：从架构、工作流到 Python 技术栈落地</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>python</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>架构</span><!--]--><!--]--></div></a><a href="/article/2043334402336423937" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>win x</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>15 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Redis 使用~如何在Java中连接使用redis</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>redis</span><!--]--><!--]--></div></a><a href="/article/2043332821008318466" 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>15 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>基于 @Resource 的支付 Service 多实现类完整示例</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><!--]--><!--]--></div></a><a href="/article/2043331097140985857" 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>15 小时前</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>juc</span><!--]--><!--]--></div></a><a href="/article/2043326907249393666" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>ACP广源盛13924625673</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>15 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>破局 Type‑C 切换器痛点@ACP#GSV6155+LH3828/GSV2221+LH3828 黄金方案</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>c语言</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><!--]--><!--[--><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><!--]--><!--[--><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/2043324667038072833" 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>15 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>html网页设计适合新手的学习路线总结</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>html</span><!--]--><!--]--></div></a><a href="/article/2043323681280163841" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>killerbasd</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>15 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>牧苏苏传 我不装了 4/7</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/2043323253666676738" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Ricky_Theseus</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>15 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>C++右值引用</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>c++</span><!--]--><!--]--></div></a><a href="/article/2043321056199507969" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Rick1993</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>16 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Java内存参数解析</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>jvm</span><!--]--><!--]--></div></a><a href="/article/2043319801863536642" 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>16 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>ES6——二进制数组详解</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>ecmascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>es6</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/2043203527510654978" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>01</span><span class="article-title" data-v-9f329d47>2026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元</span></a><a href="/article/2041308612400840705" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛</span></a><a href="/article/1965957555249266689" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>GitHub 镜像站点</span></a><a href="/article/2042778439145553922" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南</span></a><a href="/article/2042525654294528001" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析</span></a><a href="/article/2041697701113430017" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手</span></a><a href="/article/2040630071680569345" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>Oh My Codex 快速使用指南</span></a><a href="/article/2039708959719297026" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）</span></a><a href="/article/2039604772327133185" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程</span></a><a href="/article/2037738496102825986" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南</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":367,"once":370,"_errors":371,"serverRendered":373,"path":374},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":173,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":334,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":336},[5,22,40,53,73,86,106,119,135,149],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":21},"2043203527510654978","2026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元","本文基于2026年4月最新技术动态，涵盖AI大模型、智能体框架、量子计算、网络安全等前沿领域。所有技术内容仅供学习交流，实际应用需结合具体业务场景。","https://i-blog.csdnimg.cn/direct/839f0cd343ed49398ed5aa4fae7704fe.png",648,"1783013904767520769","小二·","https://file.jishuzhan.net/user/1783013904767520769/head.webp",[15,18],{"id":16,"name":17},39,"人工智能",{"id":19,"name":20},102,"安全",1775972656000,{"id":23,"title":24,"description":25,"imgUrl":26,"views":27,"ownerId":28,"ownerName":29,"ownerHeadUrl":30,"tagList":31,"time":39},"2041308612400840705","一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛","过去一周（2026.03.31 - 04.06），AI 领域迎来多个重磅事件。本文梳理本周最值得关注的 AI 热点，重点事件附详细解读。","",1785,"1696785431913304066","郑板桥30","https://file.jishuzhan.net/user/1696785431913304066/head.png",[32,33,36],{"id":16,"name":17},{"id":34,"name":35},70,"gpt",{"id":37,"name":38},435,"aigc",1775520873000,{"id":41,"title":42,"description":43,"imgUrl":26,"views":44,"ownerId":45,"ownerName":46,"ownerHeadUrl":47,"tagList":48,"time":52},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。",70231,"1851173111697772545","BillKu","https://profile-avatar.csdnimg.cn/default.jpg",[49],{"id":50,"name":51},424,"github",1757555781000,{"id":54,"title":55,"description":56,"imgUrl":57,"views":58,"ownerId":59,"ownerName":60,"ownerHeadUrl":61,"tagList":62,"time":72},"2042778439145553922","基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南","在 AI 技术快速发展的今天，将大模型能力接入企业办公系统已经成为一种趋势。无论是智能问答、自动化办公，还是企业知识库，AI 助手都能极大提升效率。而如何快速、稳定地部署一个可用的 AI 系统，是许多开发者面临的第一道门槛。","https://i-blog.csdnimg.cn/direct/60f624f08f844b49a47c63ffdf99e837.png",387,"1696358494237626369","cooldream2009","https://file.jishuzhan.net/user/1696358494237626369/head.png",[63,66,69],{"id":64,"name":65},185,"docker",{"id":67,"name":68},774,"飞书",{"id":70,"name":71},138066,"hermes",1775871307000,{"id":74,"title":75,"description":76,"imgUrl":77,"views":78,"ownerId":79,"ownerName":80,"ownerHeadUrl":81,"tagList":82,"time":85},"2042525654294528001","AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析","数据来自GitHub Trending（周榜），截至2026年4月9日。本周AI相关项目几乎占据前十，Python与TypeScript两大生态双雄并进。","https://i-blog.csdnimg.cn/direct/84c9619dbde244b4a0d6f207545b4249.png",229,"1733328286076899329","GISer_Jing","https://file.jishuzhan.net/user/1733328286076899329/head.webp",[83,84],{"id":16,"name":17},{"id":50,"name":51},1775811038000,{"id":87,"title":88,"description":89,"imgUrl":90,"views":91,"ownerId":92,"ownerName":93,"ownerHeadUrl":94,"tagList":95,"time":105},"2041697701113430017","免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手","关注我的公众号：【编程朝花夕拾】，可获取首发内容。想用上顶级的 AI 编程模型，又不想花一分钱？英伟达（NVIDIA）的 NIM 平台提供了一个“隐藏福利”——完全免费的 API 额度，不仅支持 DeepSeek、GLM-5、MiniMax 等热门模型.","https://oss.xyyzone.com/jishuzhan/article/2041697701113430017/057a401273e380ff2357139ffeea5719.webp",294,"1718926217144438786","SimonKing","https://file.jishuzhan.net/user/1718926217144438786/head.webp",[96,99,102],{"id":97,"name":98},3,"java",{"id":100,"name":101},55,"后端",{"id":103,"name":104},232,"程序员",1775613639000,{"id":107,"title":108,"description":109,"imgUrl":26,"views":110,"ownerId":111,"ownerName":112,"ownerHeadUrl":113,"tagList":114,"time":118},"2040630071680569345","Oh My Codex 快速使用指南","如果你已经在使用 OpenAI Codex CLI，但希望它在真实项目里更像一个“会规划、会拆解、会持续推进”的协作搭档，那么 oh-my-codex 值得一试。",568,"1807404372926140417","xjt_0901","https://profile-avatar.csdnimg.cn/24dbf16f5b53478fbc09ce00ddecedf6_a2274001782.jpg",[115],{"id":116,"name":117},44,"windows",1775359096000,{"id":120,"title":121,"description":122,"imgUrl":26,"views":123,"ownerId":124,"ownerName":125,"ownerHeadUrl":126,"tagList":127,"time":134},"2039708959719297026","VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）","适用系统：Windows 10/11 64位 | 适用版本：VMware Workstation Pro 17.5.x（主流稳定版） 本文为保姆级实操教程，全程截图对应步骤，解决90%新手常见坑，可直接用于虚拟机搭建Linux、Windows、MacOS等系统。",786,"2038068557246955521","祭曦念","https://i-avatar.csdnimg.cn/d76957c413724baf8686750e45f20a30_m0_67000457.jpg",[128,131],{"id":129,"name":130},142,"支持向量机",{"id":132,"name":133},1080,"个人开发",1775139486000,{"id":136,"title":137,"description":138,"imgUrl":26,"views":139,"ownerId":140,"ownerName":141,"ownerHeadUrl":142,"tagList":143,"time":148},"2039604772327133185","OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程","昨晚用 OpenClaw 跑长文本生成任务，跑到一半控制台突然蹦出来 llm request timed out，整个 Agent 链路直接断了。我以为是网络抖了，重试了几次还是一样。折腾到凌晨两点，把能踩的坑都踩了一遍，总算搞清楚怎么回事了。",1112,"2032013180935929857","与虾牵手","https://p3-passport.byteacctimg.com/img/user-avatar/a5b30302fe8c35bee86a50b48e819d88~300x300.image",[144,145],{"id":37,"name":38},{"id":146,"name":147},1235,"ai编程",1775114646000,{"id":150,"title":151,"description":152,"imgUrl":153,"views":154,"ownerId":155,"ownerName":156,"ownerHeadUrl":157,"tagList":158,"time":172},"2037738496102825986","CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南","在AI办公与开发效率工具爆发的当下，腾讯推出了CodeBuddy和WorkBuddy两款AI产品，二者同属腾讯云代码助手生态，共享账号体系与Credits资源，但定位和核心能力截然不同。CodeBuddy聚焦程序员开发效率提升，是开发者的专属AI编程助手；WorkBuddy则是公测中的全场景AI办公智能体桌面工作台，面向所有知识工作者，打造“能干活、可交付”的AI同事。本文将从介绍、下载安装、功能介绍、使用案例、注意事项五个维度，全面解析两款工具的差异，帮你精准选择适配自身场景的AI工具。","https://i-blog.csdnimg.cn/direct/87ac3f32bbf645fc8debd42742c0bf60.png",745,"1689276024019226625","AnyaPapa","https://file.jishuzhan.net/user/1689276024019226625/head.png",[159,160,163,166,169],{"id":16,"name":17},{"id":161,"name":162},90348,"codebuddy",{"id":164,"name":165},126452,"openclaw",{"id":167,"name":168},132240,"workbuddy",{"id":170,"name":171},135393,"ai龙虾",1774669691000,[174,193,211,222,235,261,273,290,304,318],{"id":175,"title":176,"description":177,"imgUrl":26,"views":178,"ownerId":179,"ownerName":180,"ownerHeadUrl":181,"tagList":182,"time":192},"2043339779329294337","MCP 协议详解：从架构、工作流到 Python 技术栈落地","你有没有发现，大模型真正难做的，从来不是“能不能回答问题”，而是：这背后真正考察的，其实不是“某个模型会不会调用函数”，而是：AI 系统如何以一种标准化、可组合、可治理的方式连接外部世界。",0,"1799089748724158466","PD我是你的真爱粉","https://profile-avatar.csdnimg.cn/604039edff50424391dc2bb53ac96366_weixin_52185313.jpg",[183,186,189],{"id":184,"name":185},13,"开发语言",{"id":187,"name":188},58,"python",{"id":190,"name":191},238,"架构",1776005141000,{"id":194,"title":195,"description":196,"imgUrl":197,"views":198,"ownerId":199,"ownerName":200,"ownerHeadUrl":201,"tagList":202,"time":210},"2043334402336423937","Redis 使用~如何在Java中连接使用redis","Redis的使用此篇需要有前置linux虚拟机相关知识，此篇借助xshell，依据虚拟机云服务器上的redis实现跨主机联通，此篇不介绍多余废话，具体详情指令，可以去官网查询","https://i-blog.csdnimg.cn/direct/51d6fa2a39084cde809eb7e0a5f6574c.png",1,"1857284970691694593","win x","https://profile-avatar.csdnimg.cn/18f13856be1c494cbd80d1c85d917d6d_2302_80192828.jpg",[203,204,207],{"id":97,"name":98},{"id":205,"name":206},25,"数据库",{"id":208,"name":209},49,"redis",1776003859000,{"id":212,"title":213,"description":214,"imgUrl":26,"views":178,"ownerId":215,"ownerName":216,"ownerHeadUrl":217,"tagList":218,"time":221},"2043332821008318466","基于 @Resource 的支付 Service 多实现类完整示例","一个类只能做一件事！","1943103400744366081","星晨雪海","https://profile-avatar.csdnimg.cn/55eb82f3692c4adfbb92aa6adb29e781_m0_60599807.jpg",[219,220],{"id":97,"name":98},{"id":184,"name":185},1776003482000,{"id":223,"title":224,"description":225,"imgUrl":26,"views":178,"ownerId":226,"ownerName":227,"ownerHeadUrl":228,"tagList":229,"time":234},"2043331097140985857","什么是逃逸分析","逃逸分析的核心目的就是判断有没有多线程竞争,如果没有多线程竞争,就会删除锁,提高性能它的核心任务是：分析一个在方法内创建的对象，它的生命周期是否会超出这个方法的范围（即“逃出”当前方法的控制）。","1689465836399497218","阿维的博客日记","https://file.jishuzhan.net/user/1689465836399497218/head.jpeg",[230,231],{"id":97,"name":98},{"id":232,"name":233},4505,"juc",1776003071000,{"id":236,"title":237,"description":26,"imgUrl":238,"views":198,"ownerId":239,"ownerName":240,"ownerHeadUrl":241,"tagList":242,"time":260},"2043326907249393666","破局 Type‑C 切换器痛点@ACP#GSV6155+LH3828/GSV2221+LH3828 黄金方案","https://i-blog.csdnimg.cn/direct/5682d71bbd4d4d7db155b02ffd21e78b.jpeg","1978877503344279554","ACP广源盛13924625673","https://i-avatar.csdnimg.cn/31354cd986484c4bb94564c2fe8801d1_2402_88216294.jpg",[243,246,247,250,251,254,257],{"id":244,"name":245},12,"c语言",{"id":184,"name":185},{"id":248,"name":249},17,"网络",{"id":16,"name":17},{"id":252,"name":253},68,"嵌入式硬件",{"id":255,"name":256},364,"计算机外设",{"id":258,"name":259},441,"电脑",1776002072000,{"id":262,"title":263,"description":264,"imgUrl":265,"views":178,"ownerId":266,"ownerName":267,"ownerHeadUrl":47,"tagList":268,"time":272},"2043324667038072833","html网页设计适合新手的学习路线总结","我们先来看一个问题：html 网页设计入门需要背完所有 CSS 属性吗？答案是：当然不需要！真正厉害的前端，从来不是靠死记硬背，而是：","https://i-blog.csdnimg.cn/direct/e63a31e5c08b46dba69bf5813e6a099b.png","2040376012121837569","周末也要写八哥",[269],{"id":270,"name":271},353,"html",1776001538000,{"id":274,"title":275,"description":276,"imgUrl":26,"views":178,"ownerId":277,"ownerName":278,"ownerHeadUrl":47,"tagList":279,"time":289},"2043323681280163841","牧苏苏传 我不装了 4/7","今天主要是看了面经和折腾调剂，好吧其实还有踢球。1.vue的响应式机制是怎么实现的？vue3相对vue2有什么进步？","2036248627803389954","killerbasd",[280,283,286],{"id":281,"name":282},14,"前端",{"id":284,"name":285},15,"javascript",{"id":287,"name":288},36,"vue.js",1776001303000,{"id":291,"title":292,"description":293,"imgUrl":26,"views":178,"ownerId":294,"ownerName":295,"ownerHeadUrl":296,"tagList":297,"time":303},"2043323253666676738","C++右值引用","右值引用是C++11引入的重要特性，用于标识临时对象或即将被销毁的对象。语法形式为T&&，其中T代表类型。右值引用允许高效转移资源所有权，避免不必要的拷贝操作。","2037688217630212098","Ricky_Theseus","https://profile-avatar.csdnimg.cn/7f5d278e3c3249709186e54ea2d6ce3b_rick_theseusr.jpg",[298,299,300],{"id":97,"name":98},{"id":184,"name":185},{"id":301,"name":302},27,"c++",1776001201000,{"id":305,"title":306,"description":307,"imgUrl":26,"views":178,"ownerId":308,"ownerName":309,"ownerHeadUrl":310,"tagList":311,"time":317},"2043321056199507969","Java内存参数解析","这三个是 JVM（Java虚拟机）最核心的内存调优参数，专门用来控制Java程序占用的内存大小、行为模式，我用最通俗的方式给你讲清楚：","2025125975269376001","Rick1993","https://profile-avatar.csdnimg.cn/ae686c4279b744a2bd519d9d097d0f48_thqtzq.jpg",[312,313,314],{"id":97,"name":98},{"id":184,"name":185},{"id":315,"name":316},23,"jvm",1776000677000,{"id":319,"title":320,"description":321,"imgUrl":26,"views":178,"ownerId":322,"ownerName":323,"ownerHeadUrl":324,"tagList":325,"time":333},"2043319801863536642","ES6——二进制数组详解","二进制数组（ArrayBuffer对象、TypedArray视图和DataView视图）是JavaScript操作二进制数据的一个接口。这些对象早就存在，属于独立的规格（2011年2月发布），ES6将它们纳入了ECMAScript规格，并且增加了新的方法。","1769818496771821570","吴声子夜歌","https://file.jishuzhan.net/user/1769818496771821570/head.webp",[326,327,330],{"id":281,"name":282},{"id":328,"name":329},410,"ecmascript",{"id":331,"name":332},469,"es6",1776000378000,{"adMap":335},["Map"],{"id":337,"title":338,"description":339,"content":340,"imgUrl":26,"views":178,"ownerId":341,"ownerName":342,"ownerHeadUrl":343,"tagList":344,"time":353,"articleSourceUrl":354,"preArticle":355,"nextArticle":361},"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",[345,346,347,348,349,350],{"id":97,"name":98},{"id":184,"name":185},{"id":284,"name":285},{"id":270,"name":271},{"id":328,"name":329},{"id":351,"name":352},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":356,"title":357,"description":358,"imgUrl":359,"views":360},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",28,{"id":362,"title":363,"description":364,"imgUrl":365,"views":366},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",9,["Reactive",368],{"$sisPC2":369},false,["Set"],["ShallowReactive",372],{"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>