HTML DOM（文档对象模型）是HTML文档的编程接口，它允许开发者通过JavaScript来操作HTML文档的元素。通过掌握HTML DOM，可以轻松实现动态内容加载与交互，从而提升网页的用户体验。本文将详细介绍HTML DOM的基本概念、操作方法以及动态内容加载与交互的实践案例。
一、HTML DOM的基本概念
HTML DOM将HTML文档视为一个树形结构，每个节点都是一个对象。这些对象包括元素节点、文本节点、属性节点等。通过操作这些节点，可以实现对网页元素的增删改查。
1. 节点类型
元素节点：代表HTML元素，如
等。
文本节点：代表元素中的文本内容。
属性节点：代表元素的属性，如
class
、
id
等。
2. 节点关系
父节点：当前节点的父级节点。
子节点：当前节点的子级节点。
兄弟节点：与当前节点同级的节点。
二、HTML DOM操作方法
1. 获取元素
getElementById()
：通过ID获取元素。
getElementsByClassName()
：通过类名获取元素。
getElementsByTagName()
：通过标签名获取元素。
querySelector()
：通过CSS选择器获取元素。
querySelectorAll()
：通过CSS选择器获取所有匹配的元素。
2. 创建元素
document.createElement()
：创建一个新的元素节点。
3. 插入元素
appendChild()
：将元素添加到指定父元素的末尾。
insertBefore()
：将元素插入到指定父元素的指定子元素之前。
4. 删除元素
removeChild()
：删除指定父元素中的子元素。
5. 修改元素
setAttribute()
：修改元素的属性。
innerText
：获取或设置元素的文本内容。
innerHTML
：获取或设置元素的内容（包括文本和子元素）。
三、动态内容加载与交互实践案例
1. 动态加载图片
function loadImages() {
var images = [
‘image1.jpg’,
‘image2.jpg’,
‘image3.jpg’
];
var imageContainer = document.getElementById(‘image-container’);
for (var i = 0; i < images.length; i++) {
var img = document.createElement('img');
img.src = images[i];
imageContainer.appendChild(img);
}
}
2. 动态创建表格
function createTable() {
var table = document.createElement('table');
var header = document.createElement('tr');
var headerCells = ['Name', 'Age', 'City'];
for (var i = 0; i < headerCells.length; i++) {
var th = document.createElement('th');
th.innerText = headerCells[i];
header.appendChild(th);
}
table.appendChild(header);
var data = [
['Alice', 25, 'New York'],
['Bob', 30, 'London'],
['Charlie', 35, 'Paris']
];
for (var i = 0; i < data.length; i++) {
var row = document.createElement('tr');
for (var j = 0; j < data[i].length; j++) {
var td = document.createElement('td');
td.innerText = data[i][j];
row.appendChild(td);
}
table.appendChild(row);
}
document.body.appendChild(table);
}
3. 实现点击按钮切换内容
function toggleContent() {
var content = document.getElementById('content');
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
}
通过以上案例，可以看出HTML DOM在实现动态内容加载与交互方面的强大功能。掌握HTML DOM，可以帮助开发者轻松实现各种动态效果，提升网页的用户体验。