DOM 面试题

Source: Dev.to

什么是 DOM？

文档对象模型（Document Object Model，DOM） 是一种编程接口，它将网页表示为树状结构。每个 HTML 元素都会成为一个对象，可以通过 JavaScript 访问和操作，从而使页面的 HTML 和 CSS 动态化。

---

如何使用 DOM 访问元素

可以使用多种内置方法从文档中检索元素：

// 按 ID 选择
document.getElementById("myElement");

// 按类名选择（返回 HTMLCollection）
document.getElementsByClassName("myClass");

// 按标签名选择（返回 HTMLCollection）
document.getElementsByTagName("p");

// 选择第一个匹配的元素（CSS 选择器）
document.querySelector(".myClass");

// 选择所有匹配的元素（返回 NodeList）
document.querySelectorAll(".myClass");

示例：修改元素

const element = document.getElementById("myElement");
element.innerText = "Welcome";

• element 现在持有对表示 myElement 的 DOM 对象的引用。
• innerText 是该对象的属性；给它赋予新字符串会更新元素显示的文本。

---

什么是 JavaScript 中的事件？

事件是浏览器中发生的动作——例如点击、键盘按键或页面加载。JavaScript 可以监听这些事件，并在事件触发时执行回调函数。

// 示例：监听点击事件
document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button was clicked!");
});

---

动态创建并追加新元素

JavaScript 提供了 DOM 方法来创建新节点并将其插入文档。

// 1. 创建一个新元素（例如 <div>）
const newDiv = document.createElement("div");

// 2. 为元素添加内容
newDiv.textContent = "I am a new div!";
// 或者：newDiv.innerHTML = "**Bold content**";

// 3. 将元素追加到父节点
const parent = document.getElementById("container");
parent.appendChild(newDiv);
// 或使用更新的语法：
// parent.append(newDiv);

• document.createElement() 创建指定类型的元素节点。
• textContent 或 innerHTML 设置元素的文本或 HTML 内容。
• appendChild()（或 append()）将新元素插入 DOM，使其在页面上可见。