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/2035987550276485121" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Meepo_haha</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>几秒前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>创建Spring Initializr项目</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>spring</span><!--]--><!--]--></div></a><a href="/article/2035987466507845634" 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>C++中的 lower_bound 和 upper_bound：一篇讲清楚</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/2035987193181831170" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Memory_荒年</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>SpringBoot事务源码深度游：从注解到数据库的“奇幻漂流”</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>spring</span><!--]--><!--]--></div></a><a href="/article/2035986429734617090" 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>5 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>为什么要用SpringBoot</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/2035986057167175681" 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>7 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Java面向对象编程知识补充学习-2026.3.21</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/2035985746843205634" 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>8 分钟前</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>开发语言</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><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>nullptr</span><!--]--><!--]--></div></a><a href="/article/2035985595865038849" 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>8 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>protobuf万字总结(C++)</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>c++</span><!--]--><!--]--></div></a><a href="/article/2035985578932633602" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>m0_66257797</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>9 分钟前</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>开发语言</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>c++</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>算法</span><!--]--><!--]--></div></a><a href="/article/2035984832635928577" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>2301_81016095</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>11 分钟前</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>c++</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>算法</span><!--]--><!--]--></div></a><a href="/article/2035984144052846593" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Memory_荒年</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>SpringBoot事务：从“一键开关”到“踩坑大全”的生存指南</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>spring</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/2031760291734814721" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南</span></a><a href="/article/2034802450201378818" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>围棋-html版本</span></a><a href="/article/2026477498947665921" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）</span></a><a href="/article/2034914714883522561" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>班级宠物园部署指南</span></a><a href="/article/2026151995774664706" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>OpenClaw 使用和管理 MCP 完全指南</span></a><a href="/article/2032719063563173890" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>OpenClaw Control UI安全上下文访问配置</span></a><a href="/article/2021893119294373890" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南</span></a><a href="/article/1950564991094009857" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>UV安装并设置国内源</span></a><a href="/article/1920068379826835457" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）</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":352,"once":355,"_errors":356,"serverRendered":358,"path":359},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":174,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":176,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":318},[5,19,47,64,78,92,107,127,141,158],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":18},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。","",60790,"1851173111697772545","BillKu","https://profile-avatar.csdnimg.cn/default.jpg",[15],{"id":16,"name":17},424,"github",1757555781000,{"id":20,"title":21,"description":22,"imgUrl":9,"views":23,"ownerId":24,"ownerName":25,"ownerHeadUrl":26,"tagList":27,"time":46},"2031760291734814721","Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南","2026 年除夕夜，阿里通义千问正式发布Qwen3.5 开源模型家族，从 0.8B 端侧小模型到 397B 旗舰 MoE 模型全覆盖。本文深度对比 Qwen3.5 与前代 Qwen3 的核心升级，拆解全参数版本差异、优势与落地场景，帮开发者快速选型、高效部署。",2106,"1983460926746591233","人工智能训练","https://i-avatar.csdnimg.cn/6ce60c66fb9042b88c53dc03d9971cb1_2501_93651177.jpg",[28,31,34,37,40,43],{"id":29,"name":30},9,"linux",{"id":32,"name":33},10,"运维",{"id":35,"name":36},11,"服务器",{"id":38,"name":39},39,"人工智能",{"id":41,"name":42},322,"开源",{"id":44,"name":45},1235,"ai编程",1773244376000,{"id":48,"title":49,"description":50,"imgUrl":51,"views":52,"ownerId":53,"ownerName":54,"ownerHeadUrl":55,"tagList":56,"time":63},"2034802450201378818","围棋-html版本","一、界面布局软件采用左右两栏布局，左侧为棋盘及信息区，右侧为垂直排列的功能按钮，整体风格古典雅致。二、核心对局功能1. 落子规则","https://i-blog.csdnimg.cn/direct/faa98a8aa77646558913d5febf5a2db9.png",426,"1810583484050182146","数据服务生","https://profile-avatar.csdnimg.cn/dd3cdbd70cae4ee7a3655a60ade6902e_cc605523.jpg",[57,60],{"id":58,"name":59},14,"前端",{"id":61,"name":62},353,"html",1773969683000,{"id":65,"title":66,"description":67,"imgUrl":68,"views":69,"ownerId":70,"ownerName":71,"ownerHeadUrl":72,"tagList":73,"time":77},"2026477498947665921","小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）","2026年上半年全国计算机等级考试将于3月28-30日举行。小编特别整理了最新版（适用于2026年3月备考）的小黑课堂计算机二级WPS Office电脑题库软件安装包，含14套历年真题，轻松应对考试、顺利通关！","https://i-blog.csdnimg.cn/img_convert/bc5fb0904da94a7c1529b2e24ebc913c.png",1541,"1977929683061768193","南风微微吹","https://profile-avatar.csdnimg.cn/87343cbc8cbe464e93b217586c17c605_weixin_55690020.jpg",[74],{"id":75,"name":76},118314,"计算机二级wps",1771984860000,{"id":79,"title":80,"description":81,"imgUrl":82,"views":83,"ownerId":84,"ownerName":85,"ownerHeadUrl":86,"tagList":87,"time":91},"2034914714883522561","班级宠物园部署指南","班级宠物园（class-pet-garden）是一款面向中小学教师的游戏化班级管理工具，将传统的积分评价系统与电子宠物养成玩法相结合，让班级管理变得更有趣。本文将详细介绍该项目的部署安装步骤和使用方法，帮助你快速搭建并使用这个工具。","https://i-blog.csdnimg.cn/direct/ebc675db30704685b4a0ca670a848381.png",357,"1811004465608658946","翘着二郎腿的程序猿","https://profile-avatar.csdnimg.cn/7eab59a2bbbe4389beb0233e3878a8f2_qq_36248777.jpg",[88],{"id":89,"name":90},5447,"宠物",1773996449000,{"id":93,"title":94,"description":95,"imgUrl":9,"views":96,"ownerId":97,"ownerName":98,"ownerHeadUrl":99,"tagList":100,"time":106},"2026151995774664706","OpenClaw 使用和管理 MCP 完全指南","OpenClaw（原名 Clawdbot）是一款开源的本地 AI 智能体框架，在 GitHub 上拥有超过 180K 星标。MCP（Model Context Protocol）是由 Anthropic 推出的一种开放标准协议，旨在让 AI 模型通过统一接口连接各种外部工具和数据源。通过配置 MCP，OpenClaw 可以直接访问本地文件系统、数据库、GitHub 仓库，甚至 Google Drive 和 Slack 等服务。",4040,"1845262207491772418","aiAIman","https://profile-avatar.csdnimg.cn/329ca119ed654c5c96c0aa1bef849331_coolyoung520.jpg",[101,102,105],{"id":38,"name":39},{"id":103,"name":104},202,"语言模型",{"id":41,"name":42},1771907254000,{"id":108,"title":109,"description":110,"imgUrl":111,"views":112,"ownerId":113,"ownerName":114,"ownerHeadUrl":115,"tagList":116,"time":126},"2032719063563173890","OpenClaw Control UI安全上下文访问配置","在树莓派本机访问时没有问题，现在局域网另一台PC访问，出现如下界面：当从局域网其他设备（如手机、笔记本）访问 OpenClaw Web UI 时，出现：","https://i-blog.csdnimg.cn/img_convert/b72d1f592a0edbc17c8173d4759e43aa.png",702,"1878248130936311810","国产化创客","https://profile-avatar.csdnimg.cn/0be9afb409c34fd1beb622551306bc50_tony_shen.jpg",[117,120,123],{"id":118,"name":119},189,"ai",{"id":121,"name":122},11809,"webui",{"id":124,"name":125},126452,"openclaw",1773472965000,{"id":128,"title":129,"description":130,"imgUrl":9,"views":131,"ownerId":132,"ownerName":133,"ownerHeadUrl":134,"tagList":135,"time":140},"2021893119294373890","AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南","本文将深入介绍 GitHub 官方的 Spec-Kit、社区热门的 OpenSpec 以及跨平台方法论工具 Superpowers 三个 AI 编程辅助工具，从安装配置到实战使用，再到三者协同的最佳实践，带你全面掌握 AI 驱动的规格化开发新范式。",686,"1701145703671140354","小碗细面","https://file.jishuzhan.net/user/1701145703671140354/head.jpeg",[136,139],{"id":137,"name":138},435,"aigc",{"id":44,"name":45},1770891859000,{"id":142,"title":143,"description":144,"imgUrl":145,"views":146,"ownerId":147,"ownerName":148,"ownerHeadUrl":149,"tagList":150,"time":157},"1950564991094009857","UV安装并设置国内源","国内网络问题无法下载解决方案 来到github下载自己对应系统的包： https://github.com/astral-sh/uv/releases","https://i-blog.csdnimg.cn/direct/f35ac3e06c9448d38fa3eb735254c454.png",22862,"1684403235311325185","落魄实习生","https://file.jishuzhan.net/user/1684403235311325185/head.png",[151,154],{"id":152,"name":153},58,"python",{"id":155,"name":156},4529,"uv",1753885908000,{"id":159,"title":160,"description":161,"imgUrl":162,"views":163,"ownerId":164,"ownerName":165,"ownerHeadUrl":166,"tagList":167,"time":173},"1920068379826835457","“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）","从中国地区通过 wsl --install 或 Microsoft Store 安装 WSL 发行版（如 Ubuntu）时，下载速度往往非常慢，甚至卡在 0% 很久。这是因为微软服务器在国内访问速度受限。","https://i-blog.csdnimg.cn/direct/3557da67a90943928404cb2348cc07ef.png",2045,"1739213703015829505","熊明才","https://file.jishuzhan.net/user/1739213703015829505/head.webp",[168,169,170],{"id":29,"name":30},{"id":32,"name":33},{"id":171,"name":172},117,"ubuntu",1746614949000,{"adMap":175},["Map"],[177,197,213,225,236,252,275,287,298,308],{"id":178,"title":179,"description":180,"imgUrl":181,"views":182,"ownerId":183,"ownerName":184,"ownerHeadUrl":185,"tagList":186,"time":196},"2035987550276485121","创建Spring Initializr项目","1.首先确保计算机上安装了JDK、IDEA、MySQL数据库等开发需要使用的软件，并在IDEA中配置了Maven 3.6.3项目管理工具。","https://i-blog.csdnimg.cn/blog_migrate/5e3bf328a4c81f6e5be5b13a2010cfc7.png",1,"2034066209021427714","Meepo_haha","https://profile-avatar.csdnimg.cn/6359e0a46e6a46b984f137db8351a084_yedeming001.jpg",[187,190,193],{"id":188,"name":189},3,"java",{"id":191,"name":192},55,"后端",{"id":194,"name":195},110,"spring",1774252233000,{"id":198,"title":199,"description":200,"imgUrl":9,"views":182,"ownerId":201,"ownerName":202,"ownerHeadUrl":203,"tagList":204,"time":212},"2035987466507845634","C++中的 lower_bound 和 upper_bound：一篇讲清楚","在刷题或者写代码的时候，lower_bound 和 upper_bound 是两个非常高频但又容易用错的函数。很多人知道“能用”，但不知道“为什么这样用”。","2019265560619040769","会编程的土豆","https://i-avatar.csdnimg.cn/d5da5258ef5d43cda14e060d9186bd3e_lihaoweiwudi_.jpg",[205,206,209],{"id":188,"name":189},{"id":207,"name":208},24,"数据结构",{"id":210,"name":211},97,"算法",1774252213000,{"id":214,"title":215,"description":216,"imgUrl":9,"views":182,"ownerId":217,"ownerName":218,"ownerHeadUrl":219,"tagList":220,"time":224},"2035987193181831170","SpringBoot事务源码深度游：从注解到数据库的“奇幻漂流”","各位Java大侠，上回我们聊了SpringBoot事务的“表面功夫”，今天咱们来个深度解剖，看看当你潇洒地写下@Transactional时，SpringBoot在背后到底干了多少“脏活累活”。准备好你的IDE，咱们一起开启源码之旅！🚀","1716392092772601858","Memory_荒年","https://file.jishuzhan.net/user/1716392092772601858/head.webp",[221,222,223],{"id":188,"name":189},{"id":191,"name":192},{"id":194,"name":195},1774252148000,{"id":226,"title":227,"description":228,"imgUrl":9,"views":182,"ownerId":229,"ownerName":230,"ownerHeadUrl":231,"tagList":232,"time":235},"2035986429734617090","为什么要用SpringBoot","Spring Boot 是目前 Java 企业级开发中最流行的框架之一，它基于 Spring 框架，通过自动配置、起步依赖和嵌入式服务器等设计，极大地简化了 Spring 应用的搭建和开发过程。下面从背景、核心特性、启动流程、自动配置原理、与 Spring 的关系以及最佳实践等方面进行详细讲解。","2035182993418027010","编码忘我","https://p3-passport.byteacctimg.com/img/mosaic-legacy/3792/5112637127~300x300.image",[233,234],{"id":188,"name":189},{"id":191,"name":192},1774251966000,{"id":237,"title":238,"description":239,"imgUrl":240,"views":182,"ownerId":241,"ownerName":242,"ownerHeadUrl":13,"tagList":243,"time":251},"2035986057167175681","Java面向对象编程知识补充学习-2026.3.21","在 Java 方法中直接使用变量时，查找顺序遵循就近原则：如果方法内局部变量与成员变量同名，会优先使用局部变量，这也是变量名冲突的根源。","https://i-blog.csdnimg.cn/direct/5e2c3ec9ba554612a15c9060105d76c0.png","1858439238668783617","神舟之光",[244,245,248],{"id":188,"name":189},{"id":246,"name":247},13,"开发语言",{"id":249,"name":250},84,"学习",1774251877000,{"id":253,"title":254,"description":255,"imgUrl":256,"views":182,"ownerId":257,"ownerName":258,"ownerHeadUrl":259,"tagList":260,"time":274},"2035985746843205634","C++入门学习","目录C++入门1.namespace命名空间2.C++的输入与输出3.缺省参数4.函数重载5.引用5.1引用和指针的关系","https://i-blog.csdnimg.cn/direct/4afbb80117a94fe589cb7b79d3346d12.png","2035985751998005249","奶人五毛拉人一块","https://i-avatar.csdnimg.cn/4f7137c30bcb47c1b70173f536046c31_2401_87804979.jpg",[261,262,265,268,271],{"id":246,"name":247},{"id":263,"name":264},27,"c++",{"id":266,"name":267},2281,"函数重载",{"id":269,"name":270},2653,"入门",{"id":272,"name":273},7996,"nullptr",1774251803000,{"id":276,"title":277,"description":278,"imgUrl":279,"views":182,"ownerId":280,"ownerName":281,"ownerHeadUrl":282,"tagList":283,"time":286},"2035985595865038849","protobuf万字总结(C++)","目录protobuf介绍安装protobufWindows下安装(x64为例)Linux下安装(Ubuntu22.04为例)","https://i-blog.csdnimg.cn/direct/beb3737ad6ea4d11afc6845022eea900.png","1796735760422932482","吃不饱的得可可","https://file.jishuzhan.net/user/1796735760422932482/head.webp",[284,285],{"id":246,"name":247},{"id":263,"name":264},1774251767000,{"id":288,"title":289,"description":290,"imgUrl":9,"views":182,"ownerId":291,"ownerName":292,"ownerHeadUrl":13,"tagList":293,"time":297},"2035985578932633602","嵌入式C++安全编码","这些算法不会改变它们所操作的容器中的元素。对范围内的每个元素应用一个函数检查范围内元素是否全部、存在或没有满足条件的","2033723854401634306","m0_66257797",[294,295,296],{"id":246,"name":247},{"id":263,"name":264},{"id":210,"name":211},1774251763000,{"id":299,"title":300,"description":290,"imgUrl":9,"views":182,"ownerId":301,"ownerName":302,"ownerHeadUrl":13,"tagList":303,"time":307},"2035984832635928577","代码生成器优化策略","2035206196743962626","2301_81016095",[304,305,306],{"id":246,"name":247},{"id":263,"name":264},{"id":210,"name":211},1774251585000,{"id":309,"title":310,"description":311,"imgUrl":9,"views":312,"ownerId":217,"ownerName":218,"ownerHeadUrl":219,"tagList":313,"time":317},"2035984144052846593","SpringBoot事务：从“一键开关”到“踩坑大全”的生存指南","各位Java侠士，有没有经历过这种绝望瞬间：你信心满满地在方法上加了@Transactional，数据却没回滚；或者明明只是查个数据，却抛出一堆锁超时异常。你盯着代码陷入沉思——这破注解到底生不生效？ 😤",0,[314,315,316],{"id":188,"name":189},{"id":191,"name":192},{"id":194,"name":195},1774251421000,{"id":319,"title":320,"description":321,"content":322,"imgUrl":9,"views":312,"ownerId":323,"ownerName":324,"ownerHeadUrl":325,"tagList":326,"time":339,"articleSourceUrl":340,"preArticle":341,"nextArticle":347},"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",[327,328,329,332,333,336],{"id":188,"name":189},{"id":246,"name":247},{"id":330,"name":331},15,"javascript",{"id":61,"name":62},{"id":334,"name":335},410,"ecmascript",{"id":337,"name":338},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":342,"title":343,"description":344,"imgUrl":345,"views":346},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",28,{"id":348,"title":349,"description":350,"imgUrl":351,"views":29},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",["Reactive",353],{"$sisPC2":354},false,["Set"],["ShallowReactive",357],{"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>