web APIS Day1

优质文章学习记录

— 13 min read
web APIS Day1

有关变量的声明

变量的声明有几种方式，例如用let，const。在以前的版本还用var来声明

var的特点：1、允许重复声明  2、存在变量提升，即变量可以再声明前使用

缺点：1、var 声明的变量会被提升到函数或全局作用域的顶部，导致变量在声明前就可以访问，但值为 undefined。这种行为容易引发逻辑错误

            2、var 的作用域仅限于函数或全局，而非块级（如 if、for 等）。这会导致变量在块外仍可访问，可能引发意外覆盖

let的特点：1、不允许重复声明  2、不存在变量提升，必须先声明后使用

const的特点：1、必须初始化赋值  2、块级作用域  3。适合用于声明不可变的常量或引用类型

在此推荐使用const来声明变量，可以避免意外修改，或者使用let，var不推荐使用

DOM树和DOM对象

获取DOM元素

在CSS中我们一般使用document.querySelector('selector')获取第一个匹配元素，或document.querySelectorAll('selector')获取所有匹配元素（静态NodeList），支持复杂CSS选择器

类选择器

const firstItem = document.querySelector('.list-item'); const allItems = document.querySelectorAll('.list-item');

id选择器    

使用#前缀匹配元素的id属性

const name = document.querSelector('#username')

标签选择器

直接使用HTML类名

const body = document.querSelector('body')

其它方式

通过ID获取元素
使用document.getElementById('id')方法，传入元素的ID字符串。返回匹配ID的第一个元素，若不存在则返回null

const element = document.getElementById('header');

通过类名获取元素
使用document.getElementsByClassName('class')方法，传入类名字符串。返回包含所有匹配类的动态HTML集合（类数组对象）

const elements = document.getElementsByClassName('menu-item');

通过标签名获取元素
使用document.getElementsByTagName('tag')方法，传入标签名（如div）。返回包含所有匹配标签的动态HTML集合

const divs = document.getElementsByTagName('div');

DOM元素内容及属性的修改

DOM元素内容修改

修改DOM元素内容主要通过innerHTML、textContent和innerText属性实现。innerHTML可解析HTML标签，适合动态插入带格式的内容。textContent会原样显示文本，忽略HTML标签。innerText会考虑CSS样式，不显示隐藏元素内容。

// 修改元素内容示例 const element = document.getElementById('target'); element.innerHTML = '<strong>加粗文本</strong>'; // 解析HTML element.textContent = '<strong>纯文本显示</strong>'; // 不解析HTML

DOM属性修改

标准HTML属性可通过元素对象直接访问或使用setAttribute方法。自定义属性需通过dataset或setAttribute操作。移除属性使用removeAttribute方法

// 修改标准属性 const img = document.querySelector('img'); img.src = 'new-image.jpg'; // 直接属性赋值 img.setAttribute('alt', '新图片描述'); // 通用方法 // 操作自定义属性 img.setAttribute('data-custom', 'value');第一个为要设置的属性名称，第二个为要为第一个参数设置的值 const customValue = img.dataset.custom; // 通过dataset访问
批量修改多个元素

通过querySelectorAll获取节点列表后，可以使用for循环来循环处理

样式类名操作

通过classListAPI可精确控制CSS类，支持add、remove、toggle等方法。直接修改className会覆盖全部类名

add(className)    添加一个 / 多个类名（重复添加无效果）    
remove(className)    删除一个 / 多个类名（删除不存在的类名无报错）   
toggle(className)    切换类名（存在则删除，不存在则添加） 
contains(className)    判断是否包含某个类名（返回布尔值）

const box = document.getElementById('box'); box.classList.add('active'); // 添加类 box.classList.remove('inactive'); // 移除类 box.classList.toggle('visible'); // 切换类 box.className = 'new-class';//更换类

进阶用法：replace 替换类名

classList.replace(oldClass, newClass) 可以直接替换某个类名，适合需要 “切换样式类型” 的场景

