在JavaScript中，获取HTML的DOM节点的方法有很多，通过ID获取、通过类名获取、通过标签名获取、通过CSS选择器获取、使用HTML5新增的选择器。其中，通过ID获取 是最常见且最直接的方法，通过document.getElementById('id')可以迅速获取页面中特定ID的元素。而对于动态内容和复杂选择需求，使用CSS选择器获取DOM节点，通过document.querySelector()和document.querySelectorAll()方法，可以更为灵活地定位需要的元素。
一、通过ID获取DOM节点
获取DOM节点最基本且高性能的方法是通过元素的ID：
let element = document.getElementById('elementId');
此方法返回带有指定ID的元素，因为ID在HTML文档中应该是唯一的，这种方法回传的是单个元素。这是一个快速访问元素的方法，尤其当你需要频繁操作该元素时。
二、通过类名获取DOM节点
若想通过类名来获取DOM节点，可以使用：
let elements = document.getElementsByClassName('className');
此方法返回一个HTMLCollection，包含文档中所有带有指定类名的元素。这个集合是实时的，即文档结构改变时，它也会相应更新。
三、通过标签名获取DOM节点
如果需要按标签名如<p>或<div>等来获取元素，可以使用：
let elements = document.getElementsByTagName('tagName');
这同样会返回一个包含所有指定标签名的元素的实时HTMLCollection。
四、通过CSS选择器获取DOM节点
对于更复杂的选择，可以使用CSS选择器：
let element = document.querySelector('.className');
let elements = document.querySelectorAll('.className');
其中，document.querySelector() 返回文档中匹配指定CSS选择器的第一个元素，而 document.querySelectorAll() 返回所有匹配选择器的元素集合，以NodeList对象的形式呈现。这两种方法非常强大，因为它们允许使用复杂的CSS选择器，如属性选择器、伪类选择器等。
五、使用HTML5新增选择器
HTML5提供了额外的选择器方法来访问DOM：
let element = document.querySelector('#elementId');
let elements = document.querySelectorAll('.className, .anotherClass');
querySelector 和 querySelectorAll 方法允许使用任何有效的CSS选择器，这使得它们极具灵活性和强大功能。
总结，JavaScript提供了多个方法来获取HTML DOM节点，从最简单的通过ID获取到更复杂、强大的CSS选择器方法。这些方法使得开发者能针对不同情境高效而灵活地操作DOM元素。选择合适的方法可以提升开发效率，改善用户体验，这对任何希望精通前端开发的人来说都是至关重要的技能。
相关问答FAQs：
如何使用 JavaScript 获取 HTML 的 DOM 节点？
JavaScript中获取HTML的DOM节点有多种方式，你可以通过getElementById、getElementsByClassName、getElementsByTagName等一系列方法来获取想要的节点。其中，getElementById通过指定元素的ID获取节点，getElementsByClassName通过指定类名获取节点，getElementsByTagName通过指定标签名获取节点。例如：使用getElementById方法获取ID为"myElement"的节点：var element = document.getElementById("myElement");。
如何在 JavaScript 中遍历 DOM 节点？
你可以使用JavaScript的循环结构来遍历DOM节点。例如，可以使用for循环来遍历某个节点的子节点，或者使用递归函数来遍历整个DOM树。在遍历每个节点时，你可以根据需要进行相应的操作。例如，通过访问节点的属性或调用节点的方法来获取或修改节点的内容。遍历DOM节点的方法有很多种，可以根据具体的需求选择合适的方法进行操作。
如何在 JavaScript 中修改 DOM 节点的内容？
要修改DOM节点的内容，可以使用innerHTML属性来设置节点的HTML内容，或者使用textContent属性来设置节点的文本内容。通过innerHTML属性，你可以插入HTML标记，从而实现更复杂的内容修改。例如，将某个节点的内容替换为新的内容，可以使用如下代码：document.getElementById("myElement").innerHTML = "新的内容"；如果只需要修改文本内容，可以使用textContent属性：document.getElementById("myElement").textContent = "新的文本"。这样就可以通过JavaScript来动态修改HTML的内容。
