js实现dom
使用原生 JavaScript 操作 DOM
创建元素并添加到 DOM 中：
const newElement = document.createElement('div');
newElement.textContent = '新创建的元素';
document.body.appendChild(newElement);通过 ID 获取元素：
const elementById = document.getElementById('myElement');通过类名获取元素：
const elementsByClass = document.getElementsByClassName('myClass');通过标签名获取元素：
const elementsByTag = document.getElementsByTagName('p');通过选择器获取元素：
const element = document.querySelector('#myElement .myClass');
const elements = document.querySelectorAll('.myClass');修改元素内容：
elementById.innerHTML = '<strong>修改后的内容</strong>';
elementById.textContent = '纯文本内容';修改元素样式：
elementById.style.color = 'red';
elementById.style.backgroundColor = '#f0f0f0';添加和移除类：
elementById.classList.add('new-class');
elementById.classList.remove('old-class');
elementById.classList.toggle('active');事件监听：
elementById.addEventListener('click', function(event) {
console.log('元素被点击了', event);
});移除元素：
const elementToRemove = document.getElementById('removeMe');
elementToRemove.parentNode.removeChild(elementToRemove);动态创建和插入 DOM 结构
创建复杂 DOM 结构：
const container = document.createElement('div');
container.className = 'container';
const header = document.createElement('h1');
header.textContent = '动态创建的标题';
const paragraph = document.createElement('p');
paragraph.textContent = '这是动态创建的段落内容。';
container.appendChild(header);
container.appendChild(paragraph);
document.body.appendChild(container);DOM 属性操作
获取和设置属性：
const link = document.querySelector('a');
const href = link.getAttribute('href');
link.setAttribute('target', '_blank');数据集操作：
elementById.dataset.userId = '12345';
const userId = elementById.dataset.userId;表单元素操作
获取表单值：
const input = document.querySelector('input[type="text"]');
const value = input.value;设置表单值：
input.value = '新的输入值';表单提交处理：
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(form);
// 处理表单数据
});动画效果
使用 JavaScript 实现简单动画：
function animate(element) {
let pos = 0;
const interval = setInterval(() => {
if (pos >= 300) {
clearInterval(interval);
} else {
pos++;
element.style.left = pos + 'px';
}
}, 10);
}性能优化建议
批量 DOM 操作：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('div');
item.textContent = '项目 ' + i;
fragment.appendChild(item);
}
document.body.appendChild(fragment);避免频繁重排：
// 先读取，后写入
const width = element.offsetWidth;
element.style.width = (width + 100) + 'px';
