跳到主要内容web APIS Day1 | 极客日志Python
web APIS Day1
有关变量的声明 变量的声明有几种方式,例如用let,const。在以前的版本还用var来声明 var的特点:1、允许重复声明 2、存在变量提升,即变量可以再声明前使用 缺点:1、var 声明的变量会被提升到函数或全局作用域的顶部,导致变量在声明前就可以访问,但值为 undefined。这种行为容易引发逻辑错误 2、var 的作用域仅限于函数或全局,而非块级(如 if、for 等)。这会导致变量在块…
星河入梦44K 浏览 有关变量的声明
变量的声明有几种方式,例如用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集合
document.getElementsByTagName('tag')
div
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';//更换类
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() { </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() { </script> </body> </html>
先获取整个表单对象,再通过元素的 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() { </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 规范)。
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> </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'); </script> </body> </html>
二、关键注意事项
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 才能清除,避免内存泄漏
相关免费在线工具
- 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