在前端开发中，经常需要通过JavaScript来操作DOM元素。而获取DOM元素的方式有很多种，其中比较常用的两种方式是使用原生方法document.getElementById()和jQuery库中的方法$()。
document.getElementById()
document.getElementById()是原生JavaScript提供的一种获取DOM元素的方法，它的语法如下：
----------------------------------
其中，elementId表示要获取的DOM元素的ID属性值。例如，如果我们要获取一个ID为myDiv的<div>元素，可以这样写：
---- -----------------
--- ----- - ---------------------------------
jQuery()
jQuery()是一个流行的JavaScript库，它封装了大量操作DOM元素的方法，包括获取元素、添加元素、删除元素等等。其中，获取元素的方法就是$()，其语法如下：
-----------
其中，selector是一个字符串，可以是CSS选择器、HTML标签名、以及其他jQuery特定的选择器。例如，如果我们要获取一个CSS类名为myClass的<div>元素，可以这样写：
---- ----------------------
--- ----- - --------------
比较
document.getElementById()和$()都可以用来获取DOM元素，但是它们有一些不同之处。
1. 返回值类型
document.getElementById()返回的是一个DOM元素，而$()返回的是一个jQuery对象。如果我们要获取DOM元素，可以使用jQuery对象的get()方法或者下标运算符[]来获取。
-- -- ----- ---- --- -- --- ----- - --------------------- -- --------- --- -- --- ----- - -----------------
2. 可读性
$()的语法比document.getElementById()更加简洁易读，尤其是在处理多个元素时。例如，如果我们要获取所有CSS类名为myClass的<div>元素，可以这样写：
--- ------ - --------------
而如果使用document.getElementsByClassName()，则需要写成这样：
--- ------ - -------------------------------------------
3. 性能
从性能上来看，document.getElementById()比$()更快。因为document.getElementById()是原生的方法，而$()是通过JavaScript代码实现的，底层还是要调用原生方法。
结论
选择使用哪种方式取决于具体的情况。如果只是获取单个元素，并且性能很重要，那么建议使用document.getElementById()；如果要处理多个元素，并且可读性和方便性比较重要，那么建议使用$()。
示例代码
---- ----------------- ---- ---------------------- ---- ----------------------
-- -- ------------------------- -- --- -- --- ----- - --------------------------------- -- -- --- -- --- -- --- --------- - -------------- -- -- ----- ---- --- -- --- ------------ - ----------------- -- --------- --- -- --- ------------- - -------------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8199