当前位置：首页 > JavaScript

js实现dom

2026-03-14 19:44:30JavaScript

使用原生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;

监听表单事件

js实现dom

input.addEventListener('change', function() {
    console.log('值已改变');
});

form.addEventListener('submit', function(event) {
    event.preventDefault();
    console.log('表单提交');
});