// 将box的big类替换为small类 box.classList.replace('big', 'small'); console.log(box.className); // 输出：box small

对比传统 className（为什么推荐 classList）

直接修改 className 需要手动拼接字符串，容易出错，而 classList 更安全：

// 传统方式（缺点：会覆盖原有类名） box.className = 'active'; // 原本的box类会被覆盖，只剩active // 改进的传统方式（需要手动拼接，麻烦） box.className = box.className + ' active'; // 需注意空格 // classList方式（推荐：保留原有类名，仅添加） box.classList.add('active'); // 原有类名不变，新增active

注意事项
1.classList 操作的是类名（对应 CSS 样式），不是 DOM 的其他属性（如 id、data-*）；
2.类名参数不要加 .（比如写 add('active') 而非 add('.active')）；
3.所有方法都支持传入多个类名（用逗号分隔），比如 add('a', 'b', 'c')；
4.兼容性：支持所有现代浏览器，IE10+ 也兼容（完全满足日常开发）

检查类名是否存在
contains方法可以检查元素是否包含指定的CSS类，返回布尔值
if (element.classList.contains('active')) { console.log('Element has active class'); }

表单元素值操作

表单控件如input、select等需通过value属性操作。复选框和单选按钮需检查checked属性

const input = document.getElementById('username'); input.value = '新用户'; // 修改输入值 const checkbox = document.getElementById('agree'); checkbox.checked = true; // 选中复选框

使用 style 属性修改样式

在 HTML 和 JavaScript 中，可以通过 style 属性直接修改元素的样式。这种方式适用于动态调整样式或覆盖内联样式

