JavaScript DOM 操作

955 字 约 4 分钟阅读 更新于 2025-12-11

选择元素

1
2
3
4
// 常用选择器
const el = document.getElementById("app");
const items = document.querySelectorAll(".item");
const first = document.querySelector(".item");

修改元素

1
2
3
4
5
6
7
8
9
10
11
12
13
// 内容
el.textContent = "新文本";
el.innerHTML = "<strong>加粗</strong>";

// 样式
el.style.color = "red";
el.classList.add("active");
el.classList.remove("active");
el.classList.toggle("active");

// 属性
el.setAttribute("data-id", "123");
el.getAttribute("data-id");

事件处理

1
2
3
4
5
6
7
8
9
10
// 点击事件
btn.addEventListener("click", (e) => {
    console.log("被点击了");
});

// 常用事件
// click, mouseover, mouseout
// keydown, keyup
// submit, change, input
// load, DOMContentLoaded

创建与删除

1
2
3
4
5
6
7
8
9
// 创建
const div = document.createElement("div");
div.textContent = "新元素";
parent.appendChild(div);

// 删除
el.remove();
// 或
parent.removeChild(el);