DOM基础资料详解：入门级教程

本文介绍了DOM（文档对象模型）的基本概念和重要性，解释了DOM如何通过JavaScript等脚本语言实现对网页元素的动态访问和修改。文章详细讲述了DOM元素的选择、修改、创建和删除方法，并提供了多个示例代码来展示实际操作。

DOM简介

DOM（文档对象模型）是一种平台无关、语言无关的接口，能够访问和操作HTML和XML文档。DOM将整个文档视为一个对象，而对象的每一个部分（如元素、属性、文本等）都可以通过代码进行访问和修改。DOM的主要作用在于提供了一种标准的方法来访问和操作HTML文档，并且可以用于任何浏览器或平台。

DOM的重要性在于它使得网页不仅是静态的，还可以动态地进行修改和更新。开发人员可以通过JavaScript等脚本语言，利用DOM来实现丰富的交互效果。例如，可以通过DOM改变页面上的元素内容、样式和属性，或者响应用户的事件。这些功能使得网页更加动态化，增强了用户体验。

DOM元素的选择与访问

使用ID选择元素

使用ID选择元素是最直接的方式之一。通过元素的ID属性，可以唯一地选择一个元素。这种方法的好处在于ID在HTML文档中必须是唯一的，因此选择的结果总是唯一的。下面是一个使用JavaScript通过ID选择元素的例子。

// HTML代码片段
<div id="myDiv">Hello, World!</div>

// JavaScript代码片段
var element = document.getElementById('myDiv');
console.log(element.innerHTML);  // 输出 "Hello, World!"

在上述代码中，document.getElementById 方法通过传入元素的ID来获取该元素。这里，我们获取了ID为 "myDiv" 的元素，并通过 innerHTML 获取其内部内容，输出为 "Hello, World!"。

使用类名选择元素

类名选择可以用于选择所有具有特定类名的元素。这在处理多个元素时非常有用，因为一个类名可以被应用于多个元素。使用 document.getElementsByClassName 方法可以获取具有特定类名的所有元素。注意，返回的结果是一个HTMLCollection，这是个动态集合，能够反映DOM的变化。

// HTML代码片段
<div class="myClass">Element 1</div>
<div class="myClass">Element 2</div>
<div class="myClass">Element 3</div>

// JavaScript代码片段
var elements = document.getElementsByClassName('myClass');
for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerHTML);
}

在这个例子中，我们通过 document.getElementsByClassName 方法获取了所有具有类名 "myClass" 的元素，并使用循环遍历这些元素，输出它们的内容。结果依次为 "Element 1"、"Element 2" 和 "Element 3"。

使用标签名选择元素

标签名选择可以用来选择文档中所有指定标签名的元素。如果要选择所有的 <div> 元素，可以使用 document.getElementsByTagName 方法。这种方法适用于需要根据标签名选择大量同类型元素的场景。

// HTML代码片段
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>

// JavaScript代码片段
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerHTML);
}

在这个示例中，document.getElementsByTagName 方法返回一个HTMLCollection，包含了所有 <div> 元素。我们遍历这些元素并输出它们的内部内容，结果依次为 "Div 1"、"Div 2" 和 "Div 3"。

DOM元素的修改

修改元素内容

修改元素内容通常通过改变 innerHTML 或 textContent 属性来实现。innerHTML 属性允许插入整个HTML片段，而 textContent 只能设置纯文本内容。下面是使用 innerHTML 和 textContent 的示例。

// HTML代码片段
<p id="content">Hello, World!</p>

// JavaScript代码片段
var element = document.getElementById('content');
element.innerHTML = '<b>New Content</b>';  // 改为HTML
console.log(element.innerHTML);  // 输出 "<b>New Content</b>"

element.textContent = 'Hello, Again!';  // 改为纯文本
console.log(element.textContent);  // 输出 "Hello, Again!"

这个示例中展示了如何使用 innerHTML 将元素内容替换为包含HTML标签的字符串，以及使用 textContent 将元素内容替换为纯文本。

修改元素属性

元素属性可以通过访问元素对象的属性来修改。例如，可以通过 setAttribute 和 removeAttribute 方法，添加或移除属性。

// HTML代码片段
<a id="myLink" href="example.com">Example Link</a>

// JavaScript代码片段
var link = document.getElementById('myLink');
link.setAttribute('href', 'newUrl.com');  // 设置href属性
console.log(link.getAttribute('href'));  // 输出 "newUrl.com"

link.removeAttribute('href');  // 移除href属性
console.log(link.hasAttribute('href'));  // 输出 false

这段代码展示了如何使用 setAttribute 方法设置元素的 href 属性，并通过 getAttribute 方法获取该属性值。同时演示了如何通过 removeAttribute 方法移除属性，并通过 hasAttribute 方法检查属性是否存在。

修改元素样式

元素的CSS样式可以通过修改元素的 style 属性来实现。以下是一个修改背景颜色、高度和宽度的例子。

// HTML代码片段
<div id="myDiv" style="background-color: white;"></div>

// JavaScript代码片段
var element = document.getElementById('myDiv');
element.style.backgroundColor = 'red';  // 修改背景颜色
element.style.height = '100px';  // 修改高度
element.style.width = '200px';  // 修改宽度

console.log(element.style.backgroundColor);  // 输出 "red"
console.log(element.style.height);  // 输出 "100px"
console.log(element.style.width);  // 输出 "200px"

在此示例中，我们使用 style 对象修改了 myDiv 元素的背景颜色、高度和宽度，并通过 console 输出来确认修改成功。

DOM元素的创建与删除

创建新的DOM元素

创建新的DOM元素可以使用 document.createElement 方法。创建后，可以通过 appendChild 或 insertBefore 方法将其添加到文档中。

