其他 querySelector 可使用的 CSS 选择器

本文记录了如何在 .小白的贡献不足为奇。

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

为什么要学习：

因为在前端，基本逻辑是：选一个，然后做；所以，一切的开始都是想办法抓住那个；它是众多选择器中的一种，特别好用；因此，学习是非常有必要的；熟练使用，就是迈出前端JS编程的第一步！

那是什么：

.() 用于在html中选择节点（节点​​|）；与传统的 DOM 选择器（DOM）相比，它的特点是可以使用 CSS 样式；并且支持几乎所有样式的 CSS 选择器；

常用方法、语法对比：

常用的获取节点的方法不超过三种，通过class、tag、id；传统的DOM选择，与()的比较如下：

// 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");

使用“多个”选择标准，或“增量”选择标准 ( )：

选择条件可以是一个或多个；在多个的情况下，数量没有限制，可以是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 ");

比较和：第一比更快！因为是内置方法！使用，无需挂文件，减少！有各种各样的（例如：“：输入”）！但是，没有这样的事情！所以不能使用任何 (“:input” like) ！最终首选！

其他可用的 CSS 选择器：

有许多未引入的 CSS 选择器可以使用；例如：伪选择器（）；通用选择器 ( );一般兄弟组合子“~”（）；直接兄弟组合符 “+” ( ) 。具体可以参考第4、5个链接，里面有CSS选择器的详细介绍

个人评价：

.() 的“渐进式”选择非常有用；

去掉“传统的DOM选择器”，nest麻烦的代码更简洁，可以进一步使用.()

而且，可以看出，当css结合起来的时候，是多么的灵活和强大！

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

: .() – Web API | .() – Web API | – CSS：样式| – CSS：样式|选择器 – CSS（层叠样式表）| MDN