说明
1,querySelector()方法只会返回第一个匹配的元素。如果想要选择所有符合条件的元素,需要使用querySelectorAll()方法。
2,选择器中的特殊字符需要进行转义。例如,如果要选择class为"a.b"的元素,选择器应该为".a.b"。在这个选择器中,"."是class选择器的标识符,"a.b"表示a.b需要进行转义。
- querySelector()方法中,如果要通过id选择元素,需要在选择器中加上#符号,如:
document.querySelector("#abc"); // 选择id为"abc"的元素
- 如果要通过name选择元素,需要在选择器中加上[name=“value”]格式的属性选择器,如:
document.querySelector('[name="abc"]'); // 选择name为"abc"的元素
在属性选择器中,方括号中的name="value"表示选择具有指定属性名和属性值的元素。
- 另外,如果要通过class选择元素,需要在选择器中加上.符号,如:
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://www.toymoban.com/news/detail-584378.html
欢迎大家批评指正!文章来源地址https://www.toymoban.com/news/detail-584378.html
到了这里,关于js querySelector() 说明的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!