js实现增删
js实现增加元素
通过DOM操作可以动态添加元素到页面中。常见方法包括使用createElement和appendChild。
// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '新增内容';
// 添加到DOM中
document.body.appendChild(newElement);使用insertAdjacentHTML可以快速插入HTML字符串：
document.body.insertAdjacentHTML('beforeend', '<div>动态内容</div>');js实现删除元素
删除元素需要先获取目标元素的引用，然后调用移除方法。
// 获取要删除的元素
const elementToRemove = document.getElementById('target');
// 从DOM中移除
if(elementToRemove) {
elementToRemove.remove();
}使用父元素移除子元素：
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);js实现修改元素
获取元素引用后直接修改其属性或内容。
// 修改元素内容
const element = document.getElementById('myElement');
element.textContent = '修改后的内容';
// 修改样式
element.style.color = 'red';
// 修改属性
element.setAttribute('data-value', '123');js实现查询元素
使用DOM查询方法获取元素引用。
// 通过ID查询
const byId = document.getElementById('elementId');
// 通过类名查询
const byClass = document.getElementsByClassName('className');
// 通过标签名查询
const byTag = document.getElementsByTagName('div');
// 使用CSS选择器
const bySelector = document.querySelector('#container .item');
const bySelectorAll = document.querySelectorAll('.items');js实现事件监听
为元素添加交互功能需要事件监听。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('按钮被点击');
});
// 事件委托
document.body.addEventListener('click', function(event) {
if(event.target.classList.contains('item')) {
console.log('点击了某个项目');
}
});js实现动态样式操作
通过classList或直接修改style属性来改变元素样式。
const box = document.getElementById('box');
// 添加类
box.classList.add('active');
// 移除类
box.classList.remove('inactive');
// 切换类
box.classList.toggle('visible');
// 直接修改样式
box.style.backgroundColor = '#f00';
box.style.width = '100px';
