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/2058718133142732802" 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>18 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Spring定时任务开发指南（动态实现）</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>python</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>spring</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>wpf</span><!--]--><!--]--></div></a><a href="/article/2058718116352933889" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>英辰朗迪AI获客</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>18 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Claude 官方插件生态落地应用指南</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>linux</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>运维</span><!--]--><!--]--></div></a><a href="/article/2058718006034350081" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>今天背单词了吗980</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>18 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>缓存与数据库双写不一致问题及终极解决方案（高频面试题）</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>数据库</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>学习</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>缓存</span><!--]--><!--]--></div></a><a href="/article/2058717911452794882" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>不绝191</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>18 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>AB包相关知识</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>lua</span><!--]--><!--]--></div></a><a href="/article/2058717865638412289" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>SimonKing</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>18 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>裁员、降薪潮来了，你被波及了么？</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>后端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>程序员</span><!--]--><!--]--></div></a><a href="/article/2058717260199018497" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Cobyte</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>18 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>13.响应式系统演进：版本化动态依赖管理机制解析（Vue3.4）</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/2058717027171876866" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>lly202406</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>18 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>WebPages 发布</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>开发语言</span><!--]--><!--]--></div></a><a href="/article/2058716916056375298" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Rain509</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>18 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>mini-cc 技术栈：跟着 Claude Code 先选 TypeScript + React + Ink</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><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>typescript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>node.js</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>ai编程</span><!--]--><!--]--></div></a><a href="/article/2058715341846003713" 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>19 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>MPC5604B/C MC_RGM 复位模块全解</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><!--]--><!--]--></div></a><a href="/article/2058715122907529218" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Chris _data</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>19 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>C# 与 PLC Modbus RTU 通信实践：从单例到线程安全的连接监控</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>安全</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>c#</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/2047609374831607810" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>Codex 接入 DeepSeek API 完整配置文档</span></a><a href="/article/2047844923232288770" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法</span></a><a href="/article/2048749962255728641" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>裂开！ChatGPT 居然开始要手机号验证，附详细解决方法</span></a><a href="/article/2044313323597004801" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>CC-Switch & Claude 基于 Linux 服务器安装使用指南</span></a><a href="/article/2048254266264059906" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>【AI】2026 年具身智能模型和世界模型总结</span></a><a href="/article/2001493360398368770" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>几个好用的ip纯净度检测网站</span></a><a href="/article/2058014746385420290" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>Codegraph 实战：用知识图谱让 AI 编程效率翻倍</span></a><a href="/article/2056626235342163970" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？</span></a><a href="/article/2053297967352840194" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>Cursor 接入 DeepSeek‑V4‑Pro 完整指南（2026 实测）</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":373,"once":376,"_errors":377,"serverRendered":379,"path":380},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":167,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":336,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":338},[5,19,41,54,68,90,102,118,130,147],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":18},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。","",88897,"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":40},"2047609374831607810","Codex 接入 DeepSeek API 完整配置文档","核心原理：让 Codex 以为自己连的是 OpenAI，实际通过两层代理转发到 DeepSeek。最终效果：Codex 里填任意 OpenAI 模型名（如 gpt-4.1），实际调用的是 deepseek-chat。",7577,"2047609376203145218","TS-33","https://pic.cnblogs.com/face/3740210/20251204121125.png",[28,31,34,37],{"id":29,"name":30},1887,"proxy",{"id":32,"name":33},12964,"codex",{"id":35,"name":36},67787,"deepseek",{"id":38,"name":39},92174,"反代",1777023092000,{"id":42,"title":43,"description":44,"imgUrl":9,"views":45,"ownerId":46,"ownerName":47,"ownerHeadUrl":48,"tagList":49,"time":53},"2047844923232288770","【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法","目录我这次安装 OpenAI Codex，没有走最常见的微软商店安装路线，不是因为想折腾，而是因为电脑本身就有问题。",2383,"2031756394270097410","程序员夏末","https://profile-avatar.csdnimg.cn/3d37c50b00644b87b66201fdd2209879_h52412224.jpg",[50],{"id":51,"name":52},139,"microsoft",1777079251000,{"id":55,"title":56,"description":57,"imgUrl":58,"views":59,"ownerId":60,"ownerName":61,"ownerHeadUrl":62,"tagList":63,"time":67},"2048749962255728641","裂开！ChatGPT 居然开始要手机号验证，附详细解决方法","ChatGPT居然又要手机号验证了！最近用 Codex 的时候，突然弹出一个窗口要我用手机号做验证。当时第一反应是：\"我靠，ChatGPT 不是早就能直接邮箱注册登录了吗，怎么又要手机号了？\"","https://oss.xyyzone.com/jishuzhan/article/2048749962255728641/731dbddf257f2e851f770eb0d31ca5dd.webp",3617,"1905083570396409857","爱吃的小肥羊","https://p3-passport.byteacctimg.com/img/user-avatar/e30f0c53f5f176519e59a74dabf53705~300x300.image",[64],{"id":65,"name":66},435,"aigc",1777295029000,{"id":69,"title":70,"description":71,"imgUrl":9,"views":72,"ownerId":73,"ownerName":74,"ownerHeadUrl":75,"tagList":76,"time":89},"2044313323597004801","CC-Switch & Claude 基于 Linux 服务器安装使用指南","本文面向需要在 Linux 服务器环境中部署 Claude Code 并使用 CC-Switch 管理多配置的开发者。",4719,"2042144427116920833","Wenweno0o","https://profile-avatar.csdnimg.cn/04fb7733f4af4ab990648846057d6e75_wenweno0o.jpg",[77,80,83,86],{"id":78,"name":79},9,"linux",{"id":81,"name":82},11,"服务器",{"id":84,"name":85},95315,"claude code",{"id":87,"name":88},127741,"cc-switch",1776237252000,{"id":91,"title":92,"description":93,"imgUrl":9,"views":94,"ownerId":95,"ownerName":96,"ownerHeadUrl":13,"tagList":97,"time":101},"2048254266264059906","【AI】2026 年具身智能模型和世界模型总结","2026 年具身智能和世界模型领域开源模型爆发，以下按技术路线 + 应用场景双维度分类整理：建议用三维坐标系来理解和选型：",3935,"1929283659554664450","墨染天姬",[98],{"id":99,"name":100},39,"人工智能",1777176846000,{"id":103,"title":104,"description":105,"imgUrl":9,"views":106,"ownerId":107,"ownerName":108,"ownerHeadUrl":109,"tagList":110,"time":117},"2001493360398368770","几个好用的ip纯净度检测网站","1.最有名的https://ping0.cc/，用人最多，较详细2.https://iplark.com/check，界面过于简单，只有纯净度的评分",3049,"1835487712853889025","怣疯knight","https://profile-avatar.csdnimg.cn/0fb3b9d7daae4d54b873462e04c336ff_m0_58528895.jpg",[111,114],{"id":112,"name":113},17,"网络",{"id":115,"name":116},1455,"ip",1766028177000,{"id":119,"title":120,"description":121,"imgUrl":9,"views":122,"ownerId":123,"ownerName":124,"ownerHeadUrl":125,"tagList":126,"time":129},"2058014746385420290","Codegraph 实战：用知识图谱让 AI 编程效率翻倍","写代码时，你是否遇到过：AI 助手对你的项目上下文一无所知，每次都要花大量时间解释代码结构？Codegraph 用一种直接的方式解决这个问题——把代码转化为知识图谱，让 AI 在编写代码前就能理解项目整体架构。",249,"2052574262020603906","析数塔","https://p3-passport.byteacctimg.com/img/user-avatar/58e83109fe0fa4a8a00184a52d8b82a3~300x300.image",[127,128],{"id":99,"name":100},{"id":16,"name":17},1779503926000,{"id":131,"title":132,"description":133,"imgUrl":9,"views":134,"ownerId":135,"ownerName":136,"ownerHeadUrl":137,"tagList":138,"time":146},"2056626235342163970","装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？","一个 5.2K+ Star 的 MIT 开源工具，把代码库变成 AI 能直接\"查字典\"的知识图谱。 从此告别 grep → read → grep → read 的死循环。",669,"1962431646340792321","Bacon","https://p9-passport.byteacctimg.com/img/user-avatar/c52e4b880c682ee4e98888ab03fa7445~300x300.image",[139,142,143],{"id":140,"name":141},14,"前端",{"id":99,"name":100},{"id":144,"name":145},55,"后端",1779172879000,{"id":148,"title":149,"description":150,"imgUrl":151,"views":152,"ownerId":153,"ownerName":154,"ownerHeadUrl":155,"tagList":156,"time":166},"2053297967352840194","Cursor 接入 DeepSeek‑V4‑Pro 完整指南（2026 实测）","一、为什么要用 deepseek‑v4‑proDeepSeek‑V4‑Pro 支持百万级上下文，并且在代码理解/大项目检索场景表现很稳；通过 Cursor 的 OpenAI Compatible 方式即可接入，不需要等官方内置 Provider。","https://i-blog.csdnimg.cn/direct/bcfe092295e243249ce4c8f08d6d3423.png",1435,"1895350057742372865","还有几根头发呀","https://profile-avatar.csdnimg.cn/2e6d1a02aa2842279ff50367d2976446_qq_51508784.jpg",[157,160,163],{"id":158,"name":159},1235,"ai编程",{"id":161,"name":162},8662,"cursor",{"id":164,"name":165},144058,"deepseek‑v4‑pro",1778379358000,[168,194,208,227,240,255,271,280,302,320],{"id":169,"title":170,"description":171,"imgUrl":9,"views":172,"ownerId":173,"ownerName":174,"ownerHeadUrl":175,"tagList":176,"time":193},"2058718133142732802","Spring定时任务开发指南（动态实现）","定时任务的原理可以概括为以下几个核心点：调度器通常维护一个任务队列，根据任务的执行时间排序，并在到达指定时间时将其提交给线程池执行。",0,"2056963134959226881","彦为君","https://i-avatar.csdnimg.cn/97c43fb4c4644ce9b7139bcf8065de8c_2401_82819240.jpg",[177,180,183,184,187,190],{"id":178,"name":179},3,"java",{"id":181,"name":182},13,"开发语言",{"id":144,"name":145},{"id":185,"name":186},58,"python",{"id":188,"name":189},110,"spring",{"id":191,"name":192},551,"wpf",1779671626000,{"id":195,"title":196,"description":197,"imgUrl":9,"views":172,"ownerId":198,"ownerName":199,"ownerHeadUrl":200,"tagList":201,"time":207},"2058718116352933889","Claude 官方插件生态落地应用指南","在开发复杂应用时，我们常常遇到这样的困境：核心业务逻辑写得漂亮，但一旦需要对接外部数据或打通内部系统，代码就变得臃肿不堪。比如，想让用户在聊天窗口直接查库存，却不得不写一堆重复的 API 调用代码；或者想让助手自动安排会议，结果发现处理时区冲突和日历权限的代码比主程序还长。这种“胶水代码”不仅难以维护，还让新功能上线变得小心翼翼。","2056601840955527170","英辰朗迪AI获客","https://i-avatar.csdnimg.cn/bbf24dc40f97480c95eb7c8e66f17e60_aibridge.jpg",[202,203,204],{"id":178,"name":179},{"id":78,"name":79},{"id":205,"name":206},10,"运维",1779671622000,{"id":209,"title":210,"description":211,"imgUrl":9,"views":172,"ownerId":212,"ownerName":213,"ownerHeadUrl":214,"tagList":215,"time":226},"2058718006034350081","缓存与数据库双写不一致问题及终极解决方案（高频面试题）","大家好，今天我们来彻底吃透后端高频核心问题：缓存与数据库双写数据不一致！这是面试必问、生产必踩坑的经典问题，几乎所有高并发项目（电商、秒杀、资讯、用户中心）都会遇到。本文从零拆解问题根源，手把手分析所有解决方案的优缺点、适用场景，附带清晰流程图、避坑要点，新手也能完全看懂，文末附生产选型总结！","1759608867844526082","今天背单词了吗980","https://file.jishuzhan.net/user/1759608867844526082/head.webp",[216,217,220,223],{"id":178,"name":179},{"id":218,"name":219},25,"数据库",{"id":221,"name":222},84,"学习",{"id":224,"name":225},171,"缓存",1779671596000,{"id":228,"title":229,"description":230,"imgUrl":231,"views":172,"ownerId":232,"ownerName":233,"ownerHeadUrl":13,"tagList":234,"time":239},"2058717911452794882","AB包相关知识","摘自千问：值得注意的是，现在除了 Lua，还有一种流行的热更方案是 HybridCLR（原 ilruntime/huohuo 的替代者）。","https://i-blog.csdnimg.cn/direct/80e6307ede364ba8af42534b71ce49d9.png","1805131266610171906","不绝191",[235,236],{"id":181,"name":182},{"id":237,"name":238},661,"lua",1779671573000,{"id":241,"title":242,"description":243,"imgUrl":244,"views":172,"ownerId":245,"ownerName":246,"ownerHeadUrl":247,"tagList":248,"time":254},"2058717865638412289","裁员、降薪潮来了，你被波及了么？","关注我的公众号：【编程朝花夕拾】，可获取首发内容。写了十年Java，从CRUD写到架构，从程序员写到技术负责人，然后在某个时间点，我意识到一件事：我在这个行业的运气，比我以为的实力，占比大得多。","https://oss.xyyzone.com/jishuzhan/article/2058717865638412289/f57871f127c73f0f8b93b9bc281db2c0.webp","1718926217144438786","SimonKing","https://file.jishuzhan.net/user/1718926217144438786/head.webp",[249,250,251],{"id":178,"name":179},{"id":144,"name":145},{"id":252,"name":253},232,"程序员",1779671562000,{"id":256,"title":257,"description":258,"imgUrl":9,"views":172,"ownerId":259,"ownerName":260,"ownerHeadUrl":261,"tagList":262,"time":270},"2058717260199018497","13.响应式系统演进：版本化动态依赖管理机制解析（Vue3.4）","在前面的文章我们讲过在 Vue3.2 的版本里面还通过位运算优化动态依赖收集的性能，但这个方案还不是最优的，比如还存在 30 层限制的问题。在 Vue3.4 的版本里则通过版本化进行优化动态依赖的性能。所以本篇文章就来详细讲解在 Vue3.4 里面是怎样通过版本化进行优化动态依赖的性能。","1736550391081865218","Cobyte","https://file.jishuzhan.net/user/1736550391081865218/head.webp",[263,264,267],{"id":140,"name":141},{"id":265,"name":266},15,"javascript",{"id":268,"name":269},36,"vue.js",1779671418000,{"id":272,"title":273,"description":274,"imgUrl":9,"views":172,"ownerId":275,"ownerName":276,"ownerHeadUrl":13,"tagList":277,"time":279},"2058717027171876866","WebPages 发布","随着互联网技术的飞速发展，WebPages 作为一种新型的网页发布平台，应运而生。本文将详细介绍 WebPages 的发布过程、特点以及优势，帮助读者更好地了解这一新兴的网页发布工具。","1802161870803570690","lly202406",[278],{"id":181,"name":182},1779671363000,{"id":281,"title":282,"description":283,"imgUrl":284,"views":172,"ownerId":285,"ownerName":286,"ownerHeadUrl":287,"tagList":288,"time":301},"2058716916056375298","mini-cc 技术栈：跟着 Claude Code 先选 TypeScript + React + Ink","mini-cc 的技术栈不是我自己拍脑袋定的——我是直接抄了 Claude Code 的作业。当我把 Claude Code 的源码扒下来之后，我最大的感受是：原来是用 TypeScript 写的吗？TypeScript 做类型约束，React 写组件，再用 Ink 渲染到终端……这套组合拳打下来，让一个本来应该很「土」的命令行工具变得清晰、优雅、还特别好扩展。","https://i-blog.csdnimg.cn/direct/50a5d4e376ce4218b1e84db68de6911d.png","2058043087171719170","Rain509","https://profile-avatar.csdnimg.cn/ea62a481640f45e0bee35a845d67fd33_zhang15911122312.jpg",[289,290,291,294,297,300],{"id":140,"name":141},{"id":265,"name":266},{"id":292,"name":293},119,"react.js",{"id":295,"name":296},250,"typescript",{"id":298,"name":299},324,"node.js",{"id":158,"name":159},1779671336000,{"id":303,"title":304,"description":305,"imgUrl":9,"views":172,"ownerId":306,"ownerName":307,"ownerHeadUrl":13,"tagList":308,"time":319},"2058715341846003713","MPC5604B/C MC_RGM 复位模块全解","本文章主要说明芯片被谁复位了？复位后是什么状态？哪些复位会影响数据？软件如何识别复位原因？MC_RGM 是整个芯片的 **“复位总指挥”**：","2057315182653313025","冉卓电子",[309,312,313,316],{"id":310,"name":311},12,"c语言",{"id":181,"name":182},{"id":314,"name":315},67,"单片机",{"id":317,"name":318},68,"嵌入式硬件",1779670961000,{"id":321,"title":322,"description":323,"imgUrl":9,"views":172,"ownerId":324,"ownerName":325,"ownerHeadUrl":326,"tagList":327,"time":335},"2058715122907529218","C# 与 PLC Modbus RTU 通信实践：从单例到线程安全的连接监控","本文记录了我学习用 C# 通过 Modbus RTU 协议与 PLC 通信的过程。 内容涵盖 RtuConnect 类的设计思路、关键代码解析、线程安全的考虑、连接状态监控以及优雅的程序退出机制。","1830849518229262338","Chris _data","https://profile-avatar.csdnimg.cn/c39ef114636f41b297f743752764cac7_weixin_60489641.jpg",[328,329,332],{"id":181,"name":182},{"id":330,"name":331},102,"安全",{"id":333,"name":334},333,"c#",1779670909000,{"adMap":337},["Map"],{"id":339,"title":340,"description":341,"content":342,"imgUrl":9,"views":172,"ownerId":343,"ownerName":344,"ownerHeadUrl":345,"tagList":346,"time":359,"articleSourceUrl":360,"preArticle":361,"nextArticle":367},"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",[347,348,349,350,353,356],{"id":178,"name":179},{"id":181,"name":182},{"id":265,"name":266},{"id":351,"name":352},353,"html",{"id":354,"name":355},410,"ecmascript",{"id":357,"name":358},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":362,"title":363,"description":364,"imgUrl":365,"views":366},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",33,{"id":368,"title":369,"description":370,"imgUrl":371,"views":372},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",21,["Reactive",374],{"$sisPC2":375},false,["Set"],["ShallowReactive",378],{"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>