element.style.property = value; 
<!DOCTYPE html> <html> <body> <div>测试盒子</div> <button onclick="changeStyle()">修改样式</button> <script> const box = document.getElementById('myBox'); function changeStyle() { // 1. 修改单个样式（驼峰命名） box.style.backgroundColor = 'red'; // 背景变红 // 2. 修改多个样式（直接链式/逐个赋值） box.style.width = '200px'; // 宽度200px box.style.height = '200px'; // 高度200px box.style.borderRadius = '10px'; // 圆角10px box.style.color = 'white'; // 文字白色 box.style.fontSize = '16px'; // 字体大小16px // 3. 清空单个样式（设为空字符串） // box.style.border = ''; } </script> </body> </html>

常见样式属性：

  • color: 修改文本颜色
  • backgroundColor: 修改背景颜色
  • fontSize: 修改字体大小
  • width / height: 修改元素的宽度和高度
  • display: 控制元素的显示方式（如 none 隐藏元素）
  • 注意事项
  • 属性名转换：CSS 的 font-size → JS 的 fontSize，border-top → borderTop，所有连字符转驼峰；
    单位必须加：数字类样式（宽、高、字体大小）必须带单位（px/rem 等），否则无效；
    优先级：style 设置的行内样式优先级高于 CSS 类样式（!important 除外）；
    清空样式：将样式值设为空字符串（box.style.backgroundColor = ''），会恢复为 CSS 类 / 默认样式

通过 JavaScript 修改样式

可以通过 JavaScript 获取 DOM 元素并直接修改其 style 属性

const element = document.getElementById("myElement"); element.style.color = "red"; element.style.fontSize = "16px";

获取表单里的值

方法 1：通过元素 ID 直接获取（最简单）
这是最直观的方式，给表单元素设置唯一 id，然后用 document.getElementById() 获取元素，再通过 .value 属性拿到值

<!DOCTYPE html> <html> <body> <form> <label>用户名：</label> <input type="text"><br> <label>密码：</label> <input type="password"><br> <label>性别：</label> <input type="radio" name="gender" value="男">男 <input type="radio" name="gender" value="女">女<br> <button type="button" onclick="getFormValueById()">获取值</button> </form> <script> function getFormValueById() { // 获取输入框、密码框的值 const username = document.getElementById('username').value; const password = document.getElementById('password').value; // 获取单选框的值（需要判断哪个被选中） const male = document.getElementById('male'); const female = document.getElementById('female'); const gender = male.checked ? male.value : female.checked ? female.value : '未选择'; // 打印结果 console.log('用户名：', username); console.log('密码：', password); console.log('性别：', gender); } </script> </body> </html>

方法 2：通过表单对象获取（更规范）

先获取整个表单对象，再通过元素的 name 属性（表单元素的核心标识）获取对应的值，适合表单元素较多的场景。

<!DOCTYPE html> <html> <body> <form> <label>用户名：</label> <input type="text" name="username"><br> <label>爱好：</label> <input type="checkbox" name="hobby" value="读书">读书 <input type="checkbox" name="hobby" value="运动">运动 <input type="checkbox" name="hobby" value="游戏">游戏<br> <label>城市：</label> <select name="city"> <option>请选择</option> <option value="北京">北京</option> <option value="上海">上海</option> </select><br> <button type="button" onclick="getFormValueByForm()">获取值</button> </form> <script> function getFormValueByForm() { // 获取表单对象 const form = document.getElementById('userForm'); // 获取普通输入框、下拉框的值（通过name） const username = form.username.value; const city = form.city.value; // 获取复选框的值（需要遍历判断选中状态） const hobbies = []; form.hobby.forEach(item => { if (item.checked) { hobbies.push(item.value); } }); console.log('用户名：', username); console.log('城市：', city); console.log('爱好：', hobbies); } </script> </body> </html>

H5自定义属性-data

一、如何定义 data-* 自定义属性


自定义属性必须以 data- 为前缀，后面可以跟任意名称（建议小写、用连字符分隔），直接写在 HTML 元素标签里即可。

<!DOCTYPE html> <html> <body> <!-- 单个自定义属性 --> <div>用户信息</div> <!-- 多个自定义属性 --> <ul> <li>智能手机</li> <li>笔记本电脑</li> </ul> <!-- 带连字符的自定义属性（推荐命名方式） --> <button>操作按钮</button> </body> </html>

二、在 JavaScript 中操作自定义属性

有两种主流方式，推荐使用 dataset（更简洁、符合 H5 规范）。

方式 1：使用 dataset（推荐）

dataset 是 HTML5 为元素新增的属性，会自动收集所有 data-* 属性，并且：

  • 自动去掉 data- 前缀
  • 自定义属性名只能包含：字母、数字、连字符（-）、下划线（_）、点（.）、冒号（:），且不能以数字开头。
  • dataset 读取的值都是字符串类型，如果是数字 / 布尔值，需要手动转换（如 Number(li.dataset.price)）。
  • 不要用自定义属性存储敏感数据（如密码），因为可以在浏览器控制台直接看到

将连字符命名（如 data-user-name）转为驼峰命名（userName）

该图紧接上一张图 <script> // 1. 获取单个元素的自定义属性 const userDiv = document.getElementById('user'); // 获取 data-id console.log(userDiv.dataset.id); // 输出：1001 // 2. 获取带连字符的自定义属性（自动转驼峰） const btn = document.querySelector('button'); console.log(btn.dataset.userStatus); // 输出：active console.log(btn.dataset.userRole); // 输出：admin // 3. 设置自定义属性 userDiv.dataset.name = '张三'; // 相当于添加 userDiv.dataset.age = 25; // 相当于添加 console.log(userDiv.dataset.name); // 输出：张三 // 4. 遍历所有自定义属性 const productLi = document.querySelector('li'); for (let key in productLi.dataset) { console.log(key + ': ' + productLi.dataset[key]); // 输出：productId: 888、productName: 手机、price: 2999 } // 5. 删除自定义属性 delete userDiv.dataset.age; // 移除 data-age 属性 console.log(userDiv.dataset.age); // 输出：undefined </script>

注意事项

定时器---间歇函数

JavaScript 提供了两种核心定时器函数，都属于 window 对象（浏览器环境），分别用于一次性延时执行和周期性重复执行

1. setTimeout ()：一次性延时执行

setTimeout() 用于指定一段时间后执行一次某个函数 / 代码，执行后定时器自动失效

语法：

// 基础语法 let timerId = setTimeout(callback, delay, param1, param2, ...);

callback：延时后要执行的函数 / 代码字符串（不推荐字符串）
delay：延时时间（毫秒，1 秒 = 1000 毫秒），最小约 4ms（浏览器限制）
param1...：传给回调函数的参数（可选）
timerId：定时器唯一标识（数字），用于后续停止定时器

示例代码

<!DOCTYPE html> <html> <body> <button onclick="stopMyTimeout()">停止延时任务</button> <script> // 示例1：基础用法（3秒后执行） const timer1 = setTimeout(() => { alert('3秒到了！'); }, 3000); // 示例2：带参数的回调函数 const timer2 = setTimeout((name, age) => { console.log(`你好${name}，年龄${age}`); // 输出：你好张三，年龄25 }, 2000, '张三', 25); // 停止延时任务 function stopMyTimeout() { clearTimeout(timer1); // 清除timer1，alert不会弹出 console.log('延时任务已停止'); } </script> </body> </html>

2. setInterval ()：周期性重复执行


setInterval() 用于每隔指定时间重复执行某个函数 / 代码，直到手动停止

语法：

let intervalId = setInterval(callback, delay, param1, param2, ...);

参数含义和 setTimeout() 一致，区别是 callback 会重复执行

示例代码：

<!DOCTYPE html> <html> <body> <p>倒计时：<span>10</span> 秒</p> <button onclick="stopMyInterval()">停止倒计时</button> <script> let count = 10; const countSpan = document.getElementById('count'); // 示例：每秒执行一次倒计时 const intervalId = setInterval(() => { count--; countSpan.textContent = count; // 倒计时结束后自动停止 if (count <= 0) { clearInterval(intervalId); alert('倒计时结束！'); } }, 1000); // 手动停止周期性任务 function stopMyInterval() { clearInterval(intervalId); countSpan.textContent = '已停止'; } </script> </body> </html>

二、关键注意事项


1. 定时器的 “异步特性”


JavaScript 是单线程的，定时器的 delay 不是 “绝对执行时间”，而是 “最早执行时间”—— 如果主线程有耗时任务（如复杂计算），定时器会等待主线程空闲后才执行

示例：

// 看似1秒后执行，但实际会等5秒（因为alert阻塞了主线程） setTimeout(() => { console.log('1秒到了？'); }, 1000); // 阻塞主线程5秒 alert('请等待5秒后关闭');
2. 清除定时器的重要性
  • 页面卸载 / 组件销毁前，必须清除未执行的定时器，否则会导致内存泄漏、无效代码执行（比如页面跳转后定时器还在跑）。
  • 清除定时器的前提：必须保存 timerId（不能用匿名变量）

错误示例：

// 错误：timerId是匿名的，无法清除 setTimeout(() => {}, 1000); // 正确：保存timerId const timerId = setTimeout(() => {}, 1000); clearTimeout(timerId);

总结：setTimeout：延时一次执行，用 clearTimeout(timerId) 停止，适合单次延时任务；
setInterval：周期性重复执行，用 clearInterval(intervalId) 停止，适合轮询 / 倒计时；
核心要点：定时器是异步的，delay 是 “最小延时”；必须保存 timerId 才能清除，避免内存泄漏

Read more

OpenClaw重塑机器人抓取未来

OpenClaw：重新定义机器人抓取的未来之手 在人工智能席卷全球的今天，当我们惊叹于ChatGPT流畅的对话、Midjourney惊艳的创作时，物理世界的智能化却显得步履蹒跚。机器人仍然笨拙地挣扎于最简单的任务：拿起一个鸡蛋、整理杂乱的桌面、或者分拣形状各异的物品。 这个困境的核心，在于机器人缺少一双灵巧而通用的"手"。而一个名为OpenClaw（又称Clawbot）的开源项目，正在以革命性的方式改变这一现状。 一、抓取技术的困境与突破 传统机器人抓取面临三大难题： 刚性的局限 工业机器人依赖专用夹具，每个新物件都需要重新设计和调试。这种刚性系统无法适应现代生产的小批量、多品种需求，更难以进入家庭、医院等非结构化环境。 成本的壁垒 先进的柔性抓手价格高达数千美元，将中小企业、科研机构和创客群体拒之门外，严重制约了机器人技术的普及和创新。 智能的断层 虽然机器视觉能识别数百万种物体，但执行端的匮乏让这种智能无法转化为实际行动。感知与操作的脱节，成为机器人发展的关键瓶颈。 OpenClaw的巧妙之处在于，它用极其简单的机械结构解决了这些复杂问题。 二、极简设计的智慧
腾讯QQ官方炸场！OpenClaw一键建5个机器人，个人号直接上手｜实战教程

腾讯QQ官方炸场！OpenClaw一键建5个机器人，个人号直接上手｜实战教程

文章目录 * 前言 * 一、OpenClaw是个啥？你的"数字长工" * 二、为什么说这次QQ"炸场"了？ * 三、实操环节：从0到1，手把手养出你的AI小弟 * 3.1 在QQ开放平台"造人" * 3.2 给机器人找个"肉身"（部署OpenClaw） * 方案A：云服务器一键部署（推荐新手） * 方案B：宝塔面板可视化安装（适合有服务器的站长） * 方案C：本地Docker部署（适合极客） * 3.3 关键的"认亲"三步走 * 3.4 加好友，

MC.JS WEBMC1.8 vs 传统开发：效率提升300%的秘诀

快速体验 1. 打开 InsCode(快马)平台 https://www.inscode.net 2. 输入框内输入如下内容： 创建一个对比演示项目，分别用纯JavaScript和MC.JS WEBMC1.8实现相同的简单沙盒游戏功能。游戏需要包含：1) 角色移动控制 2) 方块放置与破坏 3) 简单物品栏系统。使用AI自动生成两个版本的代码，并统计开发时间、代码行数、性能指标等数据，生成可视化对比报告。两个版本都应支持实时预览，方便直观比较。 1. 点击'项目生成'按钮，等待项目生成完整后预览效果 最近在开发一个简单的沙盒游戏demo时，我尝试了两种不同的开发方式：传统JavaScript和MC.JS WEBMC1.8框架。结果让我大吃一惊，后者竟然帮我节省了70%的开发时间！今天就来分享一下这个对比实验的过程和发现。 1. 项目需求分析
WebAgent详解+实战：用开源AI智能体搞定产品与竞品市场调研

WebAgent详解+实战：用开源AI智能体搞定产品与竞品市场调研

在市场调研场景中，产品及竞品分析往往需要投入大量人力，手动浏览网页、提取信息、整理数据，不仅效率低下，还容易出现信息遗漏、误差等问题。WebAgent作为通义实验室开源的端到端自主网页智能体，凭借强大的中文语义理解、多步骤推理和结构化输出能力，可完全本地部署且永久免费，能高效替代人工完成网页信息采集、竞品数据提取、产品信息汇总等调研工作。本文将从WebAgent核心介绍、部署要点入手，聚焦产品与竞争对手调研场景，一步步实现实战示例，让无论是开发者还是市场从业者，都能快速上手，用AI提升调研效率，摆脱重复劳动。 一、初识WebAgent：阿里开源的网页智能体“神器” 1.1 什么是WebAgent？ WebAgent是阿里巴巴通义实验室开源的自主网页智能体框架，核心定位是“模拟人类浏览网页的完整流程”，能理解自然语言指令、规划浏览路径、执行网页操作（点击、翻页、搜索等）、提取关键信息并结构化输出，无需人工干预即可完成复杂的网页相关任务。 与国外的AgentQL相比，WebAgent最大的优势的是完全开源免费、支持本地部署、中文语义优化，无需调用云端API，数据可完全保存在内网，