DOM 基础操作：掌控网页元素，随心所欲修改网页内容

DOM 基础操作：掌控网页元素，随心所欲修改网页内容

在网页开发中，DOM（文档对象模型）是一个非常重要的概念。它允许我们通过编程来访问和操作网页中的元素，从而实现各种交互效果。

什么是 DOM？

DOM 是一个树状结构，它代表了网页的结构。每个节点都对应着网页中的一个元素，例如 <div>、<p>、<a> 等。我们可以通过 DOM 来访问和操作这些元素，从而实现各种交互效果。

如何使用 DOM？

为了使用 DOM，我们需要先获取到 DOM 的根节点。在 JavaScript 中，根节点是 document 对象。我们可以通过 document 对象来访问和操作网页中的所有元素。

const rootNode = document.documentElement;
console.log(rootNode);

DOM 的常用操作

1. 获取元素

我们可以通过各种方法来获取 DOM 元素。最常用的方法是 getElementById() 和 getElementsByTagName()。

• getElementById() 可以通过元素的 id 属性来获取元素。例如：

const element = document.getElementById('my-element');
console.log(element);

• getElementsByTagName() 可以通过元素的标签名来获取元素。例如：

const elements = document.getElementsByTagName('p');
console.log(elements);

2. 修改元素

我们可以通过各种方法来修改 DOM 元素。最常用的方法是 innerHTML 和 innerText。

• innerHTML 可以修改元素的 HTML 代码。例如：

element.innerHTML = '<p>Hello World!</p>';

• innerText 可以修改元素的文本内容。例如：

element.innerText = 'Hello World!';

3. 添加和删除元素

我们可以通过 appendChild() 和 removeChild() 方法来添加和删除 DOM 元素。

• appendChild() 可以将一个元素添加到另一个元素的末尾。例如：

const parentElement = document.getElementById('parent-element');
const childElement = document.createElement('p');
childElement.innerText = 'Hello World!';

parentElement.appendChild(childElement);

• removeChild() 可以将一个元素从另一个元素中删除。例如：

const parentElement = document.getElementById('parent-element');
const childElement = document.getElementById('child-element');

parentElement.removeChild(childElement);

4. 事件处理

我们可以通过 addEventListener() 方法来给 DOM 元素添加事件监听器。当事件发生时，事件监听器就会被触发。例如：

const button = document.getElementById('my-button');

button.addEventListener('click', () => {
  alert('Button clicked!');
});

总结

DOM 是一个非常强大的工具，它允许我们通过编程来访问和操作网页中的元素，从而实现各种交互效果。通过学习 DOM 的基础操作，我们可以开发出更加丰富和交互性更强的网页。