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/1982192832984186881" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>β添砖java</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>vivo响应式官网</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>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>1024程序员节</span><!--]--><!--]--></div></a><a href="/article/1982162676236222465" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>逐步前行</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>16 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>C标准库--C99--布尔型＜stdbool.h＞</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><!--]--><!--]--></div></a><a href="/article/1982162512595451906" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>QX_hao</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>16 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>【Go】--闭包</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>golang</span><!--]--><!--]--></div></a><a href="/article/1982139310058045441" 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>Java 大视界 -- 基于 Java 的大数据机器学习模型在图像识别中的迁移学习与模型优化</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>大数据</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>迁移学习</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>deeplearning4j</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>机器学习模型</span><!--]--><!--]--></div></a><a href="/article/1982132322033008642" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>2501_90980081</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>Java 集合框架之 Set 接口</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>set接口</span><!--]--><!--]--></div></a><a href="/article/1982131734822060034" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>断剑zou天涯</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/1982116257903214594" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>web打印社区</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>20 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>使用React如何静默打印页面：完整的前端打印解决方案</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><!--]--><!--[--><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>pdf</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>1024程序员节</span><!--]--><!--]--></div></a><a href="/article/1982115850296557569" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Nobody_Cares</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>20 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>JWT令牌</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--]--></div></a><a href="/article/1982115641353109506" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>沐浴露z</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>20 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Kafka入门：基础架构讲解，安装与使用</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>kafka</span><!--]--><!--]--></div></a><a href="/article/1982114475533729794" 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>20 小时前</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>aigc</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>1024程序员节</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/1915922587008487425" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>01</span><span class="article-title" data-v-9f329d47>BongoCat - 跨平台键盘猫动画工具</span></a><a href="/article/1965957555249266689" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>GitHub 镜像站点</span></a><a href="/article/1950564991094009857" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</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>04</span><span class="article-title" data-v-9f329d47>Linux下V2Ray安装配置指南</span></a><a href="/article/1895064707199406081" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>jdk21下载、安装（Windows、Linux、macOS）</span></a><a href="/article/1954746713159282690" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>GitLab 零基础入门指南：从安装到项目管理全流程</span></a><a href="/article/1895130586004066306" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>KGG转MP3工具|非KGM文件|解密音频</span></a><a href="/article/1851806212014739457" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）</span></a><a href="/article/1898984783640907778" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南</span></a><a href="/article/1955574023311634434" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>Labelme从安装到标注：零基础完整指南</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":397,"once":400,"_errors":401,"serverRendered":403,"path":404},["ShallowReactive",3],{"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":4,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":6,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":184,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":365},{"adMap":5},["Map"],[7,30,44,61,80,106,117,142,155,173],{"id":8,"title":9,"description":10,"imgUrl":11,"views":12,"ownerId":13,"ownerName":14,"ownerHeadUrl":15,"tagList":16,"time":29},"1915922587008487425","BongoCat - 跨平台键盘猫动画工具","本文翻译整理自：https://github.com/ayangweb/BongoCatBongoCat 是一款跨平台的键盘猫动画工具，能够实时显示用户键盘和鼠标操作的可视化效果。","https://i-blog.csdnimg.cn/direct/cce2f8b6f6ee48dc8212484e8b4ebef0.png",3934,"1682248433810804738","伊织code","https://file.jishuzhan.net/user/1682248433810804738/head.png",[17,20,23,26],{"id":18,"name":19},364,"计算机外设",{"id":21,"name":22},1135,"动画",{"id":24,"name":25},1636,"键盘",{"id":27,"name":28},88509,"bongocat",1745626515000,{"id":31,"title":32,"description":33,"imgUrl":34,"views":35,"ownerId":36,"ownerName":37,"ownerHeadUrl":38,"tagList":39,"time":43},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。","",4627,"1851173111697772545","BillKu","https://profile-avatar.csdnimg.cn/default.jpg",[40],{"id":41,"name":42},424,"github",1757555781000,{"id":45,"title":46,"description":47,"imgUrl":48,"views":49,"ownerId":50,"ownerName":51,"ownerHeadUrl":52,"tagList":53,"time":60},"1950564991094009857","UV安装并设置国内源","国内网络问题无法下载解决方案 来到github下载自己对应系统的包： https://github.com/astral-sh/uv/releases","https://i-blog.csdnimg.cn/direct/f35ac3e06c9448d38fa3eb735254c454.png",12917,"1684403235311325185","落魄实习生","https://file.jishuzhan.net/user/1684403235311325185/head.png",[54,57],{"id":55,"name":56},58,"python",{"id":58,"name":59},4529,"uv",1753885908000,{"id":62,"title":63,"description":64,"imgUrl":34,"views":65,"ownerId":66,"ownerName":67,"ownerHeadUrl":68,"tagList":69,"time":79},"1932679439594336257","Linux下V2Ray安装配置指南","本文档提供了在Linux系统上安装、配置和使用V2Ray的完整流程，包括从订阅链接自动生成配置文件、设置代理环境变量以及常见问题的解决方案。",7896,"1932679443885109249","Bigbig.","https://profile-avatar.csdnimg.cn/d79b884ab2274031998690f8b491b6d7_weixin_45036087.jpg",[70,73,76],{"id":71,"name":72},9,"linux",{"id":74,"name":75},10,"运维",{"id":77,"name":78},43,"chrome",1749621660000,{"id":81,"title":82,"description":83,"imgUrl":84,"views":85,"ownerId":86,"ownerName":87,"ownerHeadUrl":88,"tagList":89,"time":105},"1895064707199406081","jdk21下载、安装（Windows、Linux、macOS）","1. 下载安装访问 Oracle 官方 JDK 下载页面 或 OpenJDK 下载页面，根据自己的系统选择合适的 Windows 版本进行下载（通常选择 .msi 安装包）。","https://i-blog.csdnimg.cn/direct/a5160a0d2bcf448c99822060adca401a.png",3352,"1802596723579686913","燕雀安知鸿鹄之志哉.","https://profile-avatar.csdnimg.cn/ccbdfdeb69004514be9adf81455baade_weixin_68416970.jpg",[90,93,96,99,102],{"id":91,"name":92},17,"网络",{"id":94,"name":95},102,"安全",{"id":97,"name":98},113,"web安全",{"id":100,"name":101},154,"网络安全",{"id":103,"name":104},444,"系统安全",1740653609000,{"id":107,"title":108,"description":109,"imgUrl":110,"views":111,"ownerId":112,"ownerName":113,"ownerHeadUrl":114,"tagList":115,"time":116},"1954746713159282690","GitLab 零基础入门指南：从安装到项目管理全流程","Git 作为版本控制工具已经成为开发者日常工作的必备技能，而 GitLab 作为与 GitHub 齐名的代码托管平台，凭借其强大的自托管能力和企业级功能，在团队协作与 DevOps 流程中占据着重要地位。本文将带你从零开始，一步步完成 GitLab 的安装部署、基础配置，并通过实际操作掌握项目、用户与群组的管理方法，让你快速上手这个强大的协作平台。","https://i-blog.csdnimg.cn/direct/d1765f3ad9e74e55ab69a0a99ad8cf7e.png",932,"1951883307779665921","上邪o_O","https://i-avatar.csdnimg.cn/1f33f8c6d0be450f9d355534e268ebb0_m0_65643526.jpg",[],1754882908000,{"id":118,"title":119,"description":120,"imgUrl":34,"views":121,"ownerId":122,"ownerName":123,"ownerHeadUrl":124,"tagList":125,"time":141},"1895130586004066306","KGG转MP3工具|非KGM文件|解密音频","本文章分为两部分老版本kgm转mp3项目新版本kgg转mp3项目先废话一下：在数字音乐时代，我们常常会遇到各种格式的音乐文件，其中酷狗音乐的KGM格式就是一种常见的专用格式。然而，这种格式在其他设备或播放器上可能无法直接播放，给用户带来了不便。为了解决这一问题，之前有个项目，推出了酷狗KGM转MP3或FLAC工具。它能够将酷狗音乐的KGM格式文件轻松转换为常见的MP3或FLAC格式，让你在任何设备上都能畅享音乐。",12638,"1895130588738752513","FeiCat Henry","https://profile-avatar.csdnimg.cn/1db505df81b74eaba91034ff4b0b081a_mayiseeu.jpg",[126,129,132,135,138],{"id":127,"name":128},65,"科技",{"id":130,"name":131},97,"算法",{"id":133,"name":134},580,"音视频",{"id":136,"name":137},729,"软件工程",{"id":139,"name":140},2183,"视频编解码",1740669316000,{"id":143,"title":144,"description":145,"imgUrl":146,"views":147,"ownerId":148,"ownerName":149,"ownerHeadUrl":38,"tagList":150,"time":154},"1851806212014739457","安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）","安娜的档案（Anna’s Archive）是一个颇受关注的资源库。它涵盖了广泛的内容，可能包括各类文献、资料等。其特色在于丰富的信息储备和一定的系统性。安娜的档案（Anna’s Archive）用户可以从中获取多样的知识和数据，为研究、学习等提供便利。然而，关于它的具体性质和运作方式可能因不同情境而有所差异。它在相关领域或特定群体中具有一定影响力，成为人们获取特定信息的渠道之一，但也需注意其信息的准确性等方面的问题。","https://i-blog.csdnimg.cn/direct/35f1832388a147ca80754ec861f014d0.png",133,"1851806214443241473","码虫分享",[151],{"id":152,"name":153},84,"学习",1730339980000,{"id":156,"title":157,"description":158,"imgUrl":159,"views":160,"ownerId":161,"ownerName":162,"ownerHeadUrl":163,"tagList":164,"time":172},"1898984783640907778","NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南","1、下载驱动 前往NVIDIA驱动下载页，输入显卡型号和操作系统类型，选择≥目标CUDA版本要求的驱动版本‌。","https://i-blog.csdnimg.cn/direct/2034ec55375c4ffc8912f0ccfb5a08b1.png",2710,"1700519045125640194","byxdaz","https://file.jishuzhan.net/user/1700519045125640194/head.jpeg",[165,166,169],{"id":71,"name":72},{"id":167,"name":168},39,"人工智能",{"id":170,"name":171},72,"深度学习",1741588228000,{"id":174,"title":175,"description":176,"imgUrl":177,"views":178,"ownerId":179,"ownerName":180,"ownerHeadUrl":181,"tagList":182,"time":183},"1955574023311634434","Labelme从安装到标注：零基础完整指南","本文手把手教你安装开源图像标注神器Labelme，详解多边形/矩形标注技巧，并附JSON转数据集代码！适合计算机视觉/深度学习初学者，小白也能秒懂～","https://i-blog.csdnimg.cn/direct/f07cfa17b8a44fbb8fcf07986f59a3f8.png",992,"1935494198236590081","AI妈妈手把手","https://i-avatar.csdnimg.cn/7380e0eb3a89485689899cb2710e3bc1_qiutesting.jpg",[],1755080154000,[185,208,225,237,268,281,295,317,327,344],{"id":186,"title":187,"description":188,"imgUrl":189,"views":190,"ownerId":191,"ownerName":192,"ownerHeadUrl":193,"tagList":194,"time":207},"1982192832984186881","vivo响应式官网","1.引入各种文件网页图标Bootstrap CSSBootstrap JS当加上标签后，是通过搜索看到的","https://i-blog.csdnimg.cn/direct/2ddefc6e5b7a4740b2790fc21a8c3658.png",0,"1903250487770689537","β添砖java","https://i-avatar.csdnimg.cn/a3f431391b70479284fe05c48aba64be_2401_87118211.jpg",[195,198,201,204],{"id":196,"name":197},14,"前端",{"id":199,"name":200},16,"css",{"id":202,"name":203},353,"html",{"id":205,"name":206},14320,"1024程序员节",1761426573000,{"id":209,"title":210,"description":211,"imgUrl":212,"views":213,"ownerId":214,"ownerName":215,"ownerHeadUrl":216,"tagList":217,"time":224},"1982162676236222465","C标准库--C99--布尔型＜stdbool.h＞","在 C99 标准之前，C 语言中通常使用整数类型（如 int）来表示布尔值。    例如，0 表示假，非零值（通常是 1）表示真。这种方式虽然可行，但缺乏直观性和类型安全性。    为了解决这个问题，C99 标准引入了 stdbool.h 头文件，定义了布尔类型和相关宏。    \u003Cstdbool.h> 是 C 语言中的一个标准头文件，定义了布尔类型及其相关的常量。    它使得 C 语言的布尔类型（bool）变得更加明确和可用，避免了使用整数（如 0 或 1）来表示布尔值的传统做法。","https://i-blog.csdnimg.cn/direct/1a0305d06a2c4b768ae7d515d399b75f.png",2,"1971698893820325889","逐步前行","https://profile-avatar.csdnimg.cn/39e3cb3fcc034f56b32bbfa05540e9a4_black_leopard.jpg",[218,221],{"id":219,"name":220},12,"c语言",{"id":222,"name":223},13,"开发语言",1761419383000,{"id":226,"title":227,"description":228,"imgUrl":34,"views":213,"ownerId":229,"ownerName":230,"ownerHeadUrl":38,"tagList":231,"time":236},"1982162512595451906","【Go】--闭包","核心特征：内存结构示意图：Go编译器在遇到闭包时：","1904041830654750722","QX_hao",[232,233],{"id":222,"name":223},{"id":234,"name":235},239,"golang",1761419344000,{"id":238,"title":239,"description":240,"imgUrl":241,"views":213,"ownerId":242,"ownerName":243,"ownerHeadUrl":244,"tagList":245,"time":267},"1982139310058045441","Java 大视界 -- 基于 Java 的大数据机器学习模型在图像识别中的迁移学习与模型优化","亲爱的 Java 和 大数据爱好者们，大家好！在数字化浪潮的席卷下，Java 大数据技术凭借其卓越的性能和强大的生态体系，在众多领域实现了深度赋能，催生出一系列创新的应用场景。","https://i-blog.csdnimg.cn/direct/00fb8cca72f742299029271df3a89a4f.gif","1796885371938672642","青云交","https://file.jishuzhan.net/user/1796885371938672642/head.webp",[246,249,252,255,258,261,264],{"id":247,"name":248},3,"java",{"id":250,"name":251},4,"大数据",{"id":253,"name":254},1651,"迁移学习",{"id":256,"name":257},1982,"图像识别",{"id":259,"name":260},17389,"模型优化",{"id":262,"name":263},20160,"deeplearning4j",{"id":265,"name":266},43301,"机器学习模型",1761413812000,{"id":269,"title":270,"description":271,"imgUrl":34,"views":272,"ownerId":273,"ownerName":274,"ownerHeadUrl":38,"tagList":275,"time":280},"1982132322033008642","Java 集合框架之 Set 接口","一、Set 接口基础 （一）特点 - 用于存放任意 `Object` 对象。 - 无序：元素存储顺序与添加顺序无关。 - 无下标：不能通过索引访问元素。 - 元素不能重复：判断重复基于元素内容（而非地址），如两个内容相同的 `String` 对象会被视为重复元素。",1,"1982132325606555649","2501_90980081",[276,277],{"id":247,"name":248},{"id":278,"name":279},105627,"set接口",1761412146000,{"id":282,"title":283,"description":284,"imgUrl":34,"views":272,"ownerId":285,"ownerName":286,"ownerHeadUrl":287,"tagList":288,"time":294},"1982131734822060034","【算法笔记】暴力递归尝试","递归思想非常重要，计算机编程中很多算法都是要用到递归完成，同时递归也是解决很多问题的思路，比如动态规划，就是在递归的基础上，缓存结果，达到阶梯的目的。本文总结了一下递归尝试的常用题目和思路，方便深入的理解递归。","1716611429341073410","断剑zou天涯","https://file.jishuzhan.net/user/1716611429341073410/head.webp",[289,290,293],{"id":247,"name":248},{"id":291,"name":292},50,"笔记",{"id":130,"name":131},1761412006000,{"id":296,"title":297,"description":298,"imgUrl":34,"views":272,"ownerId":299,"ownerName":300,"ownerHeadUrl":38,"tagList":301,"time":316},"1982116257903214594","使用React如何静默打印页面：完整的前端打印解决方案","关键词：React静默打印, web-print-pdf npm包, 前端打印, 无预览打印, 自动化打印, React组件, 企业级打印, 打印解决方案","1971399575224762370","web打印社区",[302,303,306,309,312,315],{"id":196,"name":197},{"id":304,"name":305},15,"javascript",{"id":307,"name":308},36,"vue.js",{"id":310,"name":311},119,"react.js",{"id":313,"name":314},314,"pdf",{"id":205,"name":206},1761408316000,{"id":318,"title":319,"description":320,"imgUrl":34,"views":272,"ownerId":321,"ownerName":322,"ownerHeadUrl":323,"tagList":324,"time":326},"1982115850296557569","JWT令牌","指定签名的时候使用的签名算法SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;","1982115851882004482","Nobody_Cares","https://pic.cnblogs.com/face/3471133/20240622214236.png",[325],{"id":247,"name":248},1761408219000,{"id":328,"title":329,"description":330,"imgUrl":331,"views":272,"ownerId":332,"ownerName":333,"ownerHeadUrl":334,"tagList":335,"time":343},"1982115641353109506","Kafka入门：基础架构讲解，安装与使用","目录基础架构Producer（生产者）BrokerConsumer（消费者）Zookeeper其他启动Kafka","https://i-blog.csdnimg.cn/img_convert/61ac22164d0efbcd32f378bea885c691.png","1967098068937523202","沐浴露z","https://i-avatar.csdnimg.cn/13e0a4b0e5fa488fbfedeffb463a7868_Muyu1uz.jpg",[336,337,340],{"id":247,"name":248},{"id":338,"name":339},51,"分布式",{"id":341,"name":342},284,"kafka",1761408169000,{"id":345,"title":346,"description":347,"imgUrl":348,"views":272,"ownerId":349,"ownerName":350,"ownerHeadUrl":351,"tagList":352,"time":364},"1982114475533729794","从数据仓库到数据中台再到数据飞轮：我的数据技术成长之路","在过去的十余年里，我亲身经历了数据技术的三次重大演进。这不仅是技术的更迭，更是整个行业思维方式的革新。让我带您回顾这段充满挑战和收获的旅程，分享我的观察、思考和成长。","https://i-blog.csdnimg.cn/img_convert/f73dc330d33542290ddbcc41b1e97d67.png","1738443945832091650","神秘的土鸡","https://file.jishuzhan.net/user/1738443945832091650/head.webp",[353,354,357,360,363],{"id":247,"name":248},{"id":355,"name":356},11,"服务器",{"id":358,"name":359},435,"aigc",{"id":361,"name":362},1314,"数据库架构",{"id":205,"name":206},1761407891000,{"id":366,"title":367,"description":368,"content":369,"imgUrl":34,"views":190,"ownerId":370,"ownerName":371,"ownerHeadUrl":372,"tagList":373,"time":384,"articleSourceUrl":385,"preArticle":386,"nextArticle":391},"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",[374,375,376,377,378,381],{"id":247,"name":248},{"id":222,"name":223},{"id":304,"name":305},{"id":202,"name":203},{"id":379,"name":380},410,"ecmascript",{"id":382,"name":383},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":387,"title":388,"description":389,"imgUrl":390,"views":71},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",{"id":392,"title":393,"description":394,"imgUrl":395,"views":396},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",6,["Reactive",398],{"$sisPC2":399},false,["Set"],["ShallowReactive",402],{"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>