- A+
本文记录,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 中!