JavaScript DOM 操作是指使用 JavaScript 来操作 HTML 文档的对象模型。

以下是一些常见的 DOM 操作方法：

选择元素

// 通过 ID 获取元素
let element = document.getElementById('myId');

// 通过类名获取元素集合
let elements = document.getElementsByClassName('myClass');

// 通过标签名获取元素集合
let tags = document.getElementsByTagName('div');

// 通过 CSS 选择器获取第一个匹配元素
let firstElement = document.querySelector('.myClass');

// 通过 CSS 选择器获取所有匹配元素
let allElements = document.querySelectorAll('div.myClass');

修改内容

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

// 修改文本内容
element.textContent = '新文本';

// 修改元素属性
element.setAttribute('src', 'image.jpg');
element.getAttribute('class');
element.removeAttribute('disabled');

样式操作

// 修改样式
element.style.color = 'red';
element.style.backgroundColor = '#fff';

// 添加/移除/切换 CSS 类
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active-class');

创建和添加元素

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

// 添加到父元素
parentElement.appendChild(newDiv);

// 插入到指定位置
parentElement.insertBefore(newDiv, referenceElement);

// 替换元素
parentElement.replaceChild(newDiv, oldElement);

事件处理

// 添加事件监听器
element.addEventListener('click', function(event) {
    console.log('元素被点击了');
});

// 移除事件监听器
element.removeEventListener('click', handlerFunction);

遍历 DOM

// 父节点
let parent = element.parentNode;

// 子节点
let children = element.children;
let firstChild = element.firstElementChild;
let lastChild = element.lastElementChild;

// 兄弟节点
let nextSibling = element.nextElementSibling;
let previousSibling = element.previousElementSibling;

这些是 DOM 操作的基础方法，可以用于动态修改页面内容、样式和结构。