DOM 操作 - JavaScript

01. DOM 选择器

DOM（Document Object Model）是 HTML 文档的编程接口。querySelector 和 querySelectorAll 是强大的选择方法。

javascript

// querySelector - 返回第一个匹配元素
const header = document.querySelector("h1");
const btn = document.querySelector(".btn-primary");

// querySelectorAll - 返回所有匹配元素
const items = document.querySelectorAll(".list-item");
items.forEach(item => console.log(item.textContent));

// 获取和设置属性
const link = document.querySelector("a");
console.log(link.href);
link.setAttribute("target", "_blank");
link.dataset.id = "123";  // data-id="123"

02. 事件处理

addEventListener 是添加事件监听器的标准方式。事件对象包含事件的详细信息。

javascript

// 添加事件监听
const button = document.querySelector("#submit");
button.addEventListener("click", function(event) {
event.preventDefault();
console.log("按钮被点击");
});

// 事件委托
const list = document.querySelector("#list");
list.addEventListener("click", (e) => {
if (e.target.matches(".list-item")) {
    console.log("点击了:", e.target.textContent);
}
});

// 键盘事件
document.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
    submitForm();
}
});

知识测验

第 1/5 题正确 0

querySelector 和 getElementById 的区别是什么？

异步编程