文档对象模型 (DOM) 是 Web 开发的一个重要概念。它作为一个编程接口，允许开发人员与网页进行交互并修改网页的结构、样式和内容。当浏览器加载网页时，HTML 文档会转换为 DOM，这是一种树状结构，其中每个节点代表一个元素、属性或文本。这种结构使开发人员能够动态访问和操作页面的各个部分，从而使 Web 体验更具交互性和吸引力。
对于初学者和不熟悉 DOM 的人，可以将其视为房屋的蓝图。就像您可以重新布置房屋中的家具或粉刷墙壁一样，DOM 可以让您在加载网页后更改网页的内容和样式。
在操作 DOM 之前，您需要选择要使用的元素。 JavaScript 提供了多种选择元素的方法，允许您与网页的不同部分进行交互。以下是一些常用的方法：
getElementById 方法是选择单个元素最直接的方法之一。它返回与指定 ID 匹配的元素。
// Selecting an element by ID
const heading = document.getElementById('heading');
在此示例中，标题现在将引用具有标题 ID 的元素。您可以使用此引用来进一步操作该元素。
要选择具有相同类的多个元素，可以使用 getElementsByClassName 方法。此方法返回元素的实时 HTMLCollection。
// Selecting elements by class name
const items = document.getElementsByClassName('item');
items 变量现在将保存类名为 item 的所有元素的集合。当您需要对多个元素应用相同的操作时，此方法特别有用。
querySelector 和 querySelectorAll 方法允许您使用 CSS 选择器选择元素。这些方法用途广泛，可用于通过标签名称、类、ID 或任何其他有效的 CSS 选择器来定位元素。
// Selecting a single element using a CSS selector
const button = document.querySelector('button');
// Selecting multiple elements using a CSS selector
const listItems = document.querySelectorAll('li');
querySelector 选择第一个与选择器匹配的元素，而 querySelectorAll 选择所有匹配的元素并返回一个 NodeList，类似于数组。
选择一个元素后，您可以操作它来更改其内容、属性和样式。这允许您创建响应用户交互或其他事件的动态网页。
textContent 属性允许您更改元素内的文本。这对于根据用户输入或其他条件动态更新内容非常有用。
// Changing text content heading.textContent = 'Hello, World!';
在此示例中，标题引用的元素内的文本将更新为“Hello, World!”。
setAttribute 方法允许您修改元素的属性，例如 src、href、alt 或禁用。
// Changing an attribute
button.setAttribute('disabled', true);
这里，通过将disabled属性设置为true来禁用该按钮。这可用于阻止用户交互，直到满足特定条件。
style 属性允许您修改元素的内联 CSS 样式。您可以更改颜色、背景颜色、字体大小等属性。
// Changing styles heading.style.color = 'blue';
在此示例中，标题元素内的文本颜色更改为蓝色。
除了修改现有元素之外，您还可以创建新元素并将其添加到 DOM，或删除不再需要的元素。
您可以使用 createElement 方法创建一个新元素。创建后，您可以设置其属性并将其附加到 DOM 中的现有元素。
// Creating a new element
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
document.body.appendChild(newElement);
在此示例中，一个新的
创建元素，设置其文本内容，并将其添加到
的末尾。元素。要从 DOM 中删除元素，可以使用remove方法。这对于动态管理页面上的内容特别有用。
// Removing an element
const oldElement = document.getElementById('old-element');
oldElement.remove();
这里，ID 为 old-element 的元素将从 DOM 中删除，从而有效地将其从网页中删除。
要了解这些概念的实际应用，让我们构建一个简单的待办事项列表应用程序。此示例将演示如何在现实场景中选择和操作 DOM 元素。
First, let's create the HTML structure for our To-Do List.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-Do List</title> </head> <body> <h1 id="heading">To-Do List</h1> <ul id="todo-list"></ul> <input type="text" id="new-todo" placeholder="New to-do"> <button id="add-todo">Add To-Do</button> </body> </html>
In this structure:
Next, we'll add some JavaScript to make the To-Do List interactive.
<script>
// Selecting elements
const todoList = document.getElementById('todo-list');
const newTodoInput = document.getElementById('new-todo');
const addTodoButton = document.getElementById('add-todo');
// Adding a new to-do item
addTodoButton.addEventListener('click', () => {
const newTodoText = newTodoInput.value;
if (newTodoText === '') return; // Prevent adding empty to-do items
// Create a new list item
const newTodoItem = document.createElement('li');
newTodoItem.textContent = newTodoText;
// Append the new item to the list
todoList.appendChild(newTodoItem);
// Clear the input field
newTodoInput.value = '';
});
</script>
This simple application demonstrates the power of DOM manipulation in creating interactive and dynamic web pages.
DOM manipulation is a fundamental skill for any web developer. By understanding how to select and manipulate DOM elements, you can create web pages that are not only static but also responsive to user interactions. The examples provided in this article serve as a foundation for more advanced topics, such as event handling, animations, and dynamic content loading.
By practicing these techniques and applying them to real-world scenarios, you'll gain a deeper understanding of how the web works and be well on your way to mastering front-end development.
以上是DOM 操作：选择和操作 DOM 元素的详细内容。更多信息请关注PHP中文网其他相关文章！
