javascript与java的区别（JavaScript の querySelector 使用说明）

时间2025-05-01 13:41:33分类IT科技浏览4740

导读：本文记录，JavaScript 中 querySelector 的使用方法。小白贡献，语失莫怪。 // 两种 query 的 method (方法 ...

本文记录，JavaScript 中 querySelector 的使用方法。小白贡献，语失莫怪。

// 两种 query 的 method (方法) document.querySelector(selectors); document.querySelectorAll(selectors);

为什么要学习 querySelector：

因为 front end 中，JavaScript 的基本逻辑就是： 选取一个 element ，然后 do somethong with it；所以，一切的开始，就是要先想办法，抓到那个 element；而 querySelector 就是众多选择器中，特别好用的一个；所以，非常有必要学习；熟练的使用它，就等于迈开了前端 JS 编程，的第一大步！

那么 querySelector 是什么：

document.querySelector() 用于选取 html 中的节点（node | element）；相较于传统的 DOM 选择器 (DOM selectors) ，其特点是，可以使用 CSS 风格的 Selectors；并且几乎支持所有CSS选择器的 syntax 风格；

常用方法，语法对比：

常用的 get 某个节点的方法，无外乎三种，通过 class ，tag ，id；传统的 DOM 选取，与 querySelector() 的 syntax 对比如下：

// select element by class name document.getElementsByClassName("class_x"); document.querySelectorAll(".class_x"); // select element by tag name document.getElementsByTagName("img"); document.querySelectorAll("img"); // select element by id name document.getElementById("id_x"); document.querySelector("#id_x");

使用 "多个" 选取条件，或 "递进式" 的选取条件 (descendant selector)：

选取条件，可以是一个或者多个；多个的情况，并不限制个数，可以是2个，3个 ... N个；

// "递进式" 的选取条件 (descendant selector) (可以夸级) (使用"空格"符号) document.getElementsByClassName("class_x").getElementsByTagName("img"); document.querySelectorAll(".class_x img"); // "父子递进式" 选取条件 (不可以夸级, 必须是严格的直系父子) document.querySelectorAll(".parent_class > .child_class > .grandChild_class") // "父子递进 + 混合式" 选取条件 (使用 ">" 符号) // 选取 parent_class 中的 child_class 中的 grandChild_class ，中的 img tag document.querySelectorAll(".parent_class > .child_class > .grandChild_class tag_img") // "递进式" 的选取条件，属性选取 (attribute) // 选取所有，id属性=large的，并且class=bg的，img标签 document.querySelectorAll("img[id=large][class=bg]"); document.querySelector("img[id=large][class=bg]"); // "多个" 选取条件, 用逗号隔开 (相当于 A 或 B) document.querySelectorAll(".class_x ， .class_y"); document.querySelectorAll(".class_x ， img"); document.querySelectorAll(".class_x， #id_x"); // "单个" 选取条件，返回第一个 match document.getElementsByClassName("class_x")[0]; document.querySelector(".class_x"); // "多个" 选取条件，返回第一个 match document.getElementsByClassName("class_x").getElementsByTagName("img")[0]; document.querySelector(".class_x， img"); // 选取类 class_x 中，类名为 big_pic 的 li 标签，下面的，全部兄弟们！ document.querySelectorAll(".class_x li.big_pic ~ li "); // 选取类 class_x 中，类名为 big_pic 的 li 标签，紧挨着的，下一个兄弟！ document.querySelectorAll(".class_x li.big_pic + li ");

对比 querySelector 和 jQuery：

首先 querySelector 比 jQuery 要快！因为 querySelector 是内置方法！使用 querySelector ，无需要挂在 jQuery 的文件，减少 overhead！ jQuery 有各种 filter (例如：":input")！而 querySelector ，没有 jQuery 这种 filter！所以 querySelector 无法使用任何 (":input" 类的) filter！最终 querySelector 还是首选！

其他 querySelector 可使用的 CSS 选择器：

还有很多没介绍的，querySelector 可使用的 CSS 选择器；例如：伪选择器（Pseudo）；通用选择器（Universal selector）；一般兄弟组合器 "~" (General sibling combinator)；紧邻兄弟组合器 "+" (Adjacent sibling combinator)。详情可参见 reference 中的，第4个，和第5个，link ，里面有详细的 CSS 选择器的介绍

个人评价：

document.querySelectorAll() 的 "递进式" 选取，很好用；

去掉了 "传统 DOM选择器" 中，nest selector 的麻烦代码更简洁了返回的是 nodeList 可进一步使用 nodeList.forEach()

而且，可以看出，当 css selectors 组合起来的时候，那种灵巧多变，是多么的强大啊！

任何一个 element 都逃不过，组合的选择中。除非这个 element 不在 html 中！

Reference：