在前端开发中，获取 DOM 元素是非常重要的。然而，在实际开发过程中，我们可能会面临许多不同的情况和需求。那么，如何正确地获取 DOM 元素呢？
jQuery 选择器
对于熟悉 jQuery 的开发者来说，使用 jQuery 选择器可以很方便地获取 DOM 元素。例如，通过以下方式获取第一个 class 为 "answer" 的元素：
$($(".answer")[0])这种写法虽然简单易用，但是它的性能并不理想，尤其是在处理大量 DOM 元素时。因此，在实际开发中，我们应该避免使用这种方式，而是考虑其他更高效的方法。
原生 JavaScript 方法
在没有使用 jQuery 的情况下，我们可以使用原生 JavaScript 来获取 DOM 元素。其中，最常用的方法是 document.querySelector 和 document.querySelectorAll。
document.querySelector：返回指定的 CSS 选择器匹配的第一个元素。document.querySelectorAll：返回指定的 CSS 选择器匹配的所有元素。
通过以下方式获取第一个 class 为 "answer" 的元素：
document.querySelector(".answer")如果需要获取所有符合条件的元素，则可以使用 document.querySelectorAll：
document.querySelectorAll(".answer")这种方式比 jQuery 选择器更快，因为它是原生 JavaScript 方法，不需要额外的库来处理。
总结
在实际开发中，我们应该尽量避免使用 $($(".answer")[0]) 这种写法。相反，我们可以使用原生 JavaScript 的方法 document.querySelector 和 document.querySelectorAll 来获取 DOM 元素。这些方法更加高效且不需要额外的库。
同时，在编写代码时，我们应该尽可能地减少 DOM 操作和查询，以提高性能和用户体验。
示例代码：
<!-- HTML --> <div class="answer">Answer 1</div> <div class="answer">Answer 2</div> <div class="answer">Answer 3</div>
-- -------------------- ---- ------- -- ----- ----- - -------- --- ----- ----------- - --------------------------------- ------------------------------------ -- ------- ------ - -- ---- ----- - -------- --- ----- ---------- - ------------------------------------ ------------------------- -- -------------------------------- -- ------- ------ - ------ - ------ - --
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26737