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/2050923249068998657" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>REDcker</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>21 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>开发语言</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>vue</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>ecmascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>php</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>js</span><!--]--><!--]--></div></a><a href="/article/2050913807556476929" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>W.A委员会</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>CSS中的单位</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>css3</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html5</span><!--]--><!--]--></div></a><a href="/article/2050904210590466049" 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>高级java每日一道面试题-2025年11月24日-容器与虚拟化题[Dockerj]-runc 的作用是什么？</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>oci 的命令行工具</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>runc 核心职责思维导图</span><!--]--><!--]--></div></a><a href="/article/2050903049074442242" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>用户6064876718896</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>AI 抢不走的技能：用 Claude API 构建自动化工作流实战</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--]--></div></a><a href="/article/2050900049522130945" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>我命由我12345</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>Kotlin 开发 - lateinit 关键字</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>android</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><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>kotlin</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>android studio</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>android-studio</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>android runtime</span><!--]--><!--]--></div></a><a href="/article/2050899665239998465" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>aXin_ya</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>微服务第八天 Sentinel 四种分布式事务模式</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/2050898893026689026" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Halo_tjn</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>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>开发语言</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>算法</span><!--]--><!--]--></div></a><a href="/article/2050898362023608322" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>nbwenren</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>2026实测：Gemini 3 镜像站视觉能力实践——拍照原型图，一键生成 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/2050897563914665986" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Linsk</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>Java和JavaScript的关系真是雷峰和雷峰塔的关系吗？</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>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>oracle</span><!--]--><!--]--></div></a><a href="/article/2050896492899139585" 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>浏览器文本复制到剪贴板：企业级最佳实践</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>javascript</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/2049469897118384130" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>01</span><span class="article-title" data-v-9f329d47>要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法</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/2047609374831607810" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>Codex 接入 DeepSeek API 完整配置文档</span></a><a href="/article/2048254266264059906" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>【AI】2026 年具身智能模型和世界模型总结</span></a><a href="/article/2048749962255728641" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>裂开！ChatGPT 居然开始要手机号验证，附详细解决方法</span></a><a href="/article/2048580911776727042" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>零基础教你claude code 接入 deepseek V4</span></a><a href="/article/2044279190728540162" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>2026年AI前瞻：量子AI、具身智能与科学发现的新纪元</span></a><a href="/article/2049015385375178753" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲</span></a><a href="/article/2048268850177835010" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>在Windows 11上安装Docker的踩坑记录</span></a><a href="/article/2044313323597004801" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>CC-Switch & Claude 基于 Linux 服务器安装使用指南</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":389,"once":392,"_errors":393,"serverRendered":395,"path":396},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":181,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":183,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":222},[5,25,39,61,73,87,103,124,140,159],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":24},"2049469897118384130","要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法","GPT5.4出来后，吸引力很多用户使用Codex，但最近OpenAI对Codex增加了风控，要求验证手机号了。不少用户在使用Codex 时发现： 👉 必须先完成手机号验证，才能正常使用Codex相关功能。但很多同学无法正常验证OpenAI的手机号，选中国号码却无法发送验证码，自己的86手机号验证不了OpenAI的Codex，怎么才能通过Codex的注册验证呢？","https://oss.xyyzone.com/jishuzhan/article/2049469897118384130/018e6fd4b25dfbaa3c0358b17f5f8635.webp",1605,"1727896759994159106","Mac的实验室","https://file.jishuzhan.net/user/1727896759994159106/head.webp",[15,18,21],{"id":16,"name":17},726,"openai",{"id":19,"name":20},1235,"ai编程",{"id":22,"name":23},8662,"cursor",1777466675000,{"id":26,"title":27,"description":28,"imgUrl":29,"views":30,"ownerId":31,"ownerName":32,"ownerHeadUrl":33,"tagList":34,"time":38},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。","",79175,"1851173111697772545","BillKu","https://profile-avatar.csdnimg.cn/default.jpg",[35],{"id":36,"name":37},424,"github",1757555781000,{"id":40,"title":41,"description":42,"imgUrl":29,"views":43,"ownerId":44,"ownerName":45,"ownerHeadUrl":46,"tagList":47,"time":60},"2047609374831607810","Codex 接入 DeepSeek API 完整配置文档","核心原理：让 Codex 以为自己连的是 OpenAI，实际通过两层代理转发到 DeepSeek。最终效果：Codex 里填任意 OpenAI 模型名（如 gpt-4.1），实际调用的是 deepseek-chat。",1692,"2047609376203145218","TS-33","https://pic.cnblogs.com/face/3740210/20251204121125.png",[48,51,54,57],{"id":49,"name":50},1887,"proxy",{"id":52,"name":53},12964,"codex",{"id":55,"name":56},67787,"deepseek",{"id":58,"name":59},92174,"反代",1777023092000,{"id":62,"title":63,"description":64,"imgUrl":29,"views":65,"ownerId":66,"ownerName":67,"ownerHeadUrl":33,"tagList":68,"time":72},"2048254266264059906","【AI】2026 年具身智能模型和世界模型总结","2026 年具身智能和世界模型领域开源模型爆发，以下按技术路线 + 应用场景双维度分类整理：建议用三维坐标系来理解和选型：",1171,"1929283659554664450","墨染天姬",[69],{"id":70,"name":71},39,"人工智能",1777176846000,{"id":74,"title":75,"description":76,"imgUrl":77,"views":78,"ownerId":79,"ownerName":80,"ownerHeadUrl":81,"tagList":82,"time":86},"2048749962255728641","裂开！ChatGPT 居然开始要手机号验证，附详细解决方法","ChatGPT居然又要手机号验证了！最近用 Codex 的时候，突然弹出一个窗口要我用手机号做验证。当时第一反应是：\"我靠，ChatGPT 不是早就能直接邮箱注册登录了吗，怎么又要手机号了？\"","https://oss.xyyzone.com/jishuzhan/article/2048749962255728641/731dbddf257f2e851f770eb0d31ca5dd.webp",1056,"1905083570396409857","爱吃的小肥羊","https://p3-passport.byteacctimg.com/img/user-avatar/e30f0c53f5f176519e59a74dabf53705~300x300.image",[83],{"id":84,"name":85},435,"aigc",1777295029000,{"id":88,"title":89,"description":90,"imgUrl":29,"views":91,"ownerId":92,"ownerName":93,"ownerHeadUrl":94,"tagList":95,"time":102},"2048580911776727042","零基础教你claude code 接入 deepseek V4","本文手把手教你用 DeepSeek V4 API 接入 Claude Code CLI，实现一个低成本、高质量的 AI 编程助手。全程可复刻，踩坑经验全收录。",977,"2020682725489967106","偶像佳沛","https://p3-passport.byteacctimg.com/img/user-avatar/84c2e8ee7e9c6cf4a16c6754cd42cd2c~300x300.image",[96,99],{"id":97,"name":98},14,"前端",{"id":100,"name":101},15,"javascript",1777254724000,{"id":104,"title":105,"description":106,"imgUrl":107,"views":108,"ownerId":109,"ownerName":110,"ownerHeadUrl":111,"tagList":112,"time":123},"2044279190728540162","2026年AI前瞻：量子AI、具身智能与科学发现的新纪元","从量子AI模型开源到国产智算集群落地，从数字智能走向物理世界，AI正在以前所未有的速度重塑技术与科学的边界。","https://i-blog.csdnimg.cn/direct/f0b70cc12552449cb6567fc2543e660e.webp",1398,"2017589747007930370","青桔柠薯片","https://i-avatar.csdnimg.cn/2fe650289e664194ba070dc63d71e38c_m0_53299663.jpg",[113,114,117,120],{"id":70,"name":71},{"id":115,"name":116},189,"ai",{"id":118,"name":119},2129,"量子计算",{"id":121,"name":122},139205,"ising",1776229114000,{"id":125,"title":126,"description":127,"imgUrl":128,"views":129,"ownerId":130,"ownerName":131,"ownerHeadUrl":132,"tagList":133,"time":139},"2049015385375178753","实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲","最近刷到小米 MiMo 搞了个大动作 ——MiMo Orbit 百万亿 Token 创造者激励计划，直接免费发 100T Credits，面向全球开发者、创作者开放，不管是个人、团队还是企业都能申请，我第一时间去试了，流程很顺，分享给大家。","https://oss.xyyzone.com/jishuzhan/article/2049015385375178753/e03782748307b139f2738d464c0e6e68.webp",740,"1984087246820147202","用户6937175001384","https://p9-passport.byteacctimg.com/img/user-avatar/254baefb585a9a27d77df8976366f55e~300x300.image",[134,135,138],{"id":97,"name":98},{"id":136,"name":137},55,"后端",{"id":19,"name":20},1777358311000,{"id":141,"title":142,"description":143,"imgUrl":29,"views":144,"ownerId":145,"ownerName":146,"ownerHeadUrl":147,"tagList":148,"time":158},"2048268850177835010","在Windows 11上安装Docker的踩坑记录","之前没在Windows 11上装过Docker，但是这几天由于网络原因，需要装一下，找了一些教程，但是发现还是可能会踩坑。例如按照这里的教程：https://zhuanlan.zhihu.com/p/1900601739113137024",1068,"1781181874702389250","蛐蛐蛐","https://file.jishuzhan.net/user/1781181874702389250/head.webp",[149,152,155],{"id":150,"name":151},10,"运维",{"id":153,"name":154},185,"docker",{"id":156,"name":157},209,"容器",1777180323000,{"id":160,"title":161,"description":162,"imgUrl":29,"views":163,"ownerId":164,"ownerName":165,"ownerHeadUrl":166,"tagList":167,"time":180},"2044313323597004801","CC-Switch & Claude 基于 Linux 服务器安装使用指南","本文面向需要在 Linux 服务器环境中部署 Claude Code 并使用 CC-Switch 管理多配置的开发者。",1403,"2042144427116920833","Wenweno0o","https://profile-avatar.csdnimg.cn/04fb7733f4af4ab990648846057d6e75_wenweno0o.jpg",[168,171,174,177],{"id":169,"name":170},9,"linux",{"id":172,"name":173},11,"服务器",{"id":175,"name":176},95315,"claude code",{"id":178,"name":179},127741,"cc-switch",1776237252000,{"adMap":182},["Map"],{"id":184,"title":185,"description":186,"content":187,"imgUrl":29,"views":188,"ownerId":189,"ownerName":190,"ownerHeadUrl":191,"tagList":192,"time":209,"articleSourceUrl":210,"preArticle":211,"nextArticle":217},"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",0,"1966570213333843970","DevilSeagull","https://i-avatar.csdnimg.cn/c079bc3b34bf4ef0ab9f2dcdb3b12f9c_2501_92963994.jpg",[193,196,199,200,203,206],{"id":194,"name":195},3,"java",{"id":197,"name":198},13,"开发语言",{"id":100,"name":101},{"id":201,"name":202},353,"html",{"id":204,"name":205},410,"ecmascript",{"id":207,"name":208},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":212,"title":213,"description":214,"imgUrl":215,"views":216},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",30,{"id":218,"title":219,"description":220,"imgUrl":221,"views":97},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",[223,245,261,289,299,323,340,354,365,379],{"id":224,"title":225,"description":226,"imgUrl":29,"views":188,"ownerId":227,"ownerName":228,"ownerHeadUrl":229,"tagList":230,"time":244},"2050923249068998657","浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单","面向在浏览器中运行的 Web 应用与嵌入页面的 Web SDK（纯 JS/TS），本文只讨论端上性能：如何测量主线程与渲染、如何看内存与网络、如何用体验指标与工程手段优化，并给出可执行的排查顺序与清单。","1984911714610118658","REDcker","https://profile-avatar.csdnimg.cn/8df8432cdc6d43c385b8ae17db1d4bc4_u011487024.jpg",[231,232,233,234,237,238,241],{"id":197,"name":198},{"id":97,"name":98},{"id":100,"name":101},{"id":235,"name":236},351,"vue",{"id":204,"name":205},{"id":239,"name":240},484,"php",{"id":242,"name":243},2417,"js",1777813181000,{"id":246,"title":247,"description":248,"imgUrl":29,"views":188,"ownerId":249,"ownerName":250,"ownerHeadUrl":251,"tagList":252,"time":260},"2050913807556476929","CSS中的单位","绝对单位:相对单位:新增属性:","1956130268661723138","W.A委员会","https://profile-avatar.csdnimg.cn/44d0d8c190764fbe8b01a1385bac8e66_2301_82221150.jpg",[253,256,259],{"id":254,"name":255},16,"css",{"id":257,"name":258},862,"css3",{"id":207,"name":208},1777810930000,{"id":262,"title":263,"description":264,"imgUrl":29,"views":265,"ownerId":266,"ownerName":267,"ownerHeadUrl":33,"tagList":268,"time":288},"2050904210590466049","高级java每日一道面试题-2025年11月24日-容器与虚拟化题[Dockerj]-runc 的作用是什么？","runc 是容器生态中承上启下的关键组件，其核心作用是 根据 OCI 运行时规范创建并运行容器进程。在 Docker 高级面试中，深入理解 runc 能够体现候选人对容器底层原理和标准化演进的掌握。以下仅从理论层面展开。",1,"1800458973283880961","极客先躯",[269,270,273,276,279,282,285],{"id":194,"name":195},{"id":271,"name":272},143116,"oci 的命令行工具",{"id":274,"name":275},143117,"最小可用",{"id":277,"name":278},143118,"无守护进程",{"id":280,"name":281},143119,"完全标准",{"id":283,"name":284},143120,"创建容器的核心流程",{"id":286,"name":287},143121,"runc 核心职责思维导图",1777808642000,{"id":290,"title":291,"description":292,"imgUrl":29,"views":265,"ownerId":293,"ownerName":294,"ownerHeadUrl":295,"tagList":296,"time":298},"2050903049074442242","AI 抢不走的技能：用 Claude API 构建自动化工作流实战","V2EX 上有个帖子最近很火：\"AI 时代程序员的护城河\"。底下 200 多条回复，焦虑的、乐观的、迷茫的都有。我看完的感受是：与其焦虑 AI 会不会抢饭碗，不如现在就学会用 AI 提升自己的不可替代性。","2025735820825657346","用户6064876718896","https://p3-passport.byteacctimg.com/img/mosaic-legacy/3795/3047680722~300x300.image",[297],{"id":194,"name":195},1777808365000,{"id":300,"title":301,"description":302,"imgUrl":29,"views":265,"ownerId":303,"ownerName":304,"ownerHeadUrl":33,"tagList":305,"time":322},"2050900049522130945","Kotlin 开发 - lateinit 关键字","lateinit 用于延迟初始化非空属性，避免声明时立即赋值或使用可空类型lateinit 只能用于 var，不能用于 val","1831596566255767553","我命由我12345",[306,308,309,310,313,316,319],{"id":265,"name":307},"android",{"id":194,"name":195},{"id":197,"name":198},{"id":311,"name":312},332,"kotlin",{"id":314,"name":315},545,"android studio",{"id":317,"name":318},2671,"android-studio",{"id":320,"name":321},7197,"android runtime",1777807650000,{"id":324,"title":325,"description":326,"imgUrl":327,"views":188,"ownerId":328,"ownerName":329,"ownerHeadUrl":330,"tagList":331,"time":339},"2050899665239998465","微服务第八天 Sentinel 四种分布式事务模式","测试配置文件添加请求头1、先导入依赖流控规则的持久化事务看B站这个视频https://www.bilibili.com/video/BV1LQ4y127n4?t=1159.6&p=148","https://i-blog.csdnimg.cn/direct/c0b95304450d4966aa94e22b53ee8f29.png","2044950219192860673","aXin_ya","https://i-avatar.csdnimg.cn/cbcd7af340cb41579e7c7aa620e98dee_2401_84162100.jpg",[332,333,336],{"id":194,"name":195},{"id":334,"name":335},25,"数据库",{"id":337,"name":338},186,"微服务",1777807558000,{"id":341,"title":342,"description":343,"imgUrl":29,"views":188,"ownerId":344,"ownerName":345,"ownerHeadUrl":346,"tagList":347,"time":353},"2050898893026689026","Java Set集合相关知识点","一、核心机制补充1. HashSet的扩容与树化· 初始容量：16（可指定）· 负载因子：0.75（当元素个数 ≥ 容量×0.75 时扩容为2倍）","1933479448254394370","Halo_tjn","https://i-avatar.csdnimg.cn/0a1e9384e4d045b0a6a815e0fcf52451_Halo_tjn.jpg",[348,349,350],{"id":194,"name":195},{"id":197,"name":198},{"id":351,"name":352},97,"算法",1777807374000,{"id":355,"title":356,"description":357,"imgUrl":29,"views":188,"ownerId":358,"ownerName":359,"ownerHeadUrl":33,"tagList":360,"time":364},"2050898362023608322","2026实测：Gemini 3 镜像站视觉能力实践——拍照原型图，一键生成 HTML+CSS 代码","想用 Gemini 3 的视觉能力把原型图直接转成可用的 HTML+CSS 代码，目前国内网络通畅即可用的方案是聚合镜像站 RskAi（www.rsk.cn），它整合了 Gemini 3、GPT、Grok 等多款模型，支持上传图片文件，每日提供免费额度。实测上传一张手机注册页线框图，模型在约 22 秒内生成了结构清晰、带有基础样式的完整代码，浏览器中可直接预览。","2039579011608219650","nbwenren",[361,362,363],{"id":97,"name":98},{"id":254,"name":255},{"id":201,"name":202},1777807248000,{"id":366,"title":367,"description":368,"imgUrl":29,"views":188,"ownerId":369,"ownerName":370,"ownerHeadUrl":371,"tagList":372,"time":378},"2050897563914665986","Java和JavaScript的关系真是雷峰和雷峰塔的关系吗？","前端圈一直流传着一个经典段子：Java和JavaScript是什么关系？就是雷峰和雷峰塔的关系。听过后令人会心一笑。但静下来想想🤔，真是这样吗？","1930862456242483201","Linsk","https://p3-passport.byteacctimg.com/img/user-avatar/33784fc92be41a2bfd2860250dc51d8c~300x300.image",[373,374,375],{"id":194,"name":195},{"id":100,"name":101},{"id":376,"name":377},207,"oracle",1777807057000,{"id":380,"title":381,"description":382,"imgUrl":29,"views":188,"ownerId":383,"ownerName":384,"ownerHeadUrl":385,"tagList":386,"time":388},"2050896492899139585","浏览器文本复制到剪贴板：企业级最佳实践","在 Web 开发中，复制文本到剪贴板是一个常见需求，比如：现代浏览器提供了 navigator.clipboard API，但存在兼容性和安全上下文的限制；传统的 document.execCommand('copy') 虽然兼容性更好，但使用方式较为繁琐。本质上，我们需要一个统一的工具函数来屏蔽这些差异。","1895412495665860610","当时只道寻常","https://p26-passport.byteacctimg.com/img/user-avatar/95259e4de55adacd88df152f3dc7cd39~300x300.image",[387],{"id":100,"name":101},1777806802000,["Reactive",390],{"$sisPC2":391},false,["Set"],["ShallowReactive",394],{"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>