DOM操作 - JS交互页面展示案例

核心概念

什么是DOM？

DOM（文档对象模型）是HTML文档的编程接口。它将HTML文档表示为树形结构，每个节点都是一个对象，可以通过JavaScript进行操作。

// DOM树结构示例页面标题

Hello World

常用方法

getElementById() - 通过ID选择元素
getElementsByClassName() - 通过类名选择元素
getElementsByTagName() - 通过标签名选择元素
querySelector() - CSS选择器选择单个元素
querySelectorAll() - CSS选择器选择所有匹配元素

选择元素

演示区域

这是演示文本

项目1
项目2
项目3

基本选择器

结果显示

选择结果将显示在这里...

修改元素内容

修改方法

// 修改文本内容
element.textContent = '新文本';

// 修改HTML内容
element.innerHTML = '加粗文本';

// 修改属性
element.setAttribute('class', 'new-class');
element.classList.add('active');
element.classList.remove('old-class');

// 修改样式
element.style.color = 'red';
element.style.fontSize = '16px';
                        

实时演示

原始文本

原始HTML

创建和删除元素

创建元素

// 创建新元素
const newDiv = document.createElement('div');
newDiv.textContent = '新创建的元素';
newDiv.className = 'new-element';

// 添加到DOM
document.body.appendChild(newDiv);

// 插入到特定位置
const container = document.getElementById('container');
container.insertBefore(newDiv, container.firstChild);

// 设置属性
newDiv.setAttribute('data-id', '123');
                        

删除元素

// 删除元素
const element = document.getElementById('toDelete');
element.remove();

// 通过父元素删除
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);

// 清空元素内容
element.innerHTML = '';
                        

动态创建演示

动态列表

案例：小明的任务管理器

需求描述

小明需要一个简单的任务管理器，功能包括：

• 添加新的任务
• 标记任务完成状态
• 删除已完成任务
• 显示任务统计
• 本地存储任务数据

实现代码

class TaskManager { constructor(containerId) { this.container = document.getElementById(containerId); this.tasks = JSON.parse(localStorage.getItem('tasks')) || []; this.init(); } init() { this.render(); this.bindEvents(); } addTask(text) { const task = { id: Date.now(), text: text, completed: false, createdAt: new Date().toLocaleDateString() }; this.tasks.push(task); this.save(); this.render(); } toggleTask(id) { const task = this.tasks.find(t => t.id === id); if (task) { task.completed = !task.completed; this.save(); this.render(); } } deleteTask(id) { this.tasks = this.tasks.filter(t => t.id !== id); this.save(); this.render(); } save() { localStorage.setItem('tasks', JSON.stringify(this.tasks)); } render() { this.container.innerHTML = `

任务列表 (${this.tasks.length})

${task.text}

`; } } // 使用 const taskManager = new TaskManager('taskApp');

实际演示：任务管理器

我的任务

练习题（8个实战练习）

练习1：动态列表生成器

创建一个函数，根据输入数组动态生成列表项。

function createList(items, containerId) {
    const container = document.getElementById(containerId);
    const ul = document.createElement('ul');
    
    items.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        li.className = 'list-item';
        ul.appendChild(li);
    });
    
    container.appendChild(ul);
}

// 使用示例
const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
createList(fruits, 'fruitContainer');
                        

练习2：表格生成器

根据数据对象数组动态创建表格。

function createTable(data, containerId) {
    const container = document.getElementById(containerId);
    const table = document.createElement('table');
    table.className = 'data-table';
    
    // 创建表头
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    Object.keys(data[0]).forEach(key => {
        const th = document.createElement('th');
        th.textContent = key;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);
    
    // 创建表格内容
    const tbody = document.createElement('tbody');
    data.forEach(row => {
        const tr = document.createElement('tr');
        Object.values(row).forEach(value => {
            const td = document.createElement('td');
            td.textContent = value;
            tr.appendChild(td);
        });
        tbody.appendChild(tr);
    });
    
    table.appendChild(thead);
    table.appendChild(tbody);
    container.appendChild(table);
}
                        

练习3-5：元素操作

• 元素内容替换器
• 属性批量修改器
• 样式动态切换器

练习6-8：高级功能

• 拖拽元素重新排序
• 图片懒加载实现
• 无限滚动加载