获取HTML DOM节点元素的方法的总结

获取HTML DOM节点元素的方法有很多，常见的有通过ID、class、标签名称、属性等方式来获取节点。下面，我们来总结一下。

通过ID获取节点

通过ID获取节点是最常见的一种方式，我们可以使用getElementById()方法，该方法接收一个参数——需要获取的节点的ID，返回值为对应的节点对象，如果获取不到则返回null。示例代码如下：

<!-- HTML代码片段 -->
<div id="myDiv">这是一个div元素</div>

// JavaScript代码片段
var divElement = document.getElementById("myDiv");
console.log(divElement.innerHTML);
// 输出：这是一个div元素

通过Class获取节点

通过Class获取节点也是非常常见的一种方式，我们可以使用getElementsByClassName()方法，该方法接收一个参数——需要获取的节点的 class 名称，返回值为对应的节点列表，如果获取不到则返回空数组。需要注意的是，该方法返回的是一个节点列表，如果我们知道这个 class 名称只对应一个节点，则我们可以取下标为0的节点。示例代码如下：

<!-- HTML代码片段 -->
<div class="myDiv">这是一个div元素</div>

// JavaScript代码片段
var divElement = document.getElementsByClassName("myDiv")[0];
console.log(divElement.innerHTML);
// 输出：这是一个div元素

通过标签名称获取节点

通过标签名称获取节点也非常常见，我们可以使用getElementsByTagName()方法，该方法接收一个参数——需要获取的节点的标签名称，返回值为对应的节点列表，如果获取不到则返回空数组。需要注意的是，如果我们知道这个标签名称只对应一个节点，则我们可以取下标为0的节点。示例代码如下：

<!-- HTML代码片段 -->
<div id="myDiv">
   <p>这是一个p元素</p>
</div>

// JavaScript代码片段
var pElement = document.getElementsByTagName("p")[0];
console.log(pElement.innerHTML);
// 输出：这是一个p元素

通过属性获取节点

如果没有找到合适的方式获取节点，我们可以尝试使用一些属性来获取节点。比较常见的属性有name、type、title等，我们可以使用querySelectorAll()方法，该方法接收一个参数——需要获取的节点的属性值，返回值为对应的节点列表，如果获取不到则返回空数组。需要注意的是，该方法返回的是一个节点列表，如果我们知道只对应一个节点，则我们可以取下标为0的节点。示例代码如下：

<!-- HTML代码片段 -->
<input type="text" name="username" value="张三">

// JavaScript代码片段
var inputElement = document.querySelectorAll("input[name='username']")[0];
console.log(inputElement.value);
// 输出：张三

综上所述，获取HTML DOM节点元素的方法是通过ID、class、标签名称、属性等方式来获取节点，可以根据不同的需求选择不同的方法。