js dom实现
DOM 基本概念
DOM（Document Object Model）是浏览器提供的编程接口，用于操作 HTML 和 XML 文档的结构。通过 DOM，可以动态修改页面内容、结构和样式。
获取 DOM 元素
通过 ID 获取元素：
const element = document.getElementById('elementId');通过类名获取元素集合：
const elements = document.getElementsByClassName('className');通过标签名获取元素集合：
const elements = document.getElementsByTagName('div');通过 CSS 选择器获取元素：
const element = document.querySelector('#id .class');
const elements = document.querySelectorAll('.class');修改 DOM 元素
修改元素内容：
element.textContent = '新文本内容';
element.innerHTML = '<strong>加粗文本</strong>';修改元素属性：
element.setAttribute('data-custom', 'value');
const value = element.getAttribute('data-custom');
element.removeAttribute('data-custom');修改元素样式：
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';创建和添加 DOM 元素
创建新元素：
const newElement = document.createElement('div');
newElement.textContent = '新创建的元素';添加元素到 DOM：
parentElement.appendChild(newElement);
parentElement.insertBefore(newElement, referenceElement);事件处理
添加事件监听器：
element.addEventListener('click', function(event) {
console.log('元素被点击');
});移除事件监听器：
function handleClick() {
console.log('点击事件');
}
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);常用 DOM 操作
获取和设置表单值：
const inputValue = document.querySelector('input').value;
document.querySelector('input').value = '新值';遍历子元素：
const children = parentElement.children;
for (let i = 0; i < children.length; i++) {
console.log(children[i]);
}性能优化建议
批量修改 DOM：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = '项目 ' + i;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);使用事件委托：
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.matches('li')) {
console.log('列表项被点击');
}
});
