Javascript 通过queryselector选择具有类的元素

我试图选择一个包含两个类的元素-

d-flex

和

h-100

以下是一个例子：

<span data-oe-model="product.template" data-oe-id="2" data-oe-field="image_1920"
  data-oe-type="image" data-oe-expression="product.image_1920"
  class="d-flex h-100 justify-content-center align-items-center">
  <img
    src="/web/image/product.template/2/image_256/A4Tech%20Bloody%20V8M?unique=9ffc5e8"
    class="img img-fluid" alt="A4Tech Bloody V8M"/>
</span>

这是我的代码：

for(let i=0; i<3; i++){
    var list = document.querySelector('span[data-oe-id="1"] "span.d-flex.h-100" img');

    let image = list;
    let src = image.src;

    image.addEventListener("mouseover",function(event){

     image.src="https://media1.giphy.com/media/PfFtibPKBbQrK/giphy.gif?cid=ecf05e47b668e5062e9a561e681f23705e106d8d495b3915&rid=giphy.gif";
    });
    image.addEventListener("mouseout",function(event){
      image.src=src;
    });
}

---

for（设i=0；i如果要选择包含两个类的第一个元素，
d-flex
和
h-100
，可以使用与CSS中相同的选择器：

document.querySelector(".d-flex.h-100")

如果需要满足该选择器的所有元素：

document.querySelectorAll(".d-flex.h-100")

与CSS的语法相同，所以不管你用CSS选择什么，你可以用同样的方式选择这两个函数。
 < P>首先，<强> As@昆廷说你刚才使用了一些额外的引号，这会破坏你的选择器。< /强>所以，为了解决这个问题，你应该首先考虑使用一种类型的引用来结束。然后你应该记住，在选择单个标记中的项目时，你只需提到标记名一次，然后将所有其他属性附加到它

因此，您的最终选择器应如下所示：

document.querySelector（'span[data oe id=“1”].d-flex.h-100 img'）；
您添加了一些随机的额外引号。不要这样做。
document.querySelector（'span.d-flex.h-100 img'））
@Quentin抱歉，它们在哪里：D你是在说span.D-flex.h-100上的引号吗？你到底想选择什么？因为你的选择器是针对
img
元素的，而不是
span
，所以你已经有了一个糟糕的开始……在任何情况下，在同一个元素上组合选择器，把它们放在一起，没有空格，引号，或其他任何内容。
span[data oe id=“1”]例如.d-flex.h-100
。问题是，我作为一个孩子在span标记中有一个img标记。我需要在选择中使用数据oe id ToNo downvote，但你不需要
span
，除非有另一个元素具有相同的数据属性和类组合。@HereticMonkey你完全正确，但因为我们不知道如何使用'r'e其他DOM元素看起来类似，因此它将是考虑的最安全的选择器。