DOM 获取节点学习笔记

DOM (Document Object Model) 是浏览器中的文档对象模型，通过 DOM 可以方便地对 HTML 或 XML 文档进行操作。在 DOM 中，每个 HTML 标签都可以看作是一个节点，而获取节点就是在 DOM 中查找这些节点的过程。

获取单个节点

获取单个节点有以下几种方法：

1. getElementById()

该方法通过元素的 id 属性查找元素节点，并返回该节点对象。示例代码如下：

jsCopy Code
var elem = document.getElementById("myElement");

2. querySelector()

该方法通过 CSS 选择器查找元素节点，并返回第一个匹配的节点对象。示例代码如下：

jsCopy Code
var elem = document.querySelector("#myDiv .myClass");

3. getElementsByTagName()

该方法通过元素的标签名查找元素节点，并返回一个 NodeList 对象，其中包含了所有匹配的节点对象。示例代码如下：

jsCopy Code
var elems = document.getElementsByTagName("p");
var firstElem = elems[0];

4. getElementsByClassName()

该方法通过元素的 class 名称查找元素节点，并返回一个 NodeList 对象，其中包含了所有匹配的节点对象。示例代码如下：

jsCopy Code
var elems = document.getElementsByClassName("myClass");
var firstElem = elems[0];

获取多个节点

获取多个节点有以下两种方法：

1. getElementsByTagName()

该方法通过元素的标签名查找所有匹配的元素节点，并返回一个 NodeList 对象。示例代码如下：

jsCopy Code
var elems = document.getElementsByTagName("p");

2. getElementsByClassName()

该方法通过元素的 class 名称查找所有匹配的元素节点，并返回一个 NodeList 对象。示例代码如下：

jsCopy Code
var elems = document.getElementsByClassName("myClass");

以上是 DOM 获取节点的基本方法，需要注意的是，NodeList 对象可以通过 for 循环进行遍历，并且通过索引访问其中的元素节点。