其他 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");

使用“多个”选择标准,或“增量”选择标准 ( ):

图片[1]-其他 querySelector 可使用的 CSS 选择器-唐朝资源网

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

图片[2]-其他 querySelector 可使用的 CSS 选择器-唐朝资源网

// "单个" 选取条件,返回第一个 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

© 版权声明
THE END
喜欢就支持一下吧
点赞270赞赏 分享
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容