js dom实现
使用 JavaScript 操作 DOM
JavaScript 提供了丰富的 API 来操作文档对象模型（DOM），允许动态修改网页内容和结构。
获取 DOM 元素
通过选择器获取元素是最常见的操作：
// 通过 ID 获取
const elementById = document.getElementById('myId');
// 通过类名获取（返回 HTMLCollection）
const elementsByClass = document.getElementsByClassName('myClass');
// 通过标签名获取（返回 HTMLCollection）
const elementsByTag = document.getElementsByTagName('div');
// 通过 CSS 选择器获取单个元素
const element = document.querySelector('.myClass');
// 通过 CSS 选择器获取多个元素（返回 NodeList）
const elements = document.querySelectorAll('.myClass');修改元素内容
可以修改元素的文本内容或 HTML：
// 修改文本内容
element.textContent = '新的文本内容';
// 修改 HTML 内容
element.innerHTML = '<strong>加粗文本</strong>';修改元素属性
可以获取或设置元素的属性：
// 获取属性
const src = imageElement.getAttribute('src');
// 设置属性
element.setAttribute('data-custom', 'value');
// 直接访问属性
element.id = 'newId';
element.className = 'newClass';
element.classList.add('additionalClass');创建和添加元素
可以动态创建新元素并添加到 DOM 中：
// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '新创建的元素';
// 添加到父元素末尾
parentElement.appendChild(newElement);
// 插入到特定位置
parentElement.insertBefore(newElement, referenceElement);
// 替换元素
parentElement.replaceChild(newElement, oldElement);删除元素
可以从 DOM 中移除元素：
// 移除子元素
parentElement.removeChild(childElement);
// 现代方法（直接移除自身）
element.remove();事件处理
可以为元素添加事件监听器：
// 添加点击事件
buttonElement.addEventListener('click', function(event) {
console.log('按钮被点击');
});
// 移除事件
const handler = function() { /* ... */ };
element.addEventListener('click', handler);
element.removeEventListener('click', handler);样式操作
可以直接修改元素的样式：
// 修改单个样式属性
element.style.color = 'red';
element.style.backgroundColor = '#fff';
// 批量修改样式
element.style.cssText = 'color: red; background-color: white;';
// 获取计算样式
const computedStyle = window.getComputedStyle(element);
const color = computedStyle.getPropertyValue('color');遍历 DOM
可以遍历 DOM 树的各个部分：
// 获取父元素
const parent = element.parentNode;
// 获取子元素
const firstChild = element.firstChild;
const children = element.children;
// 获取兄弟元素
const nextSibling = element.nextSibling;
const previousSibling = element.previousSibling;这些方法提供了强大的能力来动态操作网页内容和结构，使网页能够响应用户交互和数据变化。
