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 id="myBox" style="width: 100px; height: 100px; border: 1px solid #000;">测试盒子</div>
<button onclick="changeStyle()">修改样式</button>

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" id="username"><br>

// 获取单选框的值（需要判断哪个被选中）
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 id="userForm">
<label>用户名：</label>
<input type="text" name="username"><br>

// 获取普通输入框、下拉框的值（通过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 id="user" data-id="1001">用户信息</div>

<!– 多个自定义属性 –>
<ul>
<li data-product-id="888" data-product-name="手机" data-price="2999">智能手机</li>
<li data-product-id="999" data-product-name="电脑" data-price="5999">笔记本电脑</li>
</ul>

<!– 带连字符的自定义属性（推荐命名方式） –>
<button data-user-status="active" data-user-role="admin">操作按钮</button>
</body>
</html>

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

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

方式 1：使用 dataset（推荐）

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

自动去掉 data- 前缀
将连字符命名（如 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 = '张三'; // 相当于添加 data-name="张三"
userDiv.dataset.age = 25; // 相当于添加 data-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>

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

定时器—间歇函数

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>

// 示例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 id="count">10</span> 秒</p>
<button onclick="stopMyInterval()">停止倒计时</button>

// 示例：每秒执行一次倒计时
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 才能清除，避免内存泄漏

有关变量的声明

DOM树和DOM对象

获取DOM元素

类选择器

id选择器

标签选择器

其它方式

DOM元素内容及属性的修改

DOM元素内容修改

DOM属性修改

批量修改多个元素

样式类名操作

检查类名是否存在

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

表单元素值操作

使用 style 属性修改样式

通过 JavaScript 修改样式

获取表单里的值

H5自定义属性-data

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

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

注意事项

定时器—间歇函数

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

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

二、关键注意事项

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

2. 清除定时器的重要性

相关推荐

评论抢沙发

评论前必须登录！

热门标签

置顶推荐

热门文章

最新文章

有关变量的声明

DOM树和DOM对象

获取DOM元素

类选择器

id选择器

标签选择器

其它方式

DOM元素内容及属性的修改

DOM元素内容修改

DOM属性修改

批量修改多个元素

样式类名操作

检查类名是否存在

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

表单元素值操作

使用 style 属性修改样式

通过 JavaScript 修改样式

获取表单里的值

H5自定义属性-data

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

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

注意事项

定时器—间歇函数

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

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

二、关键注意事项

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

2. 清除定时器的重要性

相关推荐

评论 抢沙发

评论前必须登录！

热门标签

置顶推荐

热门文章

最新文章

评论抢沙发