DOM 节点学习笔记

什么是DOM？

DOM（Document Object Model）是一种Web API，它将HTML文档视为一个树形结构，其中每个元素都是一个节点。通过DOM，我们可以使用JavaScript来访问、添加、删除或修改页面中的元素和属性。

节点的类型

在DOM树中，有不同类型的节点。以下是其中的一些：

元素节点（Element nodes）：表示HTML元素，如<p>、<div>等。
文本节点（Text nodes）：表示HTML元素中的文本。
属性节点（Attribute nodes）：表示HTML元素的属性，如class、id等。

如何访问节点

我们可以使用JavaScript来访问DOM节点。以下是几个常见的方法：

1. 通过ID访问元素

可以使用document.getElementById()方法获取具有特定ID的元素，例如：

javascriptCopy Code
const element = document.getElementById('my-element');

2. 通过标签名访问元素

可以使用document.getElementsByTagName()方法获取所有具有指定标签名的元素，例如：

javascriptCopy Code
const elements = document.getElementsByTagName('p');

3. 通过类名访问元素

可以使用document.getElementsByClassName()方法获取所有具有指定类名的元素，例如：

javascriptCopy Code
const elements = document.getElementsByClassName('my-class');

如何操作节点

我们可以使用JavaScript来添加、删除或修改DOM节点。以下是几个常见的方法：

1. 添加元素

可以使用document.createElement()方法创建新元素，然后使用parent.appendChild()将其添加到父节点中，例如：

javascriptCopy Code
const parent = document.getElementById('my-parent-element');
const newElement = document.createElement('p');
newElement.textContent = 'Hello, world!';
parent.appendChild(newElement);

2. 修改元素

可以使用element.textContent属性来修改元素的文本内容，或使用element.setAttribute()方法来修改元素的属性，例如：

javascriptCopy Code
const element = document.getElementById('my-element');

// 修改文本内容
element.textContent = 'Hello, world!';

// 修改属性
element.setAttribute('class', 'new-class');

3. 删除元素

可以使用parent.removeChild()方法删除一个子元素，例如：

javascriptCopy Code
const parent = document.getElementById('my-parent-element');
const child = document.getElementById('my-child-element');
parent.removeChild(child);

实例

以下是一个简单的实例，它演示了如何使用DOM来创建一个新元素、将其添加到页面中，并为其添加一些样式：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <style>
      .my-class {
        color: red;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <div id="my-parent-element"></div>

    <script>
      // 创建新元素
      const parent = document.getElementById('my-parent-element');
      const newElement = document.createElement('p');
      newElement.textContent = 'Hello, world!';
      newElement.setAttribute('class', 'my-class');

      // 将新元素添加到父元素中
      parent.appendChild(newElement);
    </script>
  </body>
</html>