网硕互联帮助中心1. 什么是 DOM Document？
DOM（Document Object Model，文档对象模型）Document 是 HTML/XML 文档在内存中的表示形式，它是整个 DOM 树的根节点，也是 JavaScript 操作网页内容的主要入口。当浏览器加载一个 HTML 页面时，会解析 HTML 代码并构建一个 DOM Document 对象，通过这个对象，我们可以访问、修改、添加或删除页面上的任何元素。
2. DOM Document 的核心属性与方法
2.1 常用属性
- document.documentElement：返回文档的根元素（HTML 文档中通常是 <html> 元素）
- document.head：返回 <head> 元素
- document.body：返回 <body> 元素
- document.title：获取或设置文档标题
- document.URL：返回完整的文档 URL
- document.forms：返回文档中所有表单的集合
- document.images：返回文档中所有图片的集合
- document.links：返回文档中所有链接的集合
2.2 常用方法
- document.getElementById(id)：通过 ID 获取元素
- document.getElementsByClassName(className)：通过类名获取元素集合
- document.getElementsByTagName(tagName)：通过标签名获取元素集合
- document.querySelector(selector)：通过 CSS 选择器获取第一个匹配元素
- document.querySelectorAll(selector)：通过 CSS 选择器获取所有匹配元素
- document.createElement(tagName)：创建新元素
- document.createTextNode(text)：创建文本节点
- document.write()：向文档写入内容
3. 实战代码示例
3.1 基础操作示例
// 获取文档根元素
const rootElement = document.documentElement;
console.log('根元素标签名:', rootElement.tagName); // 输出: HTML
// 修改文档标题
document.title = 'DOM Document 学习页面';
// 获取 body 元素并修改背景色
document.body.style.backgroundColor = '#f0f0f0';
// 通过 ID 获取元素并修改内容
const header = document.getElementById('main-header');
if (header) {
header.textContent = '欢迎学习 DOM Document';
header.style.color = '#333';
}
// 通过类名获取元素集合
const paragraphs = document.getElementsByClassName('content');
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.fontSize = '16px';
paragraphs[i].style.lineHeight = '1.6';
}
// 通过标签名获取元素
const allLinks = document.getElementsByTagName('a');
console.log(`文档中共有 ${allLinks.length} 个链接`);
3.2 创建和添加元素
// 创建新元素
const newDiv = document.createElement('div');
newDiv.id = 'dynamic-content';
newDiv.className = 'container';
// 创建文本节点
const textNode = document.createTextNode('这是动态创建的内容');
// 添加文本到 div
newDiv.appendChild(textNode);
// 创建更多内容
const paragraph = document.createElement('p');
paragraph.innerHTML = '使用 innerHTML 属性可以设置 HTML 内容';
// 将段落添加到 div
newDiv.appendChild(paragraph);
// 创建列表
const list = document.createElement('ul');
const items = ['第一项', '第二项', '第三项'];
items.forEach(itemText => {
const listItem = document.createElement('li');
listItem.textContent = itemText;
list.appendChild(listItem);
});
newDiv.appendChild(list);
// 将新创建的 div 添加到 body 末尾
document.body.appendChild(newDiv);
// 或者插入到特定位置
const existingElement = document.getElementById('insert-before-me');
if (existingElement) {
document.body.insertBefore(newDiv, existingElement);
}
3.3 使用 querySelector 进行高级选择
// 选择第一个匹配的元素
const firstButton = document.querySelector('button');
const firstInput = document.querySelector('input[type="text"]');
const firstListItem = document.querySelector('ul li:first-child');
// 选择所有匹配的元素
const allButtons = document.querySelectorAll('button');
const allInputs = document.querySelectorAll('input');
const allListItems = document.querySelectorAll('ul li');
// 复杂选择器示例
const specialDiv = document.querySelector('div.container > p.highlight');
const evenRows = document.querySelectorAll('table tr:nth-child(even)');
// 遍历 NodeList
allButtons.forEach((button, index) => {
button.addEventListener('click', () => {
console.log(`按钮 ${index + 1} 被点击`);
});
});
// 统计元素数量
console.log(`文档中有 ${allButtons.length} 个按钮`);
console.log(`文档中有 ${allInputs.length} 个输入框`);
console.log(`文档中有 ${allListItems.length} 个列表项`);
3.4 事件处理与 DOM 操作
// 为按钮添加点击事件
const actionButton = document.createElement('button');
actionButton.textContent = '点击我';
actionButton.id = 'action-btn';
actionButton.addEventListener('click', function() {
// 创建新元素
const message = document.createElement('div');
message.className = 'message';
message.textContent = `按钮在 ${new Date().toLocaleTimeString()} 被点击`;
message.style.padding = '10px';
message.style.margin = '10px 0';
message.style.backgroundColor = '#e0f7fa';
message.style.borderRadius = '5px';
// 添加到文档
document.body.appendChild(message);
// 3秒后移除消息
setTimeout(() => {
if (message.parentNode) {
message.parentNode.removeChild(message);
}
}, 3000);
});
document.body.appendChild(actionButton);
// 表单处理示例
const form = document.createElement('form');
form.id = 'user-form';
const nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.placeholder = '请输入姓名';
nameInput.name = 'username';
const emailInput = document.createElement('input');
emailInput.type = 'email';
emailInput.placeholder = '请输入邮箱';
emailInput.name = 'email';
const submitButton = document.createElement('button');
submitButton.type = 'submit';
submitButton.textContent = '提交';
form.appendChild(nameInput);
form.appendChild(document.createElement('br'));
form.appendChild(emailInput);
form.appendChild(document.createElement('br'));
form.appendChild(submitButton);
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(this);
const data = Object.fromEntries(formData);
console.log('表单数据:', data);
// 显示提交结果
const resultDiv = document.createElement('div');
resultDiv.innerHTML = `
提交成功！
姓名: ${data.username || '未填写'}
邮箱: ${data.email || '未填写'}
`;
document.body.appendChild(resultDiv);
});
document.body.appendChild(form);
3.5 遍历和修改 DOM 树
// 遍历元素的所有子节点
function traverseDOM(element, depth = 0) {
const indent = ' '.repeat(depth);
console.log(`${indent}${element.nodeName} – ${element.nodeType}`);
// 遍历子节点
element.childNodes.forEach(child => {
if (child.nodeType === Node.ELEMENT_NODE) {
traverseDOM(child, depth + 1);
} else if (child.nodeType === Node.TEXT_NODE && child.textContent.trim()) {
console.log(`${indent} Text: "${child.textContent.trim()}"`);
}
});
}
// 从 body 开始遍历
traverseDOM(document.body);
// 修改元素属性
const elements = document.querySelectorAll('.editable');
elements.forEach(element => {
// 添加自定义属性
element.setAttribute('data-modified', 'true');
// 修改现有属性
if (element.hasAttribute('title')) {
element.setAttribute('title', `修改后的: ${element.getAttribute('title')}`);
}
// 移除属性
if (element.hasAttribute('old-attr')) {
element.removeAttribute('old-attr');
}
});
// 克隆元素
const original = document.getElementById('template');
if (original) {
const clone = original.cloneNode(true); // true 表示深度克隆
clone.id = 'template-clone';
document.body.appendChild(clone);
}
4. 性能优化与最佳实践
4.1 减少 DOM 操作
// 不好的做法：多次修改 DOM
const list = document.getElementById('my-list');
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `项目 ${i}`;
list.appendChild(item); // 每次循环都触发重排
}
// 好的做法：使用文档片段
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `项目 ${i}`;
fragment.appendChild(item);
}
list.appendChild(fragment); // 只触发一次重排
4.2 事件委托
// 不好的做法：为每个元素单独添加事件监听器
const items = document.querySelectorAll('.list-item');
items.forEach(item => {
item.addEventListener('click', handleClick);
});
// 好的做法：事件委托
const listContainer = document.getElementById('list-container');
listContainer.addEventListener('click', function(event) {
if (event.target.classList.contains('list-item')) {
handleClick(event);
}
});
function handleClick(event) {
console.log('点击了:', event.target.textContent);
}
4.3 缓存 DOM 查询结果
// 不好的做法：重复查询
function updateElements() {
document.querySelector('.item').style.color = 'red';
document.querySelector('.item').style.fontSize = '16px';
document.querySelector('.item').textContent = '更新内容';
}
// 好的做法：缓存查询结果
function updateElementsOptimized() {
const item = document.querySelector('.item');
item.style.color = 'red';
item.style.fontSize = '16px';
item.textContent = '更新内容';
}
5. 浏览器兼容性与 polyfill
虽然现代浏览器都支持标准的 DOM Document API，但在处理旧浏览器时需要注意兼容性问题：
// 兼容性检查
if (document.querySelector && document.addEventListener) {
// 现代浏览器支持的特性
console.log('支持现代 DOM API');
} else {
// 降级方案
console.log('使用传统 DOM 方法');
}
// 添加 class 的兼容性写法
function addClass(element, className) {
if (element.classList) {
element.classList.add(className);
} else {
element.className += ' ' + className;
}
}
// 事件监听的兼容性写法
function addEvent(element, event, handler) {
if (element.addEventListener) {
element.addEventListener(event, handler);
} else if (element.attachEvent) {
element.attachEvent('on' + event, handler);
} else {
element['on' + event] = handler;
}
}
6. 总结
DOM Document 是前端开发的核心基础，掌握其 API 和最佳实践对于构建高效、可维护的 Web 应用至关重要。通过本文的代码示例，你应该能够：
在实际开发中，建议结合现代前端框架（如 React、Vue、Angular）来管理 DOM 操作，这些框架提供了更高效、更声明式的 DOM 更新机制。但对于理解底层原理和进行框架无关的开发，深入掌握原生 DOM Document API 仍然是每个前端开发者的必备技能。
评论前必须登录！
注册