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/1974304186532691970" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Full Stack Developme</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 工具类 Hutool、Guava 与 Apache Commons 的区别</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>apache</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>guava</span><!--]--><!--]--></div></a><a href="/article/1974300436619395074" 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>24 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室（附完整源码参考）</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 boot</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>websocket</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>typescript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>vue</span><!--]--><!--]--></div></a><a href="/article/1974295302627721218" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>菜鸟plus＋</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>44 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Captcha</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>开发语言</span><!--]--><!--]--></div></a><a href="/article/1974294405038276609" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>那个松鼠很眼熟w</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>8.设计模式-两阶段终止（优雅停机）</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--]--></div></a><a href="/article/1974292551453704194" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>hqwest</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>QT肝8天13--删除用户</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>qt</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>csdn开发云</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>qt分页</span><!--]--><!--]--></div></a><a href="/article/1974291997826547713" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>聪明的笨猪猪</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>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><!--]--><!--]--></div></a><a href="/article/1974287350915203073" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>李小白66</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>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><!--]--><!--]--></div></a><a href="/article/1974286847355453442" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>惬意小西瓜</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>3.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><!--]--><!--]--></div></a><a href="/article/1974284880025550849" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>YA333</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>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><!--]--><!--]--></div></a><a href="/article/1974282955074895874" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>koooo～</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>2 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Vue3中的依赖注入</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><!--]--></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/1895130586004066306" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>01</span><span class="article-title" data-v-9f329d47>KGG转MP3工具|非KGM文件|解密音频</span></a><a href="/article/1950564991094009857" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>UV安装并设置国内源</span></a><a href="/article/1965957555249266689" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>GitHub 镜像站点</span></a><a href="/article/1895064707199406081" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>jdk21下载、安装（Windows、Linux、macOS）</span></a><a href="/article/1971858135776817153" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>OpenSpeedy简介</span></a><a href="/article/1932679439594336257" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>Linux下V2Ray安装配置指南</span></a><a href="/article/1963805922956460033" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>46个Nano-banana 精选提示词，持续更新中</span></a><a href="/article/1971064703109087233" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>最新b站加密关键字段的逆向（视频和评论爬取）</span></a><a href="/article/1907226205617729538" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>HarmonyOS NEXT开发进阶（十四）：HarmonyOS应用开发者基础认证试题集汇总及答案解析</span></a><a href="/article/1877578162792042498" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法</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":393,"once":396,"_errors":397,"serverRendered":399,"path":400},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":182,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":184,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":358},[5,31,48,61,87,103,122,136,152,168],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":30},"1895130586004066306","KGG转MP3工具|非KGM文件|解密音频","本文章分为两部分老版本kgm转mp3项目新版本kgg转mp3项目先废话一下：在数字音乐时代，我们常常会遇到各种格式的音乐文件，其中酷狗音乐的KGM格式就是一种常见的专用格式。然而，这种格式在其他设备或播放器上可能无法直接播放，给用户带来了不便。为了解决这一问题，之前有个项目，推出了酷狗KGM转MP3或FLAC工具。它能够将酷狗音乐的KGM格式文件轻松转换为常见的MP3或FLAC格式，让你在任何设备上都能畅享音乐。","",11884,"1895130588738752513","FeiCat Henry","https://profile-avatar.csdnimg.cn/1db505df81b74eaba91034ff4b0b081a_mayiseeu.jpg",[15,18,21,24,27],{"id":16,"name":17},65,"科技",{"id":19,"name":20},97,"算法",{"id":22,"name":23},580,"音视频",{"id":25,"name":26},729,"软件工程",{"id":28,"name":29},2183,"视频编解码",1740669316000,{"id":32,"title":33,"description":34,"imgUrl":35,"views":36,"ownerId":37,"ownerName":38,"ownerHeadUrl":39,"tagList":40,"time":47},"1950564991094009857","UV安装并设置国内源","国内网络问题无法下载解决方案 来到github下载自己对应系统的包： https://github.com/astral-sh/uv/releases","https://i-blog.csdnimg.cn/direct/f35ac3e06c9448d38fa3eb735254c454.png",11432,"1684403235311325185","落魄实习生","https://file.jishuzhan.net/user/1684403235311325185/head.png",[41,44],{"id":42,"name":43},58,"python",{"id":45,"name":46},4529,"uv",1753885908000,{"id":49,"title":50,"description":51,"imgUrl":9,"views":52,"ownerId":53,"ownerName":54,"ownerHeadUrl":55,"tagList":56,"time":60},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。",2099,"1851173111697772545","BillKu","https://profile-avatar.csdnimg.cn/default.jpg",[57],{"id":58,"name":59},424,"github",1757555781000,{"id":62,"title":63,"description":64,"imgUrl":65,"views":66,"ownerId":67,"ownerName":68,"ownerHeadUrl":69,"tagList":70,"time":86},"1895064707199406081","jdk21下载、安装（Windows、Linux、macOS）","1. 下载安装访问 Oracle 官方 JDK 下载页面 或 OpenJDK 下载页面，根据自己的系统选择合适的 Windows 版本进行下载（通常选择 .msi 安装包）。","https://i-blog.csdnimg.cn/direct/a5160a0d2bcf448c99822060adca401a.png",2684,"1802596723579686913","燕雀安知鸿鹄之志哉.","https://profile-avatar.csdnimg.cn/ccbdfdeb69004514be9adf81455baade_weixin_68416970.jpg",[71,74,77,80,83],{"id":72,"name":73},17,"网络",{"id":75,"name":76},102,"安全",{"id":78,"name":79},113,"web安全",{"id":81,"name":82},154,"网络安全",{"id":84,"name":85},444,"系统安全",1740653609000,{"id":88,"title":89,"description":90,"imgUrl":9,"views":91,"ownerId":92,"ownerName":93,"ownerHeadUrl":94,"tagList":95,"time":102},"1971858135776817153","OpenSpeedy简介","OpenSpeedy 是一款开源免费的游戏变速工具，致力于帮助玩家突破游戏自身的帧率限制，获得更丝滑顺畅的游戏体验。以下是关于它的详细介绍：",342,"1688392198241914882","AscendKing","https://file.jishuzhan.net/user/1688392198241914882/head.png",[96,99],{"id":97,"name":98},96153,"游戏加速",{"id":100,"name":101},102383,"openspeedy",1758962589000,{"id":104,"title":105,"description":106,"imgUrl":9,"views":107,"ownerId":108,"ownerName":109,"ownerHeadUrl":110,"tagList":111,"time":121},"1932679439594336257","Linux下V2Ray安装配置指南","本文档提供了在Linux系统上安装、配置和使用V2Ray的完整流程，包括从订阅链接自动生成配置文件、设置代理环境变量以及常见问题的解决方案。",6827,"1932679443885109249","Bigbig.","https://profile-avatar.csdnimg.cn/d79b884ab2274031998690f8b491b6d7_weixin_45036087.jpg",[112,115,118],{"id":113,"name":114},9,"linux",{"id":116,"name":117},10,"运维",{"id":119,"name":120},43,"chrome",1749621660000,{"id":123,"title":124,"description":125,"imgUrl":126,"views":127,"ownerId":128,"ownerName":129,"ownerHeadUrl":130,"tagList":131,"time":135},"1963805922956460033","46个Nano-banana 精选提示词，持续更新中","这些案例主要来源于Twitter/ X 🐦、小红书📕等自媒体平台。喜欢就点 ⭐ Star 收藏起来吧！","https://oss.xyyzone.com/jishuzhan/article/1963805922956460033/477d305a33fb4ee5ab133086a5950209.webp",1720,"1770301577052033026","非优秀程序员","https://file.jishuzhan.net/user/1770301577052033026/head.webp",[132],{"id":133,"name":134},14,"前端",1757042792000,{"id":137,"title":138,"description":139,"imgUrl":140,"views":141,"ownerId":142,"ownerName":143,"ownerHeadUrl":144,"tagList":145,"time":151},"1971064703109087233","最新b站加密关键字段的逆向（视频和评论爬取）","首先是视频依旧是随机打开个视频查看f12刷新一下（这边建议你先登录）注意这两个字段：vd_source，spm_id_from这是作为请求体中的两个重要参数。这是b站的防盗链反爬机制，所以要放在请求体的params中。这里我直接先放出代码","https://i-blog.csdnimg.cn/direct/0d5ef3f56d274646947e3b4de8b60e57.png",122,"1857429796368158721","Nue.js","https://profile-avatar.csdnimg.cn/d82cb737257c4fd7aebcf55139aa8e28_qq_68890680.jpg",[146,149,150],{"id":147,"name":148},57,"爬虫",{"id":42,"name":43},{"id":75,"name":76},1758773420000,{"id":153,"title":154,"description":155,"imgUrl":156,"views":75,"ownerId":157,"ownerName":158,"ownerHeadUrl":159,"tagList":160,"time":167},"1907226205617729538","HarmonyOS NEXT开发进阶（十四）：HarmonyOS应用开发者基础认证试题集汇总及答案解析","鸿蒙原生技能学习阶段，通过官方认证的资格十分有必要，在项目实战前掌握基础开发理论也是重中之重，可以避免在项目开发阶段发生基本常识错误。本文结合自身认证实践汇总形成鸿蒙应用开发者基础认证题库，及相应的试题解析，以求能够让开发者知其然并知其所以然。","https://i-blog.csdnimg.cn/direct/2497a549a059496bbee5b5f4e1d7c3c6.png","1686551337153597442","No Silver Bullet","https://file.jishuzhan.net/user/1686551337153597442/head.png",[161,164],{"id":162,"name":163},181,"华为",{"id":165,"name":166},1331,"harmonyos",1743553136000,{"id":169,"title":170,"description":171,"imgUrl":172,"views":173,"ownerId":174,"ownerName":175,"ownerHeadUrl":176,"tagList":177,"time":181},"1877578162792042498","MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法","5G网速虽快，手机功耗也大。【小米澎湃OS, Xiaomi HyperOS显示/隐藏5G开关的方法】1.1.小米MIUI系统升级后，被强制连5G，手动设置开关被隐藏，如下图：","https://i-blog.csdnimg.cn/direct/d88af80880f44e84b94ecd2e9696ef04.jpg",1012,"1726617104355954689","笑春风oO","https://file.jishuzhan.net/user/1726617104355954689/head.webp",[178],{"id":179,"name":180},736,"社交电子",1736484492000,{"adMap":183},["Map"],[185,204,230,244,254,280,299,310,325,341],{"id":186,"title":187,"description":188,"imgUrl":9,"views":189,"ownerId":190,"ownerName":191,"ownerHeadUrl":192,"tagList":193,"time":203},"1974304186532691970","Java 工具类 Hutool、Guava 与 Apache Commons 的区别","Hutool、Guava 和 Apache Commons 都是 Java 中非常流行且功能强大的工具类库，但它们的设计哲学、侧重点和现代性上有显著的区别。",1,"1904508364279853057","Full Stack Developme","https://profile-avatar.csdnimg.cn/5d63024eaeb2433a991a3831ab58c929_lizhengyu891231.jpg",[194,197,200],{"id":195,"name":196},3,"java",{"id":198,"name":199},553,"apache",{"id":201,"name":202},4292,"guava",1759545773000,{"id":205,"title":206,"description":207,"imgUrl":208,"views":189,"ownerId":209,"ownerName":210,"ownerHeadUrl":211,"tagList":212,"time":229},"1974300436619395074","SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室（附完整源码参考）","目录一、效果展示与消息格式。二、代码实现。（1）引入 websocket stater 起步依赖。（2）编写 websocket 配置类。","https://i-blog.csdnimg.cn/direct/0acfca1299b146cca2e7333dbe9d9be7.png","1730863999328718849","岁岁岁平安","https://file.jishuzhan.net/user/1730863999328718849/head.webp",[213,214,217,220,223,226],{"id":195,"name":196},{"id":215,"name":216},48,"spring boot",{"id":218,"name":219},82,"websocket",{"id":221,"name":222},83,"网络协议",{"id":224,"name":225},250,"typescript",{"id":227,"name":228},351,"vue",1759544879000,{"id":231,"title":232,"description":233,"imgUrl":9,"views":234,"ownerId":235,"ownerName":236,"ownerHeadUrl":237,"tagList":238,"time":243},"1974295302627721218","Captcha","Captcha = Completely Automated Public Turing test to tell Computers and Humans Apart 意思是：一种 全自动区分计算机和人类的测试，通过生成随机、难以被机器识别的内容，让用户输入，来确认操作者是人类而非程序",0,"1967444497077944321","菜鸟plus＋","https://i-avatar.csdnimg.cn/f4153fec32174ad0b762297e7a8025fe_hanjie13141516.jpg",[239,240],{"id":195,"name":196},{"id":241,"name":242},13,"开发语言",1759543655000,{"id":245,"title":246,"description":247,"imgUrl":9,"views":234,"ownerId":248,"ownerName":249,"ownerHeadUrl":250,"tagList":251,"time":253},"1974294405038276609","8.设计模式-两阶段终止（优雅停机）","应用程序停止之前，内部的线程如果有业务正在执行，如何优雅的关闭。","1974025295054307329","那个松鼠很眼熟w","https://i-avatar.csdnimg.cn/b0adcefa5d4f46e0ae850cd7945b7001_weimin821.jpg",[252],{"id":195,"name":196},1759543441000,{"id":255,"title":256,"description":257,"imgUrl":258,"views":189,"ownerId":259,"ownerName":260,"ownerHeadUrl":261,"tagList":262,"time":279},"1974292551453704194","QT肝8天13--删除用户","在Qt中执行删除操作通常涉及删除对象、文件或数据库记录等。删除操作需要谨慎处理，确保资源被正确释放且不会导致程序崩溃。","https://i-blog.csdnimg.cn/direct/e4a48447e4eb4837aca55731540ed3b6.png","1692742268986855425","hqwest","https://file.jishuzhan.net/user/1692742268986855425/head.png",[263,264,267,270,273,276],{"id":241,"name":242},{"id":265,"name":266},27,"c++",{"id":268,"name":269},75,"qt",{"id":271,"name":272},4620,"csdn开发云",{"id":274,"name":275},103131,"列表分页",{"id":277,"name":278},103132,"qt分页",1759542999000,{"id":281,"title":282,"description":283,"imgUrl":9,"views":189,"ownerId":284,"ownerName":285,"ownerHeadUrl":286,"tagList":287,"time":298},"1974291997826547713","Java 高并发多线程 “基础”面试清单（含超通俗生活案例与深度理解）","一、并行与并发的核心区别是什么？如何通过日常场景快速区分？• 核心定义差异：并行是“同一时刻有多个任务真正同时执行”，必须依赖多CPU或多核心硬件支持；并发是“同一时刻仅一个任务执行，但通过CPU快速切换任务，让多个任务在一段时间内呈现‘同时进行’的效果”，本质是“时间片轮转”的模拟机制。","1972583581789782017","聪明的笨猪猪","https://i-avatar.csdnimg.cn/534abc5485a44168b2daa7adbab8ec3e_2401_89363342.jpg",[288,289,292,295],{"id":195,"name":196},{"id":290,"name":291},47,"经验分享",{"id":293,"name":294},50,"笔记",{"id":296,"name":297},211,"面试",1759542867000,{"id":300,"title":301,"description":302,"imgUrl":303,"views":189,"ownerId":304,"ownerName":305,"ownerHeadUrl":55,"tagList":306,"time":309},"1974287350915203073","python 函数","python的内置函数:print() 在控制台输出input() 获取控制台输⼊的内容type() 获取变量的数据类型","https://i-blog.csdnimg.cn/direct/227e6659b6ec42139f7a6f5aa97fda3e.png","1841699225537089537","李小白66",[307,308],{"id":241,"name":242},{"id":42,"name":43},1759541759000,{"id":311,"title":312,"description":313,"imgUrl":314,"views":189,"ownerId":315,"ownerName":316,"ownerHeadUrl":317,"tagList":318,"time":324},"1974286847355453442","3.java常用类知识点","Java中的String属于引用数据类型，代表字符串。Java专门在堆中为字符串准备了一个字符串常量池。因为字符串使用比较频繁，放在字符串常量池中省去了对象的创建过程，从而提高程序的执行效率。（常量池属于一种缓存技术，缓存技术是提高程序执行效率的重要手段。）","https://i-blog.csdnimg.cn/direct/d2cd92519adc4453825c0d8946e14faa.png","1974286851361013761","惬意小西瓜","https://profile-avatar.csdnimg.cn/e35b1181bb28425e986292c85dfdeb25_2301_79747960.jpg",[319,320,321],{"id":195,"name":196},{"id":241,"name":242},{"id":322,"name":323},242,"分类",1759541639000,{"id":326,"title":327,"description":328,"imgUrl":9,"views":189,"ownerId":329,"ownerName":330,"ownerHeadUrl":331,"tagList":332,"time":340},"1974284880025550849","java设计模式五、适配器模式","文章没有视频清晰，推荐大家去某站的生生大佬的手写，讲的很清晰适配器模式（Adapter Pattern）是一种结构型设计模式，它允许不兼容的接口之间进行协作。简单来说，适配器模式就像是一个\"转换器\"，在两个不兼容的系统之间架起一座桥梁，让它们能够正常通信。","1955213666684547073","YA333","https://i-avatar.csdnimg.cn/22c3e1cedbe74fa992252d79ac641f1f_2301_79028279.jpg",[333,334,337],{"id":195,"name":196},{"id":335,"name":336},188,"设计模式",{"id":338,"name":339},1343,"适配器模式",1759541170000,{"id":342,"title":343,"description":344,"imgUrl":345,"views":234,"ownerId":346,"ownerName":347,"ownerHeadUrl":348,"tagList":349,"time":357},"1974282955074895874","Vue3中的依赖注入","在传统的组件跨级传值场景中，父组件要向孙组件传递数据时，必须经历“父组件 → 子组件 → 孙组件\"的层层传递过程。当组件层级很深，而中间组件并不需要这些数据时，这种传递方式会造成很大的代码冗余和性能浪费。今天我们将介绍一种更高效的解决方案——依赖注入，通过 provide 和 inject 实现快速的跨级传值。","https://i-blog.csdnimg.cn/direct/3fb09d30b7014e3dafcdc0164b9c294e.png","1929969950998966274","koooo～","https://i-avatar.csdnimg.cn/a727e64cebbe49fb894b8080af8bce0a.jpg",[350,351,354],{"id":133,"name":134},{"id":352,"name":353},15,"javascript",{"id":355,"name":356},36,"vue.js",1759540711000,{"id":359,"title":360,"description":361,"content":362,"imgUrl":9,"views":234,"ownerId":363,"ownerName":364,"ownerHeadUrl":365,"tagList":366,"time":379,"articleSourceUrl":380,"preArticle":381,"nextArticle":387},"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",[367,368,369,370,373,376],{"id":195,"name":196},{"id":241,"name":242},{"id":352,"name":353},{"id":371,"name":372},353,"html",{"id":374,"name":375},410,"ecmascript",{"id":377,"name":378},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":382,"title":383,"description":384,"imgUrl":385,"views":386},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",8,{"id":388,"title":389,"description":390,"imgUrl":391,"views":392},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",6,["Reactive",394],{"$sisPC2":395},false,["Set"],["ShallowReactive",398],{"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>