JavaScript HTML DOM 完全指南
编程小白的通俗易懂知识点汇总
DOM（文档对象模型）是JavaScript与网页内容交互的核心，掌握它你就能让网页动起来！
一、DOM 是什么？
DOM (Document Object Model) 是网页的编程接口，它将整个HTML文档表示为一个树形结构。
💡 大白话解释：把网页想象成一棵大树，HTML标签就是树的枝干，内容就是叶子。DOM就是这棵树的完整模型。
关键概念：
- 每个HTML元素都是一个节点(node)
- 整个文档是一个文档节点(document)
- HTML元素是元素节点(element)
- 元素内的文本是文本节点(text)
- 属性是属性节点(attribute)
示例HTML结构：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1 id=”title”>欢迎学习DOM</h1>
<p>这是段落文本</p>
</body>
</html>
对应的DOM树结构：
- document (文档节点)
- html (元素节点)
- head (元素节点)
- title (元素节点)
- "我的网页" (文本节点)
- body (元素节点)
- h1 (元素节点)
- id="title" (属性节点)
- "欢迎学习DOM" (文本节点)
- p (元素节点)
- "这是段落文本" (文本节点)
二、如何获取HTML元素？
要操作元素，首先需要找到它们！JavaScript提供了多种方法：
// 1. 通过ID获取（返回单个元素）
let titleElement = document.getElementById(‘title’);
// 2. 通过类名获取（返回元素集合）
let items = document.getElementsByClassName(‘item’);
// 3. 通过标签名获取（返回元素集合）
let paragraphs = document.getElementsByTagName(‘p’);
// 4. 通过CSS选择器获取（返回第一个匹配元素）
let box = document.querySelector(‘.container’);
// 5. 通过CSS选择器获取所有匹配元素（返回NodeList）
let buttons = document.querySelectorAll(‘button’);
⚠️ 注意：getElementById和querySelector返回单个元素，其他方法返回集合。
试试看：
原始标题内容
这是原始段落内容。
三、如何操作元素内容？
获取元素后，你可以修改它的内容和属性：
1. 修改HTML内容
// 修改元素内部的HTML
element.innerHTML = “<strong>新内容</strong>”;
// 修改元素内部的纯文本
element.textContent = “新文本内容”;
🔍 区别：
innerHTML – 可以解析HTML标签
textContent – 只设置纯文本，更安全
2. 操作元素属性
// 获取属性
let id = element.id;
let src = element.getAttribute(“src”);
// 设置属性
element.id = “newId”;
element.setAttribute(“src”, “new-image.jpg”);
// 移除属性
element.removeAttribute(“title”);
动手尝试：
四、如何修改CSS样式？
使用JavaScript可以动态改变元素的样式：
// 直接修改单个样式
element.style.color = “blue”;
element.style.fontSize = “24px”;
// 修改多个样式
element.style.cssText = “color: red; background: yellow; padding: 10px;”;
// 添加/移除/切换CSS类
element.classList.add(“new-class”);
element.classList.remove(“old-class”);
element.classList.toggle(“active-class”);
// 获取计算样式（最终应用的样式）
let computedStyle = window.getComputedStyle(element);
let width = computedStyle.getPropertyValue(“width”);
📌 注意：JS中的CSS属性名使用驼峰命名法（如fontSize），而不是CSS中的连字符（font-size）。
样式修改演示：
这个盒子的样式可以通过JavaScript改变
五、事件处理 – 让网页交互起来
事件是用户或浏览器执行的交互动作（如点击、鼠标移动、按键等）。
添加事件监听器
// 方法一：HTML属性（不推荐）
<button onclick=”handleClick()”>点击我</button>
// 方法二：DOM属性（只能绑定一个事件）
element.onclick = function() {
alert(“按钮被点击了！”);
};
// 方法三：addEventListener()（推荐，可添加多个）
element.addEventListener(“click”, function(event) {
console.log(“按钮被点击了”, event);
});
常见事件类型：
- 鼠标事件：click, dblclick, mouseover, mouseout, mousemove
- 键盘事件：keydown, keyup, keypress
- 表单事件：submit, change, input, focus, blur
- 窗口事件：load, resize, scroll
事件交互演示：
在此区域移动鼠标或点击
六、创建、添加和删除元素
动态修改页面内容：
1. 创建新元素
// 创建一个新的div元素
let newDiv = document.createElement(“div”);
// 设置元素属性和内容
newDiv.id = “new-element”;
newDiv.textContent = “我是新创建的元素！”;
2. 添加元素到DOM
// 添加到父元素的末尾
parentElement.appendChild(newDiv);
// 插入到某个元素前面
parentElement.insertBefore(newDiv, referenceElement);
// 替换现有元素
parentElement.replaceChild(newDiv, oldElement);
3. 删除元素
// 方法一：通过父元素删除
parentElement.removeChild(elementToRemove);
// 方法二：元素自己删除自己
elementToRemove.remove();