DOM Node 学习笔记

什么是 DOM Node？

DOM (Document Object Model) 是一种基于文档的对象模型，它将文档中的每个部分都看作是一个节点（Node），并且定义了这些节点的层次关系。

在 DOM 中，每个节点都有一个 nodeType 属性来表示它的类型，常见的有元素节点、文本节点、注释节点等。其中，元素节点比较特殊，因为它们可以包含其他节点，如文本节点等，而且它们还有 tagName 属性来表示自己的标签名。

如何获取 DOM Node？

在 JavaScript 中，我们可以通过各种方式来获取 DOM Node，如下所示：

getElementById：根据元素的 id 属性获取元素节点。
getElementsByTagName：根据元素的标签名获取元素节点。
getElementsByClassName：根据元素的 class 属性获取元素节点。
querySelector：使用 CSS 选择器获取匹配的第一个元素。
querySelectorAll：使用 CSS 选择器获取匹配的所有元素。

如何操作 DOM Node？

既然已经获取到了 DOM Node，那么我们就可以进行一些操作了。下面是一些常见的操作：

获取和设置节点的文本内容：

javascriptCopy Code
var ele = document.getElementById('myDiv');
console.log(ele.innerText); // 获取节点的文本内容
ele.innerText = 'new content'; // 设置节点的文本内容

获取和设置节点的属性：

javascriptCopy Code
var ele = document.getElementById('myDiv');
console.log(ele.getAttribute('data-name')); // 获取节点的属性值
ele.setAttribute('data-name', 'new value'); // 设置节点的属性值

添加和删除节点：

javascriptCopy Code
var parent = document.getElementById('parent');
var child = document.createElement('div'); // 创建新节点
parent.appendChild(child); // 添加子节点
parent.removeChild(child); // 删除子节点

实例演示

下面是一个实例，演示如何获取并修改一个元素节点的文本内容和 class 属性：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <title>DOM Node 学习笔记</title>
</head>
<body>
  <div id="myDiv" class="old-class">Hello world!</div>
  <script>
    var ele = document.getElementById('myDiv');
    console.log(ele.innerText); // 获取节点的文本内容
    console.log(ele.getAttribute('class')); // 获取节点的 class 属性值

    ele.innerText = 'new content'; // 设置节点的文本内容
    ele.setAttribute('class', 'new-class'); // 设置节点的 class 属性值
  </script>
</body>
</html>

在上面的实例中，我们首先通过 getElementById 方法获取到了 id 为 myDiv 的元素节点，并分别使用 innerText 和 getAttribute 方法获取了节点的文本内容和 class 属性值。然后，我们分别使用 innerText 和 setAttribute 方法修改了节点的文本内容和 class 属性值。