js实现dom
使用原生JavaScript操作DOM
原生JavaScript提供了多种方法来操作DOM（文档对象模型）。这些方法允许动态修改网页内容、结构和样式。
创建元素
const newElement = document.createElement('div');
newElement.textContent = '新创建的元素';
document.body.appendChild(newElement);选择元素
// 通过ID选择
const elementById = document.getElementById('myId');
// 通过类名选择
const elementsByClass = document.getElementsByClassName('myClass');
// 通过标签名选择
const elementsByTag = document.getElementsByTagName('div');
// 使用CSS选择器
const element = document.querySelector('#container .item');
const elements = document.querySelectorAll('.items');修改元素内容
// 修改文本内容
element.textContent = '新文本内容';
// 修改HTML内容
element.innerHTML = '<strong>加粗文本</strong>';添加和移除事件监听器
事件处理是DOM操作的重要组成部分，允许对用户交互做出响应。
添加事件监听
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log('按钮被点击');
});移除事件监听
function handleClick() {
console.log('点击处理');
}
button.addEventListener('click', handleClick);
// 稍后移除
button.removeEventListener('click', handleClick);修改元素样式和类
动态修改元素外观可以通过直接操作style属性或类名实现。
修改内联样式
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';操作类名
// 添加类
element.classList.add('active');
// 移除类
element.classList.remove('inactive');
// 切换类
element.classList.toggle('visible');
// 检查类是否存在
if (element.classList.contains('hidden')) {
// 执行操作
}遍历和操作DOM树
了解如何遍历DOM树对于复杂操作非常重要。
父节点和子节点
// 获取父节点
const parent = element.parentNode;
// 获取子节点
const firstChild = parent.firstChild;
const lastChild = parent.lastChild;
const children = parent.children;兄弟节点
const nextSibling = element.nextSibling;
const previousSibling = element.previousSibling;动态修改DOM结构
除了创建新元素，还可以修改现有DOM结构。
插入元素
// 在参考节点前插入
parent.insertBefore(newElement, referenceElement);
// 在末尾追加
parent.appendChild(newElement);替换元素
parent.replaceChild(newElement, oldElement);移除元素
parent.removeChild(childElement);
// 现代方法
childElement.remove();使用文档片段提高性能
当需要添加多个DOM节点时，使用文档片段可以减少重绘和回流。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `项目 ${i}`;
fragment.appendChild(item);
}
document.getElementById('list').appendChild(fragment);表单元素操作
表单元素有特殊的属性和方法需要关注。
获取表单值
const input = document.querySelector('input');
console.log(input.value);
const checkbox = document.querySelector('input[type="checkbox"]');
console.log(checkbox.checked);设置表单值
input.value = '新值';
checkbox.checked = true;监听表单事件
input.addEventListener('change', function() {
console.log('值已改变');
});
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('表单提交');
});
