IT技术 - 如何获取具有多个类的元素 - 吾爱随笔录

IT技术 javascript class element

2021-01-13 22:05:35

说我有这个：

<div class="class1 class2"></div>

我如何选择这个div元素？

document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

那行不通。

我知道，在 jQuery 中，它是$('.class1.class2')，但我想用 vanilla JavaScript 选择它。

6个回答

它实际上与 jQuery 非常相似：

document.getElementsByClassName('class1 class2')

获取只有一个类的元素怎么样，这是指定的@Joe

2021-03-13 22:05:35

在给定的 MDN 链接中，getElements 参数中的类名之前不使用点。我在 Firefox 和 chrome 上检查了这个，它没有点，但没有点。

2021-03-25 22:05:35

因为我记得这些课程没有“。” document.getElementsByClassName('class1 class2')

2021-04-05 22:05:35

AND （两个类）

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

或 （至少一类）

var list = document.querySelectorAll(".class1,.class2");

XOR （一类但不是另一类）

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

NAND （不是两个类）

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

NOR （不是两个类别中的任何一个）

var list = document.querySelectorAll(":not(.class1):not(.class2)");

var list = document.querySelector('.remove_fields.dynamic, .remove_fields.existing') 获取element是否存在任何组合但不是两者都存在。

2021-03-14 22:05:35

非常好的答案和浓缩的帮助，谢谢！

2021-03-21 22:05:35

这是太棒了。应该是顶级的。

2021-03-31 22:05:35

带有标准类选择器的querySelectorAll也适用于此。

document.querySelectorAll('.class1.class2');

这不起作用，它需要 document.querySelectorAll('.class1, .class2');

2021-03-21 22:05:35

好吧，我的错，我误解了 OP 想要做什么。但是 IMO 一个更典型的用例是想要选择具有类或两者的元素，在这种情况下，我的示例就是您想要的。

2021-03-31 22:05:35

@bazzlebrush 您的选择器将使用.class1OR捕获元素.class2，而上面的选择器只会捕获具有两个类的元素并且实际上有效。看看这个测试的控制台输出：jsfiddle.net/0ph1p9p2

2021-04-10 22:05:35

正如@filoxo 所说，您可以使用document.querySelectorAll.

如果您知道您要查找的类只有一个元素，或者您只对第一个元素感兴趣，则可以使用：

document.querySelector('.class1.class2');

顺便说一句，虽然.class1.class2表示具有两个类的元素，.class1 .class2（注意空格）表示层次结构 - 和具有 class 的元素，class2它位于具有 class 的 en 元素内class1：

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

如果您想强制检索直接子代，请使用>符号 ( .class1 > .class2)：

<div class='class1'>
  <div class='class2'>
    :
    :

html

<h2 class="example example2">A heading with class="example"</h2>

脚本代码

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

querySelectorAll() 方法将文档中与指定 CSS 选择器匹配的所有元素作为静态 NodeList 对象返回。

NodeList 对象表示节点的集合。可以通过索引号访问节点。索引从 0 开始。

== 谢谢==

其它你可能感兴趣的问题