Selecting an element with class by queryselector

Question

I am trying to select an element which contains two classes - d-flex and h-100 Here is the example:

<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>

And here is my code:

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;
    });
}

And console in chrome gives that - 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. How to select element using both classes in search?

@Quentin Sorry, where are they :D Are you talking about quotes on span.d-flex.h-100? — Mike2233, May 12 '20 at 16:49
What exactly are you trying to select? Because your selector is for an `img` element, not a `span`, so you're already off to a bad start... In any case, to combine selectors on the same element, put them together with no spaces, quotes, or anything else. `span[data-oe-id="1"].d-flex.h-100`, for example. — Heretic Monkey, May 12 '20 at 16:49
Thing is that I have an img tag in that span tag as a child. And I need to use data-oe-id in selection too — Mike2233, May 12 '20 at 16:50
I have updated post, didn't see that I didn't copy a image tag too — Mike2233, May 12 '20 at 16:51
Does this answer your question? [document.querySelector multiple data-attributes in one element](https://stackoverflow.com/questions/29937768/document-queryselector-multiple-data-attributes-in-one-element) — Heretic Monkey, May 12 '20 at 17:00
@Heretic Monkey I have found answer already by smakss :) But not really. I needed 2 classes, but in your post there's 2 attributes — Mike2233, May 12 '20 at 17:01
It's not about you, despite the question (that's automatically added by Stack Overflow). I would combine that with [Select element based on multiple classes](https://stackoverflow.com/q/2554839/215552). The question has been answered before, is the thing, and we don't need the same answer repeated every time someone asks the same question. — Heretic Monkey, May 12 '20 at 17:03

rid · Answer 1 · 2020-05-12T16:53:45.967

If you want to select the first element which contains two classes, d-flex and h-100, you can use the same selector as you would in CSS:

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

If you want all elements that satisfy that selector:

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

querySelector and querySelectorAll take the same syntax as CSS, so whatever you can select with CSS, you can select with these two function in the same way.

SMAKSS · Accepted Answer · 2020-05-12T16:57:38.887

0

First of all, as @Quentin said you just used some extra quotes which will ruin your selector. So in order to fix this, you should always first consider just use one type of quote for your closing and opening and another for your attribute selector. Then you should keep in mind for selecting items in a single tag, you just have to mention tag name just for once and then append all other attributes to it.

So your final selector should be like this:

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

edited May 12 '20 at 16:57

answered May 12 '20 at 16:51

SMAKSS

9,606
3
19
34

No downvote, but you don't need the `span` unless there's another element with that same combination of data attribute and classes. – Heretic Monkey May 12 '20 at 17:05
@HereticMonkey You are totally right, but since we don't know how're other DOM elements look like, so it will be the safest selector to be considered. – SMAKSS May 12 '20 at 17:08

Selecting an element with class by queryselector

2 Answers2