获取dom元素的方法

获取 DOM 元素的方法有多种，常用的包括以下几种：

1. 通过元素的 ID 获取：
- `getElementById(id)`: 通过元素的 ID 属性获取指定的元素。

2. 通过元素的标签名获取一组元素：
- `getElementsByTagName(tagName)`: 通过元素的标签名获取一组元素。

3. 通过元素的类名获取一组元素：
- `getElementsByClassName(className)`: 通过元素的类名获取一组元素。

4. 通过 CSS 选择器获取匹配的第一个元素：
- `querySelector(selector)`: 通过 CSS 选择器获取匹配的第一个元素。

5. 通过 CSS 选择器获取匹配的所有元素：
- `querySelectorAll(selector)`: 通过 CSS 选择器获取匹配的所有元素。

这些方法都是在 `document` 对象上调用的，表示在整个文档中进行查找。其中，`getElementById` 是直接根据元素的 ID 属性进行查找，返回唯一一个匹配的元素。而其他方法都返回一组匹配的元素，可以遍历这个元素集合进行操作。

示例代码：

<div id="myDiv">
  <p class="myClass">Hello, World!</p>
  <p class="myClass">This is a paragraph.</p>
</div>

const myDiv = document.getElementById('myDiv');
console.log(myDiv); // 输出 <div id="myDiv">...</div>

const paragraphsByTagName = myDiv.getElementsByTagName('p');
console.log(paragraphsByTagName); // 输出 HTMLCollection [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>]

const paragraphsByClassName = myDiv.getElementsByClassName('myClass');
console.log(paragraphsByClassName); // 输出 HTMLCollection [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>]

const firstParagraphBySelector = myDiv.querySelector('p');
console.log(firstParagraphBySelector); // 输出 <p class="myClass">Hello, World!</p>

const allParagraphsBySelector = myDiv.querySelectorAll('p');
console.log(allParagraphsBySelector); // 输出 NodeList [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>]

通过上述代码，我们可以看到不同的方法如何获取 DOM 元素，并返回对应的结果。根据具体的需求，选择合适的方法来获取需要操作的元素。