// JavaScript代码片段
var newDiv = document.createElement('div');
newDiv.innerHTML = 'This is a new element';

var parentElement = document.getElementById('parentElement');
parentElement.appendChild(newDiv);

console.log(parentElement.innerHTML);

这段代码展示了如何创建一个新的 <div> 元素，并将其内容设置为 "This is a new element"。然后通过 appendChild 方法将新元素添加到 parentElement 下，最后通过 console 输出来确认新元素已被添加。

删除DOM元素

删除DOM元素可以通过 removeChild 方法实现。首先需要找到要删除的元素及其父元素，然后使用 removeChild 方法将其移除。

// HTML代码片段
<div id="parentElement">
    <div id="toBeRemoved">Remove this element</div>
</div>

// JavaScript代码片段
var toBeRemovedElement = document.getElementById('toBeRemoved');
var parentElement = document.getElementById('parentElement');
parentElement.removeChild(toBeRemovedElement);

console.log(parentElement.innerHTML);

在这个例子中，我们首先通过 getElementById 获取要删除的元素及其父元素，然后使用 removeChild 方法将其从文档中移除，并通过 console 输出来确认该元素已被删除。

DOM事件处理

添加事件监听器

添加事件监听器可以使用 addEventListener 方法，该方法允许为元素指定一个或多个事件处理器。下面是一个添加点击事件处理器的例子。

// HTML代码片段
<button id="myButton">Click Me</button>

// JavaScript代码片段
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

button.click();  // 触发事件，模拟点击

在这个示例中，我们定义了一个点击事件处理器，当用户点击按钮时，会在 console 中输出 "Button clicked!"。我们还通过 button.click() 方法模拟了点击事件来展示效果。

移除事件监听器

移除事件监听器可以使用 removeEventListener 方法。需要传入相同的参数，包括事件类型和事件处理器函数。

// HTML代码片段
<button id="myButton">Click Me</button>

// JavaScript代码片段
var button = document.getElementById('myButton');
var eventHandler = function() {
    console.log('Button clicked!');
};

button.addEventListener('click', eventHandler);

// 移除事件监听器
button.removeEventListener('click', eventHandler);

button.click();  // 尝试触发事件，但不会输出任何内容

在这个例子中，我们首先添加了一个点击事件处理器到按钮上。然后通过 removeEventListener 方法移除了该事件处理器。最后，我们尝试通过 button.click() 模拟点击事件，但由于事件处理器已被移除，因此 console 不会输出任何内容。

常见DOM操作示例

实际案例讲解

假设我们有一个简单的在线购物车应用，用户可以添加商品到购物车中。通过DOM操作，我们可以动态地更新购物车列表，添加或移除商品。

<!-- HTML代码片段 -->
<div id="cart">
    <ul id="cartItems">
        <li id="item1">Item 1</li>
        <li id="item2">Item 2</li>
    </ul>
</div>
<button id="addItem">Add Item</button>
<button id="removeItem">Remove Item</button>

// JavaScript代码片段
var addItemButton = document.getElementById('addItem');
var removeItemButton = document.getElementById('removeItem');
var cartItems = document.getElementById('cartItems');

addItemButton.addEventListener('click', function() {
    var newItem = document.createElement('li');
    newItem.innerHTML = 'Item ' + (cartItems.children.length + 1);
    cartItems.appendChild(newItem);
});

removeItemButton.addEventListener('click', function() {
    if (cartItems.children.length > 0) {
        cartItems.removeChild(cartItems.lastChild);
    }
});

在这个示例中，我们定义了两个按钮，一个用于添加商品到购物车，另一个用于移除商品。当用户点击 "Add Item" 按钮时，会创建一个新的 <li> 元素并添加到购物车列表中，显示为 "Item 3"、"Item 4" 等。当用户点击 "Remove Item" 按钮时，会移除购物车列表中的最后一个项目，从而达到动态更新的效果。

练习题与解答

练习题：

1. 请编写一段JavaScript代码，实现一个简单的计数器功能，点击按钮可以增加计数器的值。

解答：

<!DOCTYPE html>
<html>
<head>
    <title>Counter Example</title>
</head>
<body>
    <h1 id="counter">Counter: 0</h1>
    <button id="increaseCounter">Increase Counter</button>

    <script>
        var counterElement = document.getElementById('counter');
        var counterValue = 0;

        document.getElementById('increaseCounter').addEventListener('click', function() {
            counterValue++;
            counterElement.innerHTML = 'Counter: ' + counterValue;
        });
    </script>
</body>
</html>

在这个示例中，我们定义了一个计数器，初始值为0，每次点击 "Increase Counter" 按钮时，计数器的值会增加1，并更新显示在页面上。

练习题：

1. 请编写一段JavaScript代码，实现一个简单的倒计时功能，页面加载时开始倒计时，每次页面刷新时从10秒开始重新计时。

解答：

<!DOCTYPE html>
<html>
<head>
    <title>Countdown Example</title>
</head>
<body>
    <h1 id="countdown">10</h1>

    <script>
        var countdownElement = document.getElementById('countdown');
        var countdownValue = 10;

        function startCountdown() {
            countdownValue--;
            countdownElement.innerHTML = countdownValue;

            if (countdownValue > 0) {
                setTimeout(startCountdown, 1000);
            } else {
                countdownElement.innerHTML = "Countdown finished!";
            }
        }

        setTimeout(startCountdown, 1000);
    </script>
</body>
</html>

在此示例中，我们定义了一个倒计时功能，初始值为10秒。每次页面加载时，倒计时从10开始，每秒减少1，并实时更新显示在页面上。当倒计时结束时，页面会显示 "Countdown finished!"。