Question

我正在尝试选择一个包含两个类的元素-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;
    });
}

Chrome控制台提供了-mainimg.js:5 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'span[data-oe-id="1"] "span.d-flex.h-100" img' is not a valid selector. 如何在搜索中同时使用两个类来选择元素？

Answer 1

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

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

如果希望所有满足该选择器的元素：

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

querySelector和querySelectorAll的语法与CSS相同，因此无论您选择CSS还是什么，都可以以相同的方式选择这两个函数。

Answer 2

首先，正如@Quentin所说的那样，您只是使用了一些多余的引号，这会破坏选择器。因此，要解决此问题，您应该始终首先考虑只对您使用一种引号关闭和打开，另一个用于属性选择器。然后，请记住在单个标记中选择项目，只需要一次提及标记名称，然后将所有其他属性附加到该标记上即可。

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

document.querySelector('span[data-oe-id="1"].d-flex.h-100 img');

通过queryselector选择具有类的元素

2 个答案: