测试面试必备：DOM元素常用操作方法详解

最新推荐文章于 2025-06-02 18:00:00 发布

原创最新推荐文章于 2025-06-02 18:00:00 发布 · 964 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

自动化测试面试题

自动化测试面试题 - 元素有哪些常用操作方法？

引言

DOM（Document Object Model）是HTML和XML文档的编程接口，它提供了对文档的结构化表示，并定义了一种方式使程序可以访问和改变文档的结构、样式和内容。在前端开发中，掌握DOM元素的操作方法是基本功。本文将介绍DOM元素的常用操作方法，并通过流程图帮助理解这些操作的过程。

一、DOM查询方法

1. 获取单个元素

// 通过ID获取
document.getElementById('elementId');

// 通过CSS选择器获取第一个匹配元素
document.querySelector('.className');
document.querySelector('#id');
document.querySelector('div');

2. 获取多个元素

// 通过类名获取
document.getElementsByClassName('className');

// 通过标签名获取
document.getElementsByTagName('div');

// 通过CSS选择器获取所有匹配元素
document.querySelectorAll('.className');

二、DOM修改方法

1. 修改元素内容

// 修改HTML内容
element.innerHTML = '<span>新内容</span>';

// 修改文本内容（更安全，不会解析HTML）
element.textContent = '新文本内容';

// 老式文本内容修改（有兼容性问题）
element.innerText = '新文本内容';

2. 修改元素属性

// 获取属性
let value = element.getAttribute('attributeName');

// 设置属性
element.setAttribute('attributeName', 'value');

// 移除属性
element.removeAttribute('attributeName');

// 直接访问标准属性
element.id = 'newId';
element.className = 'newClass';
element.href = 'newUrl';

三、DOM元素创建与删除

1. 创建新元素

// 创建新元素
let newElement = document.createElement('div');

// 创建文本节点
let textNode = document.createTextNode('一些文本');

// 克隆现有元素
let clonedElement = element.cloneNode(true); // true表示深克隆

2. 添加元素

// 在父元素末尾添加
parentElement.appendChild(newElement);

// 在特定元素前插入
parentElement.insertBefore(newElement, referenceElement);

// 现代方法：在任意位置插入
referenceElement.before(newElement); // 在前面插入
referenceElement.after(newElement);  // 在后面插入

3. 删除元素

// 从父元素中移除子元素
parentElement.removeChild(childElement);

// 现代方法：元素自我删除
childElement.remove();

四、样式操作

1. 通过style属性

// 设置单个样式
element.style.color = 'red';
element.style.backgroundColor = '#fff';

// 批量设置样式
element.style.cssText = 'color: red; background-color: #fff;';

// 获取样式（只能获取内联样式）
let color = element.style.color;

2. 通过classList操作类

// 添加类
element.classList.add('new-class');

// 移除类
element.classList.remove('old-class');

// 切换类
element.classList.toggle('active');

// 检查是否包含类
if (element.classList.contains('some-class')) {
    // do something
}

3. 获取计算样式

// 获取元素最终计算样式（包括样式表中的样式）
let style = window.getComputedStyle(element);
let color = style.getPropertyValue('color');

五、事件处理

1. 添加事件监听器

// 推荐方式
element.addEventListener('click', function(event) {
    console.log('元素被点击了', event);
});

// 传统方式（不推荐）
element.onclick = function() {
    console.log('元素被点击了');
};

2. 移除事件监听器

function handleClick() {
    console.log('点击处理');
}

// 添加
element.addEventListener('click', handleClick);

// 移除
element.removeEventListener('click', handleClick);

六、遍历DOM

1. 父节点遍历

// 获取父元素
let parent = element.parentElement;

// 获取父节点（可能是文本节点等）
let parentNode = element.parentNode;

2. 子节点遍历

// 获取所有子元素
let children = element.children;

// 获取第一个/最后一个子元素
let firstChild = element.firstElementChild;
let lastChild = element.lastElementChild;

3. 兄弟节点遍历

// 获取前一个/后一个兄弟元素
let prevSibling = element.previousElementSibling;
let nextSibling = element.nextElementSibling;

七、表单元素操作

// 获取表单值
let inputValue = inputElement.value;
let checkboxChecked = checkboxElement.checked;
let selectValue = selectElement.value;

// 设置表单值
inputElement.value = '新值';
checkboxElement.checked = true;
selectElement.value = 'option2';

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

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