Javascript DOM 选择元素详解

逃离我推掉我的手 2024-05-28 10:14 87阅读 0赞

> **还是大剑师兰特**：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

![在这里插入图片描述][4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]

#### 文章目录 ####

*   *  一、原生JavaScript方法
     *   *   *  1. \`document.getElementById(id)\`
             *  2. \`document.getElementsByTagName(name)\`
             *  3. \`document.getElementsByClassName(className)\`
             *  4. \`document.querySelector(selector)\`
             *  5. \`document.querySelectorAll(selector)\`
     *  二、jQuery选择元素
     *   *   *  1. \`$(\`selector\`)\`
     *  三、注意事项

--------------------

在JavaScript中，选择DOM元素是进行网页动态操作的基础。以下是几种常用的元素选择方法，包括原生JavaScript方法和jQuery库（作为一种广泛应用的库）的使用方式。

### 一、原生JavaScript方法 ###

##### 1. `document.getElementById(id)` #####

根据元素ID选择一个元素。

var element = document.getElementById("myElementId");

##### 2. `document.getElementsByTagName(name)` #####

根据标签名选择所有匹配的元素。

var elements = document.getElementsByTagName("div");

##### 3. `document.getElementsByClassName(className)` #####

根据类名选择所有匹配的元素。

var elements = document.getElementsByClassName("myClass");

##### 4. `document.querySelector(selector)` #####

返回文档中匹配指定CSS选择器的第一个元素。

var element = document.querySelector(".myClass #specificId");

##### 5. `document.querySelectorAll(selector)` #####

返回文档中匹配指定CSS选择器的所有元素，返回的是NodeList对象。

var elements = document.querySelectorAll("div.myClass");

### 二、jQuery选择元素 ###

jQuery提供了更简洁的API来选择DOM元素，前提是你已经在项目中引入了jQuery库。

##### 1. `$(`selector`)` #####

使用CSS选择器来选择元素。

var $element = $("#myElementId");
    var $elements = $(".myClass");

### 三、注意事项 ###

*  **性能**：尽可能使用ID选择，因为它是最快的。类名和标签名选择会遍历更多的元素，而CSS选择器查询（querySelector系列）在复杂选择器上可能有性能损耗。
 *  **兼容性**：虽然大多数现代浏览器都支持上述原生方法，但旧版浏览器（如IE6-8）可能不完全支持`getElementsByClassName`和`querySelector`系列方法。使用时需考虑兼容性问题。
 *  **返回类型**：原生方法中，`getElementById`返回单个元素，`getElementsByTagName`和`getElementsByClassName`返回HTMLCollection集合，而`querySelector`返回第一个匹配的元素，`querySelectorAll`返回NodeList集合。jQuery方法总是返回jQuery对象，即使只匹配到一个元素。
 *  **链式操作**：jQuery允许链式调用，使得代码更简洁，而原生JavaScript需要逐行操作。

选择元素是进行DOM操作的第一步，正确且高效地选择元素对于提高网页应用的性能和用户体验至关重要。

[4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/80929d30a2a94217920aafa6c9f1fa3a.png
[744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/1247f05e6404492e99fc319e1e4bbae9.png