DOM操作

DOM（文档对象模型）是HTML和XML文档的编程接口，它将文档表示为节点树，允许JavaScript操作文档的结构、样式和内容。

DOM节点

DOM树由各种类型的节点组成，主要包括：

  • 文档节点（Document）：整个HTML文档
  • 元素节点（Element）：HTML元素
  • 文本节点（Text）：元素内的文本
  • 属性节点（Attribute）：HTML元素的属性
  • 注释节点（Comment）：注释内容

选择元素

通过ID选择

javascript 
const element = document.getElementById('myElement');

通过类名选择

javascript 
const elements = document.getElementsByClassName('myClass');
// 返回HTMLCollection（类似数组的对象）

通过标签名选择

javascript 
const paragraphs = document.getElementsByTagName('p');
// 返回HTMLCollection

通过CSS选择器选择

javascript 
// 选择第一个匹配的元素
const element = document.querySelector('.myClass');

// 选择所有匹配的元素
const elements = document.querySelectorAll('.myClass');
// 返回NodeList（类似数组的对象）

修改元素内容

innerHTML

设置或获取元素的HTML内容：

javascript 
const element = document.getElementById('myElement');
element.innerHTML = '<p>新内容</p>';
console.log(element.innerHTML);

textContent

设置或获取元素的文本内容（不包含HTML标签）：

javascript 
const element = document.getElementById('myElement');
element.textContent = '新文本内容';
console.log(element.textContent);

innerText

设置或获取元素的可见文本内容：

javascript 
const element = document.getElementById('myElement');
element.innerText = '新可见文本';
console.log(element.innerText);

修改元素属性

设置属性

javascript 
const img = document.getElementById('myImage');
img.setAttribute('src', 'new-image.jpg');
img.setAttribute('alt', '新图片');

获取属性

javascript 
const img = document.getElementById('myImage');
const src = img.getAttribute('src');
const alt = img.getAttribute('alt');

移除属性

javascript 
const img = document.getElementById('myImage');
img.removeAttribute('alt');

直接访问HTML属性

javascript 
const input = document.getElementById('myInput');
input.value = '新值';
console.log(input.value);

const a = document.getElementById('myLink');
a.href = 'https://example.com';
console.log(a.href);

修改元素样式

通过style属性

javascript 
const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.backgroundColor = 'yellow';

通过classList

javascript 
const element = document.getElementById('myElement');

// 添加类
element.classList.add('newClass');

// 移除类
element.classList.remove('oldClass');

// 切换类（存在则移除，不存在则添加）
element.classList.toggle('activeClass');

// 检查是否包含类
const hasClass = element.classList.contains('myClass');

通过className

javascript 
const element = document.getElementById('myElement');
element.className = 'newClass1 newClass2'; // 替换所有类
console.log(element.className);

创建和插入元素

创建元素

javascript 
const newDiv = document.createElement('div');
const newText = document.createTextNode('新文本');
const newComment = document.createComment('这是一个注释');

插入元素

javascript 
const parent = document.getElementById('parentElement');
const newElement = document.createElement('p');
newElement.textContent = '新段落';

// 在父元素末尾插入
parent.appendChild(newElement);

// 在指定元素之前插入
const referenceElement = document.getElementById('reference');
parent.insertBefore(newElement, referenceElement);

替换元素

javascript 
const parent = document.getElementById('parentElement');
const oldElement = document.getElementById('oldElement');
const newElement = document.createElement('div');
newElement.textContent = '新元素';

parent.replaceChild(newElement, oldElement);

移除元素

javascript 
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');

parent.removeChild(child);

// 或直接移除元素
child.remove();

遍历DOM树

父节点

javascript 
const element = document.getElementById('myElement');
const parent = element.parentNode;
const parentElement = element.parentElement; // 只返回元素节点

子节点

javascript 
const element = document.getElementById('myElement');

// 获取所有子节点（包括文本、注释等）
const childNodes = element.childNodes;

// 获取所有子元素节点
const children = element.children;

// 获取第一个子节点
const firstChild = element.firstChild;

// 获取第一个子元素节点
const firstElementChild = element.firstElementChild;

// 获取最后一个子节点
const lastChild = element.lastChild;

// 获取最后一个子元素节点
const lastElementChild = element.lastElementChild;

兄弟节点

javascript 
const element = document.getElementById('myElement');

// 获取前一个兄弟节点
const previousSibling = element.previousSibling;

// 获取前一个兄弟元素节点
const previousElementSibling = element.previousElementSibling;

// 获取后一个兄弟节点
const nextSibling = element.nextSibling;

// 获取后一个兄弟元素节点
const nextElementSibling = element.nextElementSibling;

操作表单元素

javascript 
const form = document.getElementById('myForm');
const input = document.getElementById('myInput');
const checkbox = document.getElementById('myCheckbox');

// 获取表单元素的值
console.log(input.value);
console.log(checkbox.checked);

// 提交表单
form.submit();

// 重置表单
form.reset();

DOM事件

事件监听

javascript 
const button = document.getElementById('myButton');

// 添加事件监听器
button.addEventListener('click', function(event) {
  console.log('按钮被点击了');
  console.log(event); // 事件对象
});

// 移除事件监听器
function handleClick() {
  console.log('按钮被点击了');
}

button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

常用事件类型

  • 鼠标事件：click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove
  • 键盘事件：keydown, keyup, keypress
  • 表单事件：submit, reset, input, change, focus, blur
  • 窗口事件：load, resize, scroll, unload

学习资源

继续学习：BOM操作

最后更新：2026-02-08