当前位置：首页 > news >正文

《掌握基础DOM操作：从零开始的前端入门指南》

news 来源：原创 2025/5/10 13:16:05

在前端开发中，掌握DOM（文档对象模型）操作是每个开发者必备的技能。通过对DOM的熟练操作，我们可以动态地修改网页内容、响应用户交互，甚至优化页面性能。从简单的元素选择到复杂的事件处理，DOM操作是构建现代网页应用的基础。本文将通过一系列常见的DOM操作，帮助你快速入门并掌握这项重要技能。无论你是前端新手，还是希望巩固基础的开发者，都能从中获得实用的技巧和方法。

1. 获取元素

通过 ID 获取元素

let element = document.getElementById('myElement');
console.log(element); // 输出 DOM 元素

通过类名获取元素

let elements = document.getElementsByClassName('myClass');
console.log(elements); // 返回一个 HTMLCollection

通过标签名获取元素

let elements = document.getElementsByTagName('div');
console.log(elements); // 返回一个 HTMLCollection

通过 CSS 选择器获取单个元素

let element = document.querySelector('.myClass');
console.log(element); // 返回第一个匹配的元素

通过 CSS 选择器获取多个元素

let elements = document.querySelectorAll('.myClass');
console.log(elements); // 返回一个 NodeList

2. 创建和插入元素

创建元素

let newElement = document.createElement('div');
newElement.textContent = 'Hello, World!';
console.log(newElement); // 输出新创建的元素

插入元素

// 插入到某个元素的末尾
let parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);

// 插入到某个元素的开头
parentElement.insertBefore(newElement, parentElement.firstChild);

// 插入到某个元素的后面
let referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement.nextSibling);

3. 修改元素内容

修改文本内容

let element = document.getElementById('myElement');
element.textContent = '新的文本内容';
console.log(element.textContent); // 输出：新的文本内容

let element = document.getElementById('myElement');
element.innerText = '新的文本内容';
console.log(element.innerText); // 输出：新的文本内容

修改 HTML 内容

let element = document.getElementById('myElement');
element.innerHTML = '<span>新的 HTML 内容</span>';
console.log(element.innerHTML); // 输出：<span>新的 HTML 内容</span>

4. 修改元素样式

修改单个样式属性

let element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '16px';
console.log(element.style.color); // 输出：red

修改多个样式属性

let element = document.getElementById('myElement');
element.style.cssText = 'color: red; font-size: 16px;';
console.log(element.style.cssText); // 输出：color: red; font-size: 16px;

切换类名

let element = document.getElementById('myElement');
element.classList.add('new-class'); // 添加类名
element.classList.remove('old-class'); // 移除类名
element.classList.toggle('active'); // 切换类名
console.log(element.classList); // 输出：DOMTokenList(2) ["new-class", "active"]

5. 删除元素

let parentElement = document.getElementById('parent');
let childElement = document.getElementById('child');
parentElement.removeChild(childElement);
console.log(parentElement.contains(childElement)); // 输出：false

6. 事件处理

添加事件监听器

let button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log('按钮被点击了');
  console.log(event.target); // 输出：按钮元素
});

移除事件监听器

let button = document.getElementById('myButton');
function handleClick() {
  console.log('按钮被点击了');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

事件对象

let button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log(event.target); // 被点击的元素
  console.log(event.clientX, event.clientY); // 鼠标点击位置
  console.log(event.type); // 事件类型，如 "click"
});

7. 遍历 DOM

访问父元素

let element = document.getElementById('myElement');
let parent = element.parentNode;
console.log(parent); // 输出：父元素

访问子元素

let element = document.getElementById('myElement');
let firstChild = element.firstChild;
let lastChild = element.lastChild;
console.log(firstChild); // 输出：第一个子元素
console.log(lastChild); // 输出：最后一个子元素

访问兄弟元素（排除文本节点）

let element = document.getElementById('myElement');
let nextElementSibling = element.nextElementSibling;
let previousElementSibling = element.previousElementSibling;
console.log(nextElementSibling); // 输出：下一个兄弟元素（排除文本节点）
console.log(previousElementSibling); // 输出：上一个兄弟元素（排除文本节点）

8. 其他常用方法

获取元素的尺寸和位置

let element = document.getElementById('myElement');
let width = element.offsetWidth;
let height = element.offsetHeight;
let left = element.offsetLeft;
let top = element.offsetTop;
console.log(width, height, left, top); // 输出：宽度、高度、左边距、上边距

获取元素的滚动位置

let element = document.getElementById('myElement');
let scrollLeft = element.scrollLeft;
let scrollTop = element.scrollTop;
console.log(scrollLeft, scrollTop); // 输出：水平滚动位置、垂直滚动位置

设置元素的滚动位置

let element = document.getElementById('myElement');
element.scrollLeft = 100;
element.scrollTop = 200;
console.log(element.scrollLeft, element.scrollTop); // 输出：100, 200

获取元素的计算样式

let element = document.getElementById('myElement');
let style = window.getComputedStyle(element);
console.log(style.color); // 输出：元素的 color 样式
console.log(style.fontSize); // 输出：元素的 font-size 样式

9. 实际应用示例

动态添加按钮并绑定点击事件

// 创建按钮
let button = document.createElement('button');
button.textContent = '点击我';

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

// 插入到页面中
document.body.appendChild(button);

动态修改列表内容

// 获取列表
let list = document.querySelector('ul');

// 创建新列表项
let listItem = document.createElement('li');
listItem.textContent = '新列表项';

// 插入到列表中
list.appendChild(listItem);

动态修改列表内容

let element = document.getElementById('myElement');

// 显示元素
element.style.display = 'block';

// 隐藏元素
element.style.display = 'none';

动态修改表单内容

// 获取表单输入框
let input = document.getElementById('myInput');

// 添加输入事件监听器
input.addEventListener('input', function(event) {
  console.log('输入的内容：', event.target.value);
});

// 获取表单提交按钮
let submitButton = document.getElementById('mySubmit');

// 添加提交事件监听器
submitButton.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  console.log('表单提交，输入的内容：', input.value);
});