JavaScript の querySelector 使用说明

时间:2024-10-05 09:51:37

???? 优质资源分享 ????

学习路线指引(点击解锁) 知识定位 人群定位
???? Python实战微信订餐小程序 ???? 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
????Python量化交易实战???? 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

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

// 两种 query 的 method (方法)
(selectors);
(selectors);

  • 1
  • 2
  • 3
  • 4

为什么要学习 querySelector:

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

那么 querySelector 是什么:

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

常用方法,语法对比:

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

// select element by class name
("class\_x");
(".class\_x");

// select element by tag name
("img");
("img");

// select element by id name
("id\_x");
("#id\_x");

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

使用 “多个” 选取条件,或 “递进式” 的选取条件 (descendant selector):

选取条件,可以是一个或者多个;多个的情况,并不限制个数,可以是2个,3个 … N个;

// "递进式" 的选取条件 (descendant selector) (可以夸级) (使用"空格"符号)
("class\_x").getElementsByTagName("img");
(".class\_x img");

// "父子递进式" 选取条件 (不可以夸级, 必须是严格的直系父子)
(".parent\_class > .child\_class > .grandChild\_class")

// "父子递进 + 混合式" 选取条件 (使用 ">" 符号)
// 选取 parent\_class 中的 child\_class 中的 grandChild\_class,中的 img tag
(".parent\_class > .child\_class > .grandChild\_class tag\_img")

// "递进式" 的选取条件,属性选取 (attribute)
// 选取所有,id属性='large'的,并且class='bg'的,img标签
("img[id='large'][class='bg']");
("img[id='large'][class='bg']");

// "多个" 选取条件, 用逗号隔开 (相当于 A 或 B)
(".class\_x, .class\_y");
(".class\_x, img");
(".class\_x, #id\_x");

// "单个" 选取条件,返回第一个 match
("class\_x")[0];
(".class\_x");

// "多个" 选取条件,返回第一个 match
("class\_x").getElementsByTagName("img")[0];
(".class\_x, img");

// 选取类 class\_x 中,类名为 big\_pic 的 li 标签,下面的,全部兄弟们!
(".class\_x \_pic ~ li ");

// 选取类 class\_x 中,类名为 big\_pic 的 li 标签,紧挨着的,下一个兄弟!
(".class\_x \_pic + li ");

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

对比 querySelector 和 jQuery:

  1. 首先 querySelector 比 jQuery 要快!因为 querySelector 是内置方法!
  2. 使用 querySelector,无需要挂在 jQuery 的文件,减少 overhead!
  3. jQuery 有各种 filter (例如:“:input”)! 而 querySelector,没有 jQuery 这种 filter!
  4. 所以 querySelector 无法使用任何 (“:input” 类的) filter!
  5. 最终 querySelector 还是首选!

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

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

个人评价:

() 的 “递进式” 选取,很好用;

  1. 去掉了 “传统 DOM选择器” 中,nest selector 的麻烦
  2. 代码更简洁了
  3. 返回的是 nodeList
  4. 可进一步使用 ()

而且,可以看出,当 css selectors 组合起来的时候,那种灵巧多变,是多么的强大啊!
任何一个 element 都逃不过,组合的选择中。除非这个 element 不在 html 中!

Reference:

  1. () - Web APIs | MDN
  2. () - Web APIs | MDN
  3. Descendant combinator - CSS: Cascading Style Sheets | MDN
  4. CSS selectors - CSS: Cascading Style Sheets | MDN
  5. CSS 选择器 - CSS(层叠样式表) | MDN