JavaScript代码获取HTML元素的常用方法包括：document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()、以及document.querySelector()和document.querySelectorAll()。这些方法让开发者能够根据元素的ID、标签名称、类名或CSS选择器来选取页面中的DOM元素。其中document.getElementById()通常用于获取唯一的元素，因为每个ID应当在HTML文档中是独一无二的。
一、使用DOCUMENT.GETELEMENTBYID()
document.getElementById() 是最简单和最常用的方式来获取一个 HTML 元素。正如函数名所暗示的，它通过元素的ID来选择元素。例如，如果你的HTML有一个元素 <div id="myDiv"></div>，那么在JavaScript中你可以通过以下代码获取这个元素：
var myDiv = document.getElementById('myDiv');
一旦获取了这个元素，你可以使用它来读取或修改属性、改变样式或绑定事件处理程序。
二、使用DOCUMENT.GETELEMENTSBYTAGNAME()
document.getElementsByTagName() 方法返回一个包含所有指定标签名的元素的HTMLCollection。例如，取得所有的<p>元素：
var paragraphs = document.getElementsByTagName('p');
通过这个方法拿到的HTMLCollection是一个类数组对象，你可以通过遍历或使用索引来访问集合中的元素。
三、使用DOCUMENT.GETELEMENTSBYCLASSNAME()
类似于getElementsByTagName()，document.getElementsByClassName() 返回一个包含所有指定类名的元素的HTMLCollection。如果要选择所有具有'myClass'类的元素，可以使用：
var elements = document.getElementsByClassName('myClass');
同样，得到的是一个类数组对象，可通过循环遍历来操作其中的每个元素。
四、使用DOCUMENT.QUERYSELECTOR()
document.querySelector() 方法是按照CSS选择器来获取匹配该选择器的第一个元素。例如，要获取第一个.myClass类的元素：
var firstElement = document.querySelector('.myClass');
此方法非常强大，因为它允许你使用复杂的CSS选择器来定位元素。
五、使用DOCUMENT.QUERYSELECTORALL()
document.querySelectorAll() 类似于querySelector()，不同之处在于它返回的是所有符合条件的元素的NodeList，而不仅仅是第一个。比如获取所有.myClass类的元素：
var allElements = document.querySelectorAll('.myClass');
得到的NodeList是静态的，意味着即使后续DOM更新，NodeList中的内容不会改变。
六、HTML5新方法及选择器API
除了上述的方法外，HTML5也引入了一些新的API来更方便地获取和操作DOM元素。比如：
document.forms用来访问页面上的所有表单；document.images用来访问页面上的所有图片；Element.closest()用来获取离当前元素最近的符合条件的祖先元素。
同时，选择器API随着CSS3的发展变得越来越强大，你可以使用例如:nth-child、:first-of-type等复杂选择器来获取元素。
七、事件委托与动态内容的元素获取
在处理动态添加到页面的元素时，直接获取元素可能无法做到，因为当执行获取元素的代码时，这个元素可能还没有被添加到DOM中。这时，可以使用事件委托(Event Delegation)。事件委托是利用事件冒泡的原理，将事件监听器添加到父元素上，然后根据事件的target属性来判断触发事件的是否是目标元素。这样也能提升性能，因为不需要为每个元素都绑定监听器。
JavaScript获取HTML元素是前端开发中最基础也是最重要的一个环节。熟悉不同的DOM选择方法和它们的应用场景，能帮助开发者更有效地与网页的结构和内容交互。在现代前端框架如React、Vue、Angular中，虽然操作DOM的方式有所不同，但了解原生DOM操作仍然非常重要，因为框架的底层依旧是这些基本原理的封装或变体。
相关问答FAQs：
1. 如何使用 JavaScript 获取 HTML 元素？
JavaScript 通过使用 document.getElementById() 方法可以获取 HTML 元素。该方法需要传入一个参数，该参数为所需获取元素的 ID 值。例如，若要获取 ID 为 "myElement" 的元素，可以使用以下代码：
var element = document.getElementById("myElement");
2. JavaScript 中如何以类名获取 HTML 元素？
要通过类名获取 HTML 元素，可以使用 document.getElementsByClassName() 方法。该方法需要传入一个参数，该参数为所需获取元素的类名值。该方法将返回一个类数组对象，其中包含具有指定类名的所有元素。例如，若要获取类名为 "myClass" 的所有元素，可以使用以下代码：
var elements = document.getElementsByClassName("myClass");
3. 如何通过标签名获取 HTML 元素？
为了通过标签名获取 HTML 元素，可以使用 document.getElementsByTagName() 方法。该方法需要传入一个参数，该参数为所需获取元素的标签名。该方法将返回一个类数组对象，其中包含具有指定标签名的所有元素。例如，若要获取所有 div 标签的元素，可以使用以下代码：
var elements = document.getElementsByTagName("div");
