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><!----></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/1966564307518930945" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>2zcode</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>基于Matlab不同作战类型下兵力动力学模型的构建与稳定性分析</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>matlab</span><!--]--><!--]--></div></a><a href="/article/1966563707691515905" 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>2 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>html中css的四种定位方式</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><!--]--><!--]--></div></a><a href="/article/1966555364679794690" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>大怪v</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>3 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>前端佬：机器学习？我也会啊！😎😎😎手“摸”手教你做个”自动驾驶“~</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>机器学习</span><!--]--><!--]--></div></a><a href="/article/1966542350438154242" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>期待のcode</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>4 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Spring框架1—Spring的IOC核心技术1</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>后端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>spring</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>架构</span><!--]--><!--]--></div></a><a href="/article/1966540274517721090" 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>4 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>【RelayMQ】基于 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>rabbitmq</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>java-rabbitmq</span><!--]--><!--]--></div></a><a href="/article/1966534636634947586" 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>4 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>JVM 全面详解：深入理解 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>jvm</span><!--]--><!--]--></div></a><a href="/article/1966530966526672898" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>上官浩仁</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>5 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>springboot excel 表格入门与实战</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>excel</span><!--]--><!--]--></div></a><a href="/article/1966526991018541058" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>zyx没烦恼</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>5 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Qt 基础编程核心知识点全解析：含 Hello World 实现、对象树、坐标系及开发工具使用</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>qt</span><!--]--><!--]--></div></a><a href="/article/1966526818829778946" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>木心爱编程</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>5 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>C++链表实战：STL与手动实现详解</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>开发语言</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>c++</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>链表</span><!--]--><!--]--></div></a><!--]--></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/1964144273521688578" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>01</span><span class="article-title" data-v-9f329d47>conda中设置镜像地址（附所有可换的地址）</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/1963778781145513986" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）</span></a><a href="/article/1963162390293954562" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>UV 工具安装与国内镜像源配置指南</span></a><a href="/article/1962324213798846466" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程</span></a><a href="/article/1822835789134827521" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>突破百度网盘的下载限速，两种方法教会你【超详细】</span></a><a href="/article/1895130586004066306" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>KGG转MP3工具|非KGM文件|解密音频</span></a><a href="/article/1964243216893001729" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员</span></a><a href="/article/1963805922956460033" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>46个Nano-banana 精选提示词，持续更新中</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":354,"once":357,"_errors":358,"serverRendered":360,"path":361},["ShallowReactive",3],{"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":4,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":162,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":326,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":328},[5,22,41,58,80,101,116,132,147],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":21},"1966564307518930945","基于Matlab不同作战类型下兵力动力学模型的构建与稳定性分析","兵力对抗动力学建模是战争模拟与军事决策中的重要研究方向。传统的拉普拉斯平方律能够描述正规战中的兵力消耗过程，但在游击战、混合战等复杂场景下则存在局限性。为此，本文针对不同作战类型，建立了相应的兵力动力学模型，并对系统的稳定性进行了分析。首先，在正规战情形下，基于拉普拉斯平方律构建微分方程模型，描述双方兵力随时间的演化规律。其次，在游击战情形下，引入非对称接触与非均匀消耗机制，提出适应稀疏交战环境的动力学模型。进一步地，在混合战条件下，利用加权参数将正规战与游击战模型进行耦合，从而得到能够描述复合作战的混合","https://i-blog.csdnimg.cn/img_convert/456eaa3b561e740f2e24eb7151f8797d.png",1,"1858270590100574209","2zcode","https://profile-avatar.csdnimg.cn/dcdb58209d26488297e010f832fbd60d_zsw1218.jpg",[15,18],{"id":16,"name":17},13,"开发语言",{"id":19,"name":20},157,"matlab",1757700442000,{"id":23,"title":24,"description":25,"imgUrl":26,"views":10,"ownerId":27,"ownerName":28,"ownerHeadUrl":29,"tagList":30,"time":40},"1966563707691515905","html中css的四种定位方式","通俗解释### 1. 静态定位：`position: static;` (默认状态，没有特殊定位)* **通俗解释**：这是家具的“出厂默认状态”。家具会老老实实地按照房间的“阅读顺序”一个接一个地摆放，从上到下，从左到右。你不能用 `top`、`bottom`、`left`、`right` 这些指令来移动它，它会完全忽略这些指令。 * **特点**： * 这是所有元素的**默认定位方式**，你不用特意写 `position: static;`，它本来就是这样的。 * 它在文档流中占据自己的位置，后面的元","","1966477576522219522","面向星辰","https://profile-avatar.csdnimg.cn/012918aa5b774855957bf8a2b6dba27f_mzh202209421.jpg",[31,34,37],{"id":32,"name":33},14,"前端",{"id":35,"name":36},16,"css",{"id":38,"name":39},353,"html",1757700299000,{"id":42,"title":43,"description":44,"imgUrl":45,"views":10,"ownerId":46,"ownerName":47,"ownerHeadUrl":48,"tagList":49,"time":57},"1966555364679794690","前端佬：机器学习？我也会啊！😎😎😎手“摸”手教你做个”自动驾驶“~","神经网络？人工智能？这些词应该都看腻歪了吧？想必还没有人不知道吧？啥？不知道？那.....别走😭😭😭😭，听我说！","https://oss.xyyzone.com/jishuzhan/article/1966555364679794690/62a0eaf6afe73974d27b78913925465f.webp","1747803825013526530","大怪v","https://file.jishuzhan.net/user/1747803825013526530/head.webp",[50,51,54],{"id":32,"name":33},{"id":52,"name":53},15,"javascript",{"id":55,"name":56},141,"机器学习",1757698310000,{"id":59,"title":60,"description":61,"imgUrl":62,"views":10,"ownerId":63,"ownerName":64,"ownerHeadUrl":65,"tagList":66,"time":79},"1966542350438154242","Spring框架1—Spring的IOC核心技术1","Spring 是一个开源的企业级 Java 应用开发框架，由 Rod Johnson 于 2003 年基于其著作《Expert One-On-One J2EE Development and Design》中阐述的设计理念与原型开发而成。该框架的核心设计目标是解决企业级应用开发的复杂性，尤其聚焦于消除业务逻辑层与数据访问层、表现层等其他层级之间的紧耦合问题 —— 而这一目标的实现，核心在于将面向接口编程的思想贯穿于整个应用的设计与实现过程。","https://i-blog.csdnimg.cn/direct/d1dd0d3c51934cb1bc68f0338dbdfacc.png","1936706395373613058","期待のcode","https://i-avatar.csdnimg.cn/43dad432e38e44fba194cbf340cde250_2401_84284464.jpg",[67,70,73,76],{"id":68,"name":69},3,"java",{"id":71,"name":72},55,"后端",{"id":74,"name":75},110,"spring",{"id":77,"name":78},238,"架构",1757695207000,{"id":81,"title":82,"description":83,"imgUrl":84,"views":10,"ownerId":85,"ownerName":86,"ownerHeadUrl":87,"tagList":88,"time":100},"1966540274517721090","【RelayMQ】基于 Java 实现轻量级消息队列（七）","目录一. Virtual1.1 VirtualName1.2 虚拟机中的属性二. Virtual中的方法","https://i-blog.csdnimg.cn/direct/f3ea6ec66665426e81986d75842a9f4a.png","1897149422823804930","葵野寺","https://profile-avatar.csdnimg.cn/default.jpg",[89,90,91,94,97],{"id":68,"name":69},{"id":16,"name":17},{"id":92,"name":93},17,"网络",{"id":95,"name":96},417,"rabbitmq",{"id":98,"name":99},1068,"java-rabbitmq",1757694712000,{"id":102,"title":103,"description":104,"imgUrl":105,"views":106,"ownerId":107,"ownerName":108,"ownerHeadUrl":109,"tagList":110,"time":115},"1966534636634947586","JVM 全面详解：深入理解 Java 的核心运行机制","Jvm就是java虚拟机，文本文件(java)->编译器->.class文件->jvm->虚拟指令->执行引擎->解释为机器指令执行","https://i-blog.csdnimg.cn/direct/4f3ba1e6d70c4e549e5f84b6b082caee.jpeg",0,"1965758381740310530","书院门前细致的苹果","https://profile-avatar.csdnimg.cn/5c78861c22114e86bc0ac948190feb2c_2301_79782001.jpg",[111,112],{"id":68,"name":69},{"id":113,"name":114},23,"jvm",1757693368000,{"id":117,"title":118,"description":119,"imgUrl":26,"views":10,"ownerId":120,"ownerName":121,"ownerHeadUrl":122,"tagList":123,"time":131},"1966530966526672898","springboot excel 表格入门与实战","https://gitee.com/supervol/loong-springboot-study（记得给个start，感谢）","1963839832432099329","上官浩仁","https://profile-avatar.csdnimg.cn/1d517bb2ecff4b44aabf74cd057fbaac_u013538795.jpg",[124,125,128],{"id":68,"name":69},{"id":126,"name":127},48,"spring boot",{"id":129,"name":130},578,"excel",1757692493000,{"id":133,"title":134,"description":135,"imgUrl":136,"views":137,"ownerId":138,"ownerName":139,"ownerHeadUrl":140,"tagList":141,"time":146},"1966526991018541058","Qt 基础编程核心知识点全解析：含 Hello World 实现、对象树、坐标系及开发工具使用","（1）双击：\"widget.ui\" ⽂件；（2）拖拽控件⾄ui界⾯窗并修改内容；（3）构建并运⾏，效果如下所⽰：","https://i-blog.csdnimg.cn/direct/e5129da4ae8f4adfa47be35e07c55dfb.png",2,"1805570846983458817","zyx没烦恼","https://profile-avatar.csdnimg.cn/173900c227a846c983160affed838156_m0_73634434.jpg",[142,143],{"id":16,"name":17},{"id":144,"name":145},75,"qt",1757691545000,{"id":148,"title":149,"description":150,"imgUrl":26,"views":10,"ownerId":151,"ownerName":152,"ownerHeadUrl":87,"tagList":153,"time":161},"1966526818829778946","C++链表实战：STL与手动实现详解","C++中链表的使用主要涉及标准库中的std::list容器以及手动实现链表结构两种方式。以下是关于C++链表使用的详细说明。","1963992153237536770","木心爱编程",[154,155,158],{"id":16,"name":17},{"id":156,"name":157},27,"c++",{"id":159,"name":160},143,"链表",1757691504000,[163,176,193,205,222,233,246,271,296,314],{"id":164,"title":165,"description":166,"imgUrl":26,"views":167,"ownerId":168,"ownerName":169,"ownerHeadUrl":170,"tagList":171,"time":175},"1964144273521688578","conda中设置镜像地址（附所有可换的地址）","在设置任一镜像前，请运行以下命令清除旧配置：这会彻底清除所有 channel 与相关设置，确保配置干净无残留。",531,"1755423461271932929","小树苗m","https://file.jishuzhan.net/user/1755423461271932929/head.webp",[172],{"id":173,"name":174},437,"conda",1757123461000,{"id":177,"title":178,"description":179,"imgUrl":180,"views":181,"ownerId":182,"ownerName":183,"ownerHeadUrl":184,"tagList":185,"time":192},"1950564991094009857","UV安装并设置国内源","国内网络问题无法下载解决方案 来到github下载自己对应系统的包： https://github.com/astral-sh/uv/releases","https://i-blog.csdnimg.cn/direct/f35ac3e06c9448d38fa3eb735254c454.png",9967,"1684403235311325185","落魄实习生","https://file.jishuzhan.net/user/1684403235311325185/head.png",[186,189],{"id":187,"name":188},58,"python",{"id":190,"name":191},4529,"uv",1753885908000,{"id":194,"title":195,"description":196,"imgUrl":26,"views":197,"ownerId":198,"ownerName":199,"ownerHeadUrl":87,"tagList":200,"time":204},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。",205,"1851173111697772545","BillKu",[201],{"id":202,"name":203},424,"github",1757555781000,{"id":206,"title":207,"description":208,"imgUrl":209,"views":210,"ownerId":211,"ownerName":212,"ownerHeadUrl":213,"tagList":214,"time":221},"1963778781145513986","保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）","在这篇文章里，我想和大家分享一下我是如何一步步建立一个问答助手Demo的经历。过程中遇到了一些挑战，但同时也找到了解决办法，希望能给正在尝试类似项目的朋友们带来一点帮助和启发。","https://oss.xyyzone.com/jishuzhan/article/1963778781145513986/51d71c82ab8ac333092b502bb4b46944.webp",361,"1909895503283814402","吏部侍郎","https://p26-passport.byteacctimg.com/img/mosaic-legacy/3791/5070639578~300x300.image",[215,218],{"id":216,"name":217},39,"人工智能",{"id":219,"name":220},1010,"产品经理",1757036321000,{"id":223,"title":224,"description":225,"imgUrl":26,"views":226,"ownerId":227,"ownerName":228,"ownerHeadUrl":229,"tagList":230,"time":232},"1963162390293954562","UV 工具安装与国内镜像源配置指南","UV 是由 Astral 团队开发的高性能 Python 包管理器和解析器，旨在提供比传统工具更快的依赖解析和安装体验。本文档提供 UV 的安装指南及国内镜像源配置方法。",464,"1905462195645919233","凯哥1970","https://p26-passport.byteacctimg.com/img/mosaic-legacy/3793/3114521287~300x300.image",[231],{"id":71,"name":72},1756889362000,{"id":234,"title":235,"description":236,"imgUrl":237,"views":238,"ownerId":239,"ownerName":240,"ownerHeadUrl":241,"tagList":242,"time":245},"1962324213798846466","A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程","大家好，我是花姐～👋 今天来给大家分享一个让我眼前一亮的开源项目：Kronos。 一句话总结：它是第一个真正意义上面向金融K线数据的 开源大模型！","https://oss.xyyzone.com/jishuzhan/article/1962324213798846466/1083f789ef1b58f2488fec427ef2db89.webp",712,"1688833694627794946","这里有鱼汤","https://file.jishuzhan.net/user/1688833694627794946/head.gif",[243,244],{"id":71,"name":72},{"id":187,"name":188},1756689525000,{"id":247,"title":248,"description":249,"imgUrl":250,"views":251,"ownerId":252,"ownerName":253,"ownerHeadUrl":254,"tagList":255,"time":270},"1822835789134827521","突破百度网盘的下载限速，两种方法教会你【超详细】","Hello，大家后，我是博主英杰，前几天，我在使用百度网盘过程中，下载速度极慢，自己作为一个白嫖党，开会员也是心疼那点钱，所以在网上找了几个有效解决百度网盘限速问题的教程，并且亲测之后，觉得有效果，于是写了篇文章","https://i-blog.csdnimg.cn/direct/0f5170520bbc4be586476a8c1bba9215.webp",5800,"1681453983056531457","Yan-英杰","https://file.jishuzhan.net/user/1681453983056531457/head.png",[256,257,258,261,264,267],{"id":92,"name":93},{"id":187,"name":188},{"id":259,"name":260},85,"tcp/ip",{"id":262,"name":263},151,"百度",{"id":265,"name":266},161,"阿里云",{"id":268,"name":269},344,"云计算",1723432893000,{"id":272,"title":273,"description":274,"imgUrl":26,"views":275,"ownerId":276,"ownerName":277,"ownerHeadUrl":278,"tagList":279,"time":295},"1895130586004066306","KGG转MP3工具|非KGM文件|解密音频","本文章分为两部分老版本kgm转mp3项目新版本kgg转mp3项目先废话一下：在数字音乐时代，我们常常会遇到各种格式的音乐文件，其中酷狗音乐的KGM格式就是一种常见的专用格式。然而，这种格式在其他设备或播放器上可能无法直接播放，给用户带来了不便。为了解决这一问题，之前有个项目，推出了酷狗KGM转MP3或FLAC工具。它能够将酷狗音乐的KGM格式文件轻松转换为常见的MP3或FLAC格式，让你在任何设备上都能畅享音乐。",10611,"1895130588738752513","FeiCat Henry","https://profile-avatar.csdnimg.cn/1db505df81b74eaba91034ff4b0b081a_mayiseeu.jpg",[280,283,286,289,292],{"id":281,"name":282},65,"科技",{"id":284,"name":285},97,"算法",{"id":287,"name":288},580,"音视频",{"id":290,"name":291},729,"软件工程",{"id":293,"name":294},2183,"视频编解码",1740669316000,{"id":297,"title":298,"description":299,"imgUrl":300,"views":301,"ownerId":302,"ownerName":303,"ownerHeadUrl":304,"tagList":305,"time":313},"1964243216893001729","教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员","上个月开发了一个过 Gemini 教育优惠的一键系统，测试了一段时间了，下面教大家如何过 Gemini 学生优惠的二次验证和新号的Sheerid认证。","https://oss.xyyzone.com/jishuzhan/article/1964243216893001729/81e1555785f47befab1a1e1cc3b07d8f.webp",398,"1763458362080497665","摆烂工程师","https://file.jishuzhan.net/user/1763458362080497665/head.webp",[306,307,310],{"id":71,"name":72},{"id":308,"name":309},232,"程序员",{"id":311,"name":312},27217,"gemini",1757147051000,{"id":315,"title":316,"description":317,"imgUrl":318,"views":319,"ownerId":320,"ownerName":321,"ownerHeadUrl":322,"tagList":323,"time":325},"1963805922956460033","46个Nano-banana 精选提示词，持续更新中","这些案例主要来源于Twitter/ X 🐦、小红书📕等自媒体平台。喜欢就点 ⭐ Star 收藏起来吧！","https://oss.xyyzone.com/jishuzhan/article/1963805922956460033/477d305a33fb4ee5ab133086a5950209.webp",299,"1770301577052033026","非优秀程序员","https://file.jishuzhan.net/user/1770301577052033026/head.webp",[324],{"id":32,"name":33},1757042792000,{"adMap":327},["Map"],{"id":329,"title":330,"description":331,"content":332,"imgUrl":26,"views":106,"ownerId":333,"ownerName":334,"ownerHeadUrl":335,"tagList":336,"time":347,"articleSourceUrl":348,"preArticle":349},"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",[337,338,339,340,341,344],{"id":68,"name":69},{"id":16,"name":17},{"id":52,"name":53},{"id":38,"name":39},{"id":342,"name":343},410,"ecmascript",{"id":345,"name":346},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":350,"title":351,"description":352,"imgUrl":353,"views":10},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",["Reactive",355],{"$sisPC2":356},false,["Set"],["ShallowReactive",359],{"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>