获取 HTML 的 DOM 节点通常通过 JavaScript 中的多种方法来实现，如 document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()、document.querySelector() 和 document.querySelectorAll() 。document.getElementById() 是最为常用且高效的方式之一，它通过元素的ID属性获取特定的DOM节点。
一、使用 getElementById
document.getElementById() 方法接受一个字符串参数，该参数对应HTML元素中的id属性值。如果找到匹配的元素，此方法将返回该元素的引用；如果没有找到，返回null。由于id属性在一个HTML文档中应当是唯一的，这个方法会返回单一的元素而不是元素集合。
var element = document.getElementById('exampleId');
// 使用element变量来操作获取到的DOM节点
此方法非常快速，因为浏览器通常会对元素id建立索引，使得查找过程非常高效。
二、使用 getElementsByTagName
document.getElementsByTagName() 方法通过指定的HTML标签名获取一组元素，返回一个类数组对象（HTMLCollection）。例如，获取所有 <p> 标签的DOM节点：
var paragraphs = document.getElementsByTagName('p');
// 遍历paragraphs来访问每一个<p>元素
因为标签名不唯一，这个方法会返回文档中所有匹配标签名称的元素集合。
三、使用 getElementsByClassName
document.getElementsByClassName() 方法通过指定的class名获取一组元素，返回一个类数组对象（HTMLCollection）。类似于getElementsByTagName，但是它是基于CSS类名查找元素。
var items = document.getElementsByClassName('my-class');
// 遍历items以操作每一个class为'my-class'的元素
在多类名的情况下，传入的参数要完全匹配元素的class属性的完整字符串。
四、使用 querySelector
document.querySelector() 方法接收一个CSS选择器字符串作为参数，返回文档中匹配该选择器的第一个元素（Element）。如果没有找到匹配的元素，则返回null。
var firstItem = document.querySelector('.item');
// 对第一个class为'item'的元素进行操作
该方法提供了灵活的方式来获取DOM元素，可以使用复杂的CSS选择器，非常方便但比前面的方法慢。
五、使用 querySelectorAll
document.querySelectorAll() 方法同样接收一个CSS选择器字符串，返回所有匹配选择器的元素列表（NodeList对象），即使没有找到匹配的元素，它也会返回一个空的NodeList。
var allItems = document.querySelectorAll('.item');
// 遍历allItems来操作每个class为'item'的元素
尽管querySelectorAll为获取DOM元素提供了强大的选择功能，但要注意其返回的NodeList对象是静态的，不会随着文档的改变而更新。
六、遍历和操作节点
获取DOM节点后，可以对其进行操作，如更改样式、添加内容、监听事件等。使用前述任一方法获取多个元素时，可使用循环遍历节点列表。
例如，添加类名给所有class为'item'的元素：
var items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
items[i].classList.add('new-class');
}
七、性能考虑
在使用上述方法时，getElementById 由于其唯一性质通常有最好的性能，而querySelector 和 querySelectorAll 由于其灵活性可能稍慢，特别是在查询大型文档时。然而，这些性能差异通常在日常开发中不太明显，除非是在极大量DOM操作或高性能要求场景中。
总结
获取DOM节点是Web开发中的常见任务。选择适合场景的方法有助于提高代码的性能和效率。通过有效采用上述方法，开发者可以方便地操纵HTML文档结构，实现丰富的交互和动态功能。
相关问答FAQs：
1. JavaScript程序中如何查询HTML的DOM节点?
在JavaScript程序中，您可以使用不同的方法来获取HTML的DOM节点。其中一种常用的方法是使用document对象的相关方法，例如getElementById、getElementsByClassName、getElementsByTagName等。这些方法可以通过传入节点的ID、类名或标签名称来获取相应的DOM节点。
2. 如何使用JavaScript获取HTML的DOM节点属性和内容?
一旦您获取了HTML的DOM节点，您可以使用JavaScript访问和修改节点的属性和内容。例如，使用node.property或node.attribute来访问节点的属性，使用node.innerHTML或node.textContent来访问或修改节点的文本内容。此外，还可以使用node.setAttribute和node.removeAttribute来设置或删除特定的属性。
3. 如何使用JavaScript遍历和操作HTML的DOM节点树?
通过使用JavaScript，您可以遍历和操作整个HTML的DOM节点树。例如，可以使用parentNode来获取节点的父节点，使用childNodes或children来获取节点的子节点，使用nextSibling和previousSibling来获取节点的相邻节点，以及使用querySelector和querySelectorAll来选择并操作DOM节点树中的特定节点。此外，还可以使用JavaScript中的循环和条件语句来执行更复杂的DOM节点遍历和操作操作，以满足您的需求。
