Web学习网站

Appearance

DOM 基础 ​

DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。它将整个文档表示为一个由节点构成的树状结构，允许程序和脚本动态地访问和更新文档的内容、结构和样式。

什么是 DOM？ ​

DOM 是一个与平台和编程语言无关的接口，它将 Web 页面视为节点树，其中每个节点都是一个对象，具有属性和方法。通过 DOM，JavaScript 可以访问、修改、添加或删除 HTML 元素和属性。

DOM 树结构 ​

DOM 将 HTML 文档表示为树状结构，其中每个元素、属性和文本都是节点：

html
<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎</h1>
    <p>这是一个段落。</p>
  </body>
</html>

对应的 DOM 树结构：

document
├── html
│   ├── head
│   │   └── title
│   │       └── "我的网页" (文本节点)
│   └── body
│       ├── h1
│       │   └── "欢迎" (文本节点)
│       └── p
│           └── "这是一个段落。" (文本节点)

DOM 节点类型 ​

DOM 中有多种类型的节点，最常见的包括：

元素节点（Element Node） ​

表示 HTML 元素，如 <div>、<p>、<h1> 等。

文本节点（Text Node） ​

包含元素中的文本内容。

属性节点（Attribute Node） ​

表示元素的属性，如 class、id、href 等。

注释节点（Comment Node） ​

表示 HTML 注释。

document 对象 ​

document 对象是 DOM 的入口点，代表整个 HTML 文档：

javascript
// 获取文档标题
console.log(document.title);

// 获取文档 URL
console.log(document.URL);

// 获取文档中的所有元素
console.log(document.all);

window 对象 ​

window 对象代表浏览器窗口，是 JavaScript 的全局对象：

javascript
// 窗口尺寸
console.log(window.innerWidth);
console.log(window.innerHeight);

// 打开新窗口
// window.open("https://www.example.com");

// 弹出对话框
// window.alert("这是一个警告框");

基本 DOM 操作 ​

获取元素 ​

javascript
// 通过 ID 获取元素
let element = document.getElementById("myId");

// 通过类名获取元素
let elements = document.getElementsByClassName("myClass");

// 通过标签名获取元素
let paragraphs = document.getElementsByTagName("p");

// 使用 CSS 选择器获取元素（推荐）
let element = document.querySelector("#myId");
let elements = document.querySelectorAll(".myClass");

修改元素内容 ​

javascript
let element = document.querySelector("#myElement");

// 修改文本内容
element.textContent = "新的文本内容";

// 修改 HTML 内容
element.innerHTML = "<strong>新的 HTML 内容</strong>";

修改元素属性 ​

javascript
let image = document.querySelector("img");

// 获取属性
console.log(image.src);

// 设置属性
image.src = "new-image.jpg";
image.alt = "新的替代文本";

修改元素样式 ​

javascript
let element = document.querySelector("#myElement");

// 修改单个样式属性
element.style.color = "red";
element.style.fontSize = "20px";

// 修改多个样式属性
Object.assign(element.style, {
  backgroundColor: "yellow",
  padding: "10px",
  border: "1px solid black"
});

DOM 事件 ​

DOM 允许我们响应用户的交互行为：

javascript
// 获取按钮元素
let button = document.querySelector("#myButton");

// 添加点击事件监听器
button.addEventListener("click", function() {
  alert("按钮被点击了！");
});

// 使用箭头函数
button.addEventListener("click", () => {
  console.log("按钮被点击了！");
});

DOM 加载事件 ​

确保在 DOM 完全加载后再执行 JavaScript 代码：

javascript
// DOM 内容加载完成后执行
document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM 已准备就绪");
  // 在这里执行 DOM 操作
});

// 页面完全加载后执行（包括图片等资源）
window.addEventListener("load", function() {
  console.log("页面完全加载");
});

最佳实践 ​

  1. 等待 DOM 加载完成：始终确保在 DOM 加载完成后再执行操作 DOM 的代码。

  2. 使用现代选择器：优先使用 querySelector 和 querySelectorAll 而不是旧的选择器方法。

  3. 缓存 DOM 查询：如果需要多次使用同一个元素，应该将其存储在变量中，避免重复查询。

javascript
// 不好的做法
document.querySelector("#myElement").style.color = "red";
document.querySelector("#myElement").textContent = "新内容";

// 好的做法
let element = document.querySelector("#myElement");
element.style.color = "red";
element.textContent = "新内容";
  1. 避免频繁的 DOM 操作：DOM 操作是昂贵的，应该尽量减少操作次数。
javascript
// 不好的做法 - 多次修改 DOM
let list = document.querySelector("#myList");
for (let i = 0; i < 10; i++) {
  let item = document.createElement("li");
  item.textContent = "项目 " + i;
  list.appendChild(item);
}

// 好的做法 - 使用文档片段
let fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  let item = document.createElement("li");
  item.textContent = "项目 " + i;
  fragment.appendChild(item);
}
document.querySelector("#myList").appendChild(fragment);
  1. 正确处理 this 绑定：在事件处理器中注意 this 的绑定问题。

理解 DOM 是掌握前端开发的关键，它是 JavaScript 与网页交互的基础。