详解JS获取HTML DOM元素的8种方法

在前端开发中，我们经常需要通过JavaScript来操作HTML DOM元素，下面将详细讲解8种JS获取HTML DOM元素的方法。

1. 通过id获取元素

HTML元素可以设置id属性，通过document.getElementById()方法获取该元素对象。示例如下：

let myElement = document.getElementById("myId");

2. 通过标签名获取元素

可以通过document.getElementsByTagName()方法获取特定标签名的所有元素，并通过索引获取特定的元素。示例如下：

let myElements = document.getElementsByTagName("p");
let myElement = myElements[0];

3. 通过类名获取元素

可以通过document.getElementsByClassName()方法获取特定类名的所有元素，并通过索引获取特定的元素。示例如下：

let myElements = document.getElementsByClassName("myClass");
let myElement = myElements[0];

4. 通过选择器获取元素

可以通过document.querySelector()方法获取选择器匹配的第一个元素，也可以通过document.querySelectorAll()方法获取所有匹配的元素。示例如下：

let myElement = document.querySelector("#myId");
let myElements = document.querySelectorAll(".myClass");

5. 通过元素名称获取父元素

可以通过父元素的document.parentNode属性获取。示例如下：

let myElement = document.getElementById("myId");
let myParentElement = myElement.parentNode;

6. 通过元素名称获取子元素

可以通过元素对象的childNodes属性获取全部子元素对象。示例如下：

let myElement = document.getElementById("myId");
let myChildElements = myElement.childNodes;

7. 通过元素名称获取下一个兄弟元素

可以通过元素对象的nextSibling属性获取下一个兄弟元素对象。示例如下：

let myElement = document.getElementById("myId");
let myNextSiblingElement = myElement.nextSibling;

8. 通过元素名称获取上一个兄弟元素

可以通过元素对象的previousSibling属性获取上一个兄弟元素对象。示例如下：

let myElement = document.getElementById("myId");
let myPreviousSiblingElement = myElement.previousSibling;

以上是详细讲解JS获取HTML DOM元素的8种方法，可以根据需求来选择具体的获取方式。例如，如果要获取页面中的第一个p标签元素，可以使用第二种方式：通过标签名获取元素。

<p id="myParagraph">Hello World</p>

let myElement = document.getElementsByTagName("p")[0];
console.log(myElement.innerText); // 输出 "Hello World"

再比如，如果要获取页面中id为myDiv的元素的下一个兄弟元素，可以使用第七种方式：通过元素名称获取下一个兄弟元素。

<div>
  <div id="myDiv"></div>
  <p>下一个元素</p>
</div>

let myElement = document.getElementById("myDiv");
let myNextSiblingElement = myElement.nextSibling;
console.log(myNextSiblingElement.innerText); // 输出 "下一个元素"