JavaScript和jQuery的各自三种标签选取方式？

拼搏现实的明天。 2024-03-23 12:08 42阅读 0赞

### 用原生js获取标签的几种常用方法 ###

1. 获取标签id

document.getElementById(‘id’) 参数是id的字符，返回值是这个元素的对象

![dcf3280ad4e840899644a5fb0d01437e.png][]

2.获取标签的class

document.getElementByClassName(‘class’)  
参数是class的字符，返回的是一个类数组

(类数组不是一个

真的数组，但是他和数组一样，也满足数组里的属性，也需要索引\[\]去获取想要的标签)

![6315d899cd0543839f3c0377ded4d051.png][]

3. 使用 document.querySelector 来获取标签

![bc079988f1b94513815fdbc569961e0e.png][]

4.使用标签名来获取标签 document.getElementByTagName

找的相同标签时，用索引查找，返回值也是类数组

![1f4c4db13bec43c5b5874781ca406ac8.png][]

注：在原生js获取元素中除了获取id，其它获取返回的大部分都是类数组，都可以使用索引来获取想要的标签

## jQuery获取元素标签 ##

#### jquery是一个javascript的函数库，它极大地优化了javascript编程 ####

在使用jquery需要导入jquery

1.jquery通过ID $("\#id") 获取标签

![b6ae04fb81284f46a81394d03633654d.png][]

2.jquery通过Class $(".class")获取标签

var div = $('.class")

3.jquery通过标签名$(" ")获取标签 ,返回的也是一个类数组，如果有相同标签需要有索引\[ \]来查找

![dab08c7af26043c29d0604932b800bf3.png][]

**id是具有标示性的，唯一性的，像每个人都有一个自己的身份证，名字也许会重复，但是id就是唯一性的。**

**在获取id时，如果标签id相同，通过document.getElementById找到的都会是拥有相同id标签的第一个，其他的都找不到**

[dcf3280ad4e840899644a5fb0d01437e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/135f35180d1f45a59297a77f5bb55c60.png
[6315d899cd0543839f3c0377ded4d051.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/1d3cacb3abe6485f939b85515e13179e.png
[bc079988f1b94513815fdbc569961e0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/5a36b1824b694370a7c3222d5c2917a8.png
[1f4c4db13bec43c5b5874781ca406ac8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/547b3b9b21f947279e49d5255573f55b.png
[b6ae04fb81284f46a81394d03633654d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/82e4b03a04144d06bdcd4a6e395a8d11.png
[dab08c7af26043c29d0604932b800bf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/c21368778158444eb160ac4ddebca832.png