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/2020840706319908866" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>NEXT06</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>AI 应用工程化实战：使用 LangChain.js 编排 DeepSeek 复杂工作流</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>langchain</span><!--]--><!--]--></div></a><a href="/article/2020834117110267906" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>2301_76347246</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++20概念（Concepts）入门指南</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/2020829940019691521" 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>9 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>react的hooks防抖和节流是怎样做的</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>react.js</span><!--]--><!--]--></div></a><a href="/article/2020829013749596161" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>小毛驴850</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>Vue 路由示例</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/2020828371790397441" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>TechWJ</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>PyPTO编程范式深度解读：让NPU开发像写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>cann</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>pypto</span><!--]--><!--]--></div></a><a href="/article/2020826823123337217" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>qq_1249870753</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>基于SSM的动物保护系统的设计与实现（源码+论文+部署+安装）</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 boot</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>ssm</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>计算机毕业设计</span><!--]--><!--]--></div></a><a href="/article/2020825393473847298" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Coder_Boy_</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>基于SpringAI的在线考试系统-考试系统开发流程案例</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><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>spring boot</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>后端</span><!--]--><!--]--></div></a><a href="/article/2020825166721384450" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Mr_sun.</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>Day06——权限认证-项目集成</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--]--></div></a><a href="/article/2020824541702979586" 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>9 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Spring Cloud微服务搭建四、集成RocketMQ消息队列</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>spring cloud</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>rocketmq</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>dashboard</span><!--]--><!--]--></div></a><a href="/article/2020822780007219202" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>abluckyboy</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>Java 实现求 n 的 n^n 次方的最后一位数字</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>python</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>算法</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/2016543499354161154" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services</span></a><a href="/article/2019262138796785665" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>openclaw配置教程（linux+局域网ollama）</span></a><a href="/article/1950564991094009857" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>UV安装并设置国内源</span></a><a href="/article/1932679439594336257" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>Linux下V2Ray安装配置指南</span></a><a href="/article/1988226029513670657" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南</span></a><a href="/article/2019281783813619713" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决</span></a><a href="/article/2002905078227861506" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>Claude Code Skills 实用使用手册</span></a><a href="/article/2016019987782746113" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>在Trae中使用Pencil MCP</span></a><a href="/article/2018114887282114561" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>OpenClaw Chrome扩展使用教程 - 浏览器中继控制</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":377,"once":380,"_errors":381,"serverRendered":383,"path":384},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":175,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":341,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":343},[5,19,36,53,70,89,107,125,139,163],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":18},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。","",49986,"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":35},"2016543499354161154","Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services","如果你在安装 Claude Code 的过程中使用了梯子（代理），或者因为网络原因，导致在最后运行 claude 的时候，一直卡在连接界面并报错，无法连接国内的智谱（GLM）服务器。","https://i-blog.csdnimg.cn/direct/7c55e6dc5b9d4aa9bfb6a70ed0e16527.png",531,"1690240030502555649","lyx4949","https://file.jishuzhan.net/user/1690240030502555649/head.png",[29,32],{"id":30,"name":31},189,"ai",{"id":33,"name":34},95315,"claude code",1769616410000,{"id":37,"title":38,"description":39,"imgUrl":40,"views":41,"ownerId":42,"ownerName":43,"ownerHeadUrl":44,"tagList":45,"time":52},"2019262138796785665","openclaw配置教程（linux+局域网ollama）","ollama：https://github.com/ollama/ollamahttps://ollama.com/","https://i-blog.csdnimg.cn/direct/bef13dc4555f4c39adf84ef6346f50c0.png",206,"1831140184704421889","paul_chen21","https://profile-avatar.csdnimg.cn/aca02268ca76467d835d79411079a6a2_m0_63080775.jpg",[46,49],{"id":47,"name":48},39,"人工智能",{"id":50,"name":51},774,"飞书",1770264584000,{"id":54,"title":55,"description":56,"imgUrl":57,"views":58,"ownerId":59,"ownerName":60,"ownerHeadUrl":61,"tagList":62,"time":69},"1950564991094009857","UV安装并设置国内源","国内网络问题无法下载解决方案 来到github下载自己对应系统的包： https://github.com/astral-sh/uv/releases","https://i-blog.csdnimg.cn/direct/f35ac3e06c9448d38fa3eb735254c454.png",21220,"1684403235311325185","落魄实习生","https://file.jishuzhan.net/user/1684403235311325185/head.png",[63,66],{"id":64,"name":65},58,"python",{"id":67,"name":68},4529,"uv",1753885908000,{"id":71,"title":72,"description":73,"imgUrl":9,"views":74,"ownerId":75,"ownerName":76,"ownerHeadUrl":77,"tagList":78,"time":88},"1932679439594336257","Linux下V2Ray安装配置指南","本文档提供了在Linux系统上安装、配置和使用V2Ray的完整流程，包括从订阅链接自动生成配置文件、设置代理环境变量以及常见问题的解决方案。",13995,"1932679443885109249","Bigbig.","https://profile-avatar.csdnimg.cn/d79b884ab2274031998690f8b491b6d7_weixin_45036087.jpg",[79,82,85],{"id":80,"name":81},9,"linux",{"id":83,"name":84},10,"运维",{"id":86,"name":87},43,"chrome",1749621660000,{"id":90,"title":91,"description":92,"imgUrl":9,"views":93,"ownerId":94,"ownerName":95,"ownerHeadUrl":96,"tagList":97,"time":106},"1988226029513670657","AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南","在 2025 年，AI 辅助编码已成为主流，据统计，高达 82% 的开发者在日常工作中使用 AI 工具。然而，随之而来的是一个核心痛点：模糊的自然语言提示（Prompt）常常导致 AI 生成不可预测、质量参差不齐甚至包含安全漏洞的代码。GitHub 2025 年开发者报告指出，62% 的 AI 输出代码需要大量人工修正才能投入生产。",1499,"1943122066651262978","逻极","https://i-avatar.csdnimg.cn/a10d4e3df6fa47ac84c6967bb65f33c8.jpg",[98,99,102,103],{"id":47,"name":48},{"id":100,"name":101},45,"驱动开发",{"id":30,"name":31},{"id":104,"name":105},993,"agent",1762864999000,{"id":108,"title":109,"description":110,"imgUrl":9,"views":111,"ownerId":112,"ownerName":113,"ownerHeadUrl":13,"tagList":114,"time":124},"2019281783813619713","openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决","目标url：http://127.0.0.1:65530发送域名：127.0.0.1根据官网内容The Control UI needs a secure context (HTTPS or localhost) to generate device identity. If you enable gateway.controlUi.allowInsecureAuth, the UI falls back to token-only auth and skips device pairing when d",110,"2019281786565083137","无名的小白",[115,118,121],{"id":116,"name":117},3,"java",{"id":119,"name":120},14,"前端",{"id":122,"name":123},99,"nginx",1770269268000,{"id":126,"title":127,"description":128,"imgUrl":9,"views":129,"ownerId":130,"ownerName":131,"ownerHeadUrl":132,"tagList":133,"time":138},"2002905078227861506","Claude Code Skills 实用使用手册","Skills 是 Claude Code 的知识模块系统，让你可以为 Claude 添加专业知识和技能。就像给 Claude 配备一本本专业的\"工作手册\"。",1736,"1701167061415235585","言之。","https://file.jishuzhan.net/user/1701167061415235585/head.png",[134,135],{"id":116,"name":117},{"id":136,"name":137},13,"开发语言",1766364757000,{"id":140,"title":141,"description":142,"imgUrl":143,"views":144,"ownerId":145,"ownerName":146,"ownerHeadUrl":147,"tagList":148,"time":162},"2016019987782746113","在Trae中使用Pencil MCP","最近 Pencil 有点火，号称是Vibe Design。 它本质上就是一套协议，使用 json 文本来描述画布中每个元素的位置、样式、组合等各种属性。 我想在 trae 中使用它，却发现它本身没有给出在 trae 中使用的教程。 所以在这里记录一下如何在 trae 中使用。","https://i-blog.csdnimg.cn/direct/a38a8a28be464929b6085c5b53b3d177.png",457,"2016019992086102018","大海梦想","https://profile-avatar.csdnimg.cn/f2d380884df9483381859c5583f37d06_wjc133.jpg",[149,150,153,156,159],{"id":30,"name":31},{"id":151,"name":152},338,"大模型",{"id":154,"name":155},80338,"trae",{"id":157,"name":158},125558,"vibe design",{"id":160,"name":161},125559,"pencil",1769491595000,{"id":164,"title":165,"description":166,"imgUrl":9,"views":167,"ownerId":168,"ownerName":169,"ownerHeadUrl":170,"tagList":171,"time":174},"2018114887282114561","OpenClaw Chrome扩展使用教程 - 浏览器中继控制","OpenClaw Chrome扩展（浏览器中继）允许AI代理控制您现有的Chrome标签页，而不是启动独立的OpenClaw管理的Chrome配置文件。通过简单的工具栏按钮即可实现附加/分离操作，让您能够灵活地在日常浏览器环境中使用OpenClaw的强大功能。",247,"1726104300297392130","陈希瑞","https://file.jishuzhan.net/user/1726104300297392130/head.webp",[172,173],{"id":119,"name":120},{"id":86,"name":87},1769991058000,[176,193,208,222,237,254,280,296,307,330],{"id":177,"title":178,"description":179,"imgUrl":9,"views":180,"ownerId":181,"ownerName":182,"ownerHeadUrl":183,"tagList":184,"time":192},"2020840706319908866","AI 应用工程化实战：使用 LangChain.js 编排 DeepSeek 复杂工作流","在 2024 年至 2025 年的技术浪潮中，大语言模型（LLM）的应用开发已经从“尝鲜”阶段迈向了“工程化”阶段。对于开发者而言，仅仅调用 fetch 接口获取模型回复是远远不够的。在构建复杂的生产级应用时，我们面临着提示词管理混乱、模型切换成本高、上下文处理复杂以及任务编排困难等诸多痛点。",1,"2006197952466436098","NEXT06","https://p26-passport.byteacctimg.com/img/user-avatar/f2bd9292651ea87761479f9355cb0e28~300x300.image",[185,186,189],{"id":119,"name":120},{"id":187,"name":188},15,"javascript",{"id":190,"name":191},268,"langchain",1770640944000,{"id":194,"title":195,"description":196,"imgUrl":9,"views":180,"ownerId":197,"ownerName":198,"ownerHeadUrl":13,"tagList":199,"time":207},"2020834117110267906","C++20概念（Concepts）入门指南","这些算法不会改变它们所操作的容器中的元素。对范围内的每个元素应用一个函数检查范围内元素是否全部、存在或没有满足条件的","2016695969229357057","2301_76347246",[200,201,204],{"id":136,"name":137},{"id":202,"name":203},27,"c++",{"id":205,"name":206},97,"算法",1770639373000,{"id":209,"title":210,"description":211,"imgUrl":9,"views":180,"ownerId":212,"ownerName":213,"ownerHeadUrl":214,"tagList":215,"time":221},"2020829940019691521","react的hooks防抖和节流是怎样做的","防抖（debounce）：在事件触发一段时间后才执行，期间再次触发会重新计时 节流（throttle）：在固定时间内只执行一次","1719993675548725250","光影少年","https://file.jishuzhan.net/user/1719993675548725250/head.webp",[216,217,218],{"id":119,"name":120},{"id":187,"name":188},{"id":219,"name":220},119,"react.js",1770638377000,{"id":223,"title":224,"description":225,"imgUrl":9,"views":226,"ownerId":227,"ownerName":228,"ownerHeadUrl":229,"tagList":230,"time":236},"2020829013749596161","Vue 路由示例","main.tsApp.vueVue 在 Vite 下默认使用 runtime-only 构建，不支持在运行时编译模板字符串。",0,"1767563722068332546","小毛驴850","https://file.jishuzhan.net/user/1767563722068332546/head.webp",[231,232,233],{"id":119,"name":120},{"id":187,"name":188},{"id":234,"name":235},36,"vue.js",1770638156000,{"id":238,"title":239,"description":240,"imgUrl":9,"views":180,"ownerId":241,"ownerName":242,"ownerHeadUrl":243,"tagList":244,"time":253},"2020828371790397441","PyPTO编程范式深度解读：让NPU开发像写Python一样简单","本文基于CANN开源社区的pypto仓库进行技术解读如果你问一个AI开发者最头疼的问题是什么，\"算子优化\"恐怕会排在前列。要写出高性能的NPU代码，传统方式需要深入理解硬件架构、掌握底层编程语言、处理复杂的内存管理…这些门槛把很多研究人员和应用开发者挡在了门外。","1727164421043654657","TechWJ","https://file.jishuzhan.net/user/1727164421043654657/head.webp",[245,246,247,250],{"id":136,"name":137},{"id":64,"name":65},{"id":248,"name":249},14759,"cann",{"id":251,"name":252},128402,"pypto",1770638003000,{"id":255,"title":256,"description":257,"imgUrl":258,"views":226,"ownerId":259,"ownerName":260,"ownerHeadUrl":261,"tagList":262,"time":279},"2020826823123337217","基于SSM的动物保护系统的设计与实现（源码+论文+部署+安装）","全球生态环境问题加剧，动物保护成为社会焦点，而过度捕猎、栖息地破坏等导致诸多动物濒临灭绝，传统动物保护工作存在信息不对称、管理不规范、资源分散等问题，效率和效果受限。同时信息技术飞速发展，计算机、网络、数据库技术的成熟为动物保护信息化提供了技术支撑，因此开发基于 Java、SpringBoot、Vue、MySQL 的动物保护系统，能解决传统保护工作的痛点，为动物保护提供科学、高效的信息管理与数据处理方案，推动保护工作系统化、数字化发展。","https://i-blog.csdnimg.cn/direct/c400820b574b4496a5ebc198e2a6742b.png","1889142281890435073","qq_1249870753","https://profile-avatar.csdnimg.cn/4e1d0ba801b44360831b57ed197519a6_fengzongfu.jpg",[263,264,267,270,273,276],{"id":116,"name":117},{"id":265,"name":266},25,"数据库",{"id":268,"name":269},48,"spring boot",{"id":271,"name":272},385,"毕业设计",{"id":274,"name":275},608,"ssm",{"id":277,"name":278},8890,"计算机毕业设计",1770637634000,{"id":281,"title":282,"description":283,"imgUrl":9,"views":226,"ownerId":284,"ownerName":285,"ownerHeadUrl":286,"tagList":287,"time":295},"2020825393473847298","基于SpringAI的在线考试系统-考试系统开发流程案例","前端请求控制器层接收请求应用服务层处理业务逻辑领域服务层验证业务规则仓储层保存数据数据库事件总线发布领域事件","1681463978888269825","Coder_Boy_","https://file.jishuzhan.net/user/1681463978888269825/head.png",[288,289,290,291,292],{"id":116,"name":117},{"id":265,"name":266},{"id":47,"name":48},{"id":268,"name":269},{"id":293,"name":294},55,"后端",1770637293000,{"id":297,"title":298,"description":299,"imgUrl":300,"views":226,"ownerId":301,"ownerName":302,"ownerHeadUrl":303,"tagList":304,"time":306},"2020825166721384450","Day06——权限认证-项目集成","在前两天关于权限的讲解中，我们现在已经熟悉了RBAC认证授权模型，并且对安全框架Spring Security有了一定的认识，那么接下来呢，我们就把Spring Security框架集成中州养老项目中。","https://i-blog.csdnimg.cn/direct/04550bf106044219a4b2f1cf40fdb1db.png","1688850195594350593","Mr_sun.","https://file.jishuzhan.net/user/1688850195594350593/head.png",[305],{"id":116,"name":117},1770637239000,{"id":308,"title":309,"description":310,"imgUrl":311,"views":180,"ownerId":312,"ownerName":313,"ownerHeadUrl":314,"tagList":315,"time":329},"2020824541702979586","Spring Cloud微服务搭建四、集成RocketMQ消息队列","目录简介下载配置环境变量启动启动NameServer启动Broker验证 RocketMQ 功能启动生产者","https://i-blog.csdnimg.cn/direct/fec87f103bdf4633982ff07dfc14d0fd.png","1688471763526094850","瑶山","https://file.jishuzhan.net/user/1688471763526094850/head.jpeg",[316,317,320,323,326],{"id":116,"name":117},{"id":318,"name":319},147,"spring cloud",{"id":321,"name":322},186,"微服务",{"id":324,"name":325},675,"rocketmq",{"id":327,"name":328},8238,"dashboard",1770637090000,{"id":331,"title":332,"description":333,"imgUrl":9,"views":180,"ownerId":334,"ownerName":335,"ownerHeadUrl":13,"tagList":336,"time":340},"2020822780007219202","Java 实现求 n 的 n^n 次方的最后一位数字","我们需要计算n^(n^n)的最后一位数字，核心难点在于n^n的数值会随着n增大急剧增长，直接计算不现实。因此我们需要利用模运算的性质和循环规律来简化计算：","2020291399145553921","abluckyboy",[337,338,339],{"id":116,"name":117},{"id":64,"name":65},{"id":205,"name":206},1770636670000,{"adMap":342},["Map"],{"id":344,"title":345,"description":346,"content":347,"imgUrl":9,"views":226,"ownerId":348,"ownerName":349,"ownerHeadUrl":350,"tagList":351,"time":364,"articleSourceUrl":365,"preArticle":366,"nextArticle":371},"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",[352,353,354,355,358,361],{"id":116,"name":117},{"id":136,"name":137},{"id":187,"name":188},{"id":356,"name":357},353,"html",{"id":359,"name":360},410,"ecmascript",{"id":362,"name":363},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":367,"title":368,"description":369,"imgUrl":370,"views":265},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",{"id":372,"title":373,"description":374,"imgUrl":375,"views":376},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",8,["Reactive",378],{"$sisPC2":379},false,["Set"],["ShallowReactive",382],{"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>