在这里插入图片描述

说明

1,querySelector()方法只会返回第一个匹配元素。如果想要选择所有符合条件元素需要使用querySelectorAll()方法
2,选择器中的特殊字符需要进行转义。例如,如果要选择class为”a.b“的元素选择器应该为”.a.b”。在这个选择器中,”.”是class选择器标识符,”a.b”表示a.b需要进行转义。

document.querySelector("#abc"); // 选择id"abc"元素
document.querySelector('[name="abc"]'); // 选择name"abc"元素

属性选择器中,方括号中的name=”value“表示选择具有指定属性名和属性值的元素

document.querySelector(".abc"); // 选择class"abc"的元素

在这种情况下,选择器中只有一个类名,因此不需要使用复合选择器。如果要选择多个类名相同的元素,可以使用复合选择器,如:

document.querySelectorAll("div.abc"); // 选择所有class"abc"div元素

上述代码中,选择器”div.myClass“表示选择所有class为”myClass“的div元素。其中,div是元素类型选择器,用于限制选择器只选择div元素。

特殊情况:

html 有2个类名
class= ”abc-1“
class= “abc-2”

可以使用 CSS 通配符 * 来匹配所有以 “abc-” 开头类名然后用 querySelectorAll 方法选取它们,如下所示

document.querySelectorAll("[class^='abc-']")

其中 ^= 表示选择所有以 “abc-” 开头的属性值。这样就可以获取到所有的 “abc-1” 和 “abc-2” 类名了。

欢迎大家批评指正!

原文地址:https://blog.csdn.net/sleep_i_like/article/details/129811554

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_43736.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注