JavaScript 核心 API：变量、DOM 和定时器的基础用法 | 极客日志

JavaScript大前端

JavaScript 核心 API：变量、DOM 和定时器的基础用法

这篇内容梳理了 JavaScript 里最常用的一批前端基础 API：变量声明的选择、DOM 的获取与修改、classList 和 style 的常见操作、表单值读取、自定义属性 data-* 的用法，以及 setTimeout 和 setInterval 的区别。整体建议很明确：新代码优先用 const，其次 let，少碰 var；DOM 操作优先选择更直接的标准 API；定时器要记得保存 id 并及时清理，避免异步任务拖出隐患。

孤勇者发布于 2026/6/30更新于 2026/7/219 浏览

变量声明

JavaScript 里，var、let、const 是最常见的三种变量声明方式。老代码里 var 还很多，但如果是新项目，我基本都会先看 let 和 const。

var 的问题不算玄学：它有变量提升，允许重复声明，作用域又是函数级别，不是块级作用域，所以很容易在 if、for 里写出看起来没问题、实际上会串变量的代码。

let 不能重复声明，使用前必须先声明，作用域也更符合直觉，限制在块内。

const 需要初始化，声明后不能重新赋值。它更适合放不会变的值，或者'引用不变、内容可能变'的对象和数组。

一般写法还是优先 const，要修改再换 let。var 能不用就不用，除非你在维护旧代码。

DOM 元素获取与操作

获取 DOM 元素

日常最常用的是 document.querySelector('selector') 和 document.querySelectorAll('selector')。前者拿第一个匹配项，后者拿全部匹配项，返回静态 NodeList，写复杂选择器时很顺手。

类选择器

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

ID 选择器 使用 # 前缀匹配元素的 id 属性。

const name = document.querySelector('#username');

标签选择器 直接使用 HTML 标签名。

const body = document.querySelector('body');

如果只想要最基础的标准 API，也可以直接用这些：

通过 ID 获取：document.getElementById('id')，返回第一个匹配元素，不存在就返回 null。
通过类名获取：document.getElementsByClassName('class')，返回动态的 HTML 集合（类数组对象）。
通过标签名获取：document.getElementsByTagName('tag')，返回所有匹配标签的动态 HTML 集合。

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

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.classList.replace('big', 'small'); // 替换类

<!DOCTYPE html>
<html>
<body>
<div id="myBox">测试盒子</div>
<button onclick="changeStyle()">修改样式</button>
<script>
const box = document.getElementById('myBox');
function changeStyle() {
    box.style.backgroundColor = 'red';
    box.style.width = '200px';
    box.style.height = '200px';
    box.style.borderRadius = '10px';
}
</script>
</body>
</html>

<form>
    <label>用户名：</label>
    <input type="text" id="username"><br>
    <label>密码：</label>
    <input type="password" id="password"><br>
    <button type="button" onclick="getFormValueById()">获取值</button>
</form>
<script>
function getFormValueById() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    console.log('用户名：', username);
    console.log('密码：', password);
}
</script>

<form id="userForm">
    <label>用户名：</label>
    <input type="text" name="username"><br>
    <label>爱好：</label>
    <input type="checkbox" name="hobby" value="读书">读书
    <input type="checkbox" name="hobby" value="运动">运动<br>
    <button type="button" onclick="getFormValueByForm()">获取值</button>
</form>
<script>
function getFormValueByForm() {
    const form = document.getElementById('userForm');
    const username = form.username.value;
    
    const hobbies = [];
    form.hobby.forEach(item => {
        if (item.checked) hobbies.push(item.value);
    });
    console.log('爱好：', hobbies);
}
</script>

<div id="user" data-id="1001" data-user-name="张三"></div>

const userDiv = document.getElementById('user');
console.log(userDiv.dataset.id); // 输出：1001
console.log(userDiv.dataset.userName); // 输出：张三

// 设置自定义属性
userDiv.dataset.age = 25;

// 删除自定义属性
delete userDiv.dataset.age;

// 基础用法
const timerId = setTimeout(() => {
    alert('3 秒到了！');
}, 3000);

// 停止任务
function stopMyTimeout() {
    clearTimeout(timerId);
}

let count = 10;
const intervalId = setInterval(() => {
    count--;
    if (count <= 0) {
        clearInterval(intervalId);
        alert('倒计时结束！');
    }
}, 1000);

// 停止任务
function stopMyInterval() {
    clearInterval(intervalId);
}

JavaScript 核心 API：变量、DOM 和定时器的基础用法

变量声明

DOM 元素获取与操作

获取 DOM 元素

更多推荐文章

相关免费在线工具

修改元素内容与属性

内容修改

属性修改

批量处理

样式与类名操作

classList API

直接修改 style 属性

表单数据获取

通过 ID 获取

通过表单对象获取

H5 自定义属性 data-

定义与操作

定时器

setTimeout：一次性延时

setInterval：周期性重复

关键注意事项

更多推荐文章

相关免费在线工具

JavaScript 核心 API：变量、DOM 和定时器的基础用法

变量声明

DOM 元素获取与操作

获取 DOM 元素

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

更多推荐文章

相关免费在线工具

修改元素内容与属性

内容修改

属性修改

批量处理

样式与类名操作

classList API

直接修改 style 属性

表单数据获取

通过 ID 获取

通过表单对象获取

H5 自定义属性 data-

定义与操作

定时器

setTimeout：一次性延时

setInterval：周期性重复

关键注意事项

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

更多推荐文章

相关免费在线工具