web APIS Day1 | 极客日志

Python

web APIS Day1

有关变量的声明变量的声明有几种方式，例如用let，const。在以前的版本还用var来声明 var的特点：1、允许重复声明 2、存在变量提升，即变量可以再声明前使用缺点：1、var 声明的变量会被提升到函数或全局作用域的顶部，导致变量在声明前就可以访问，但值为 undefined。这种行为容易引发逻辑错误 2、var 的作用域仅限于函数或全局，而非块级（如 if、for 等）。这会导致变量在块…

星河入梦发布于 2026/4/7更新于 2026/5/2344K 浏览

有关变量的声明

变量的声明有几种方式，例如用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');

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

相关免费在线工具

curl 转代码
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。在线工具，curl 转代码在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online
Markdown转HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。在线工具，Markdown转HTML在线工具，online
HTML转Markdown
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。在线工具，HTML转Markdown在线工具，online
JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。在线工具，JSON 压缩在线工具，online

document.getElementsByTagName('tag')

div

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

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

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

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

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

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

if (element.classList.contains('active')) { console.log('Element has active class'); }

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

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>

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

<!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>

<!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>

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

该图紧接上一张图 <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>

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

<!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>

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

<!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秒后执行，但实际会等5秒（因为alert阻塞了主线程） setTimeout(() => { console.log('1秒到了？'); }, 1000); // 阻塞主线程5秒 alert('请等待5秒后关闭');

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

web APIS Day1

有关变量的声明

DOM树和DOM对象

获取DOM元素

类选择器

id选择器

标签选择器

其它方式

更多推荐文章

相关免费在线工具

DOM元素内容及属性的修改

DOM元素内容修改

DOM属性修改

批量修改多个元素

样式类名操作

检查类名是否存在

contains方法可以检查元素是否包含指定的CSS类，返回布尔值

表单元素值操作

使用 style 属性修改样式

通过 JavaScript 修改样式

获取表单里的值

H5自定义属性-data

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

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

注意事项

定时器---间歇函数

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

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

二、关键注意事项

2. 清除定时器的重要性

更多推荐文章

相关免费在线工具

web APIS Day1

有关变量的声明

DOM树和DOM对象

获取DOM元素

类选择器

id选择器

标签选择器

其它方式

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

DOM元素内容及属性的修改

DOM元素内容修改

DOM属性修改

批量修改多个元素

样式类名操作

检查类名是否存在

contains方法可以检查元素是否包含指定的CSS类，返回布尔值

表单元素值操作

使用 style 属性修改样式

通过 JavaScript 修改样式

获取表单里的值

H5自定义属性-data

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

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

注意事项

定时器---间歇函数

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

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

二、关键注意事项

2. 清除定时器的重要性

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具