catch all getElementsByClassName with exactly equal class

Question

I would like to pay all div containing exactly class '1 2 3' Example.

<div data-full="true" class="1 2 3 4">
    <div class="1 2 3">text</div>
</div>
<div class="1 2 3">text</div>
<div class="1 2 3">text</div>
<div data-full="true" class="1 2 3 4">
   <div class="1 2 3">text</div>
</div>

But I need him to ignore in this case the first div and her children and the last div and her son. all parent div has the data-full="true" element i tried earlier to use java script so however it selects all

var teste = document.querySelectorAll('.1.2.3');
for (var i=0, len=teste.length|0; i<len; i=i+1|0) {
    console.log(teste[i]);
}

according to the link https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName however it did not work with my tests.

Answer 1

Class name a number is not interpreted correctly. Avoid using class or even ID names as id="1" or class="1", if you want to write in full, like id="um" or class="n1" tb works.

See here: ID with the first character being a number does not work when I put in css #[example number]
And here: Is it bad practice to put numbers as id in HTML elements? If yes why?

Then use a forEach() in place of for, I think it facilitates the syntax, and also use a if to validate the className and exclude the first child.

See how the suggestion looks

const teste = document.querySelectorAll('.n1.n2.n3');

teste.forEach( (el) => {
  if (el.className === 'n1 n2 n3') {
    console.log(el);
  }
}) 

<div data-full="true" class="n1 n2 n3 4">
  <div class="n1 n2 n3">text</div>
</div>
<div class="n1 n2 n3">text</div>
<div class="n1 n2 n3">text</div>
<div data-full="true" class="n1 n2 n3 4">
  <div class="n1 n2 n3">text</div>
</div>

Answer 2

There are several options:

console.log('Modo 1')

for (const el of document.body.querySelectorAll(':not([data-full]) > [class="n1 n2 n3"]'))
  console.log(el);

console.log('Modo 2')

for (const el of document.body.querySelectorAll(':not([data-full]) > .n1.n2.n3:not(.n4)'))
  console.log(el);
 
console.log('Modo 3')

for (const el of document.body.querySelectorAll(':not([data-full]) > .n1.n2.n3:not([data-full])'))
  console.log(el);

<div data-full="true" class="n1 n2 n3 n4">
    <div class="n1 n2 n3">text 1</div>
</div>
<div class="n1 n2 n3">text 2</div>
<div class="n3 n2 n1">text 3</div>
<div data-full="true" class="n1 n2 n3 n4">
   <div class="n1 n2 n3">text 4</div>
</div>

The idea is to take the elements with the desired classes, which is not preceded directly (>) by an element with the attribute data-full

• Mode 1 [class="n1 n2 n3"]: you can use the attribute selector to search for an element with the exact class, but in this case the order is important, note that in the example one of the middle elements was not selected, since the order of the classes is messy

• Mode 2 .n1.n2.n3:not(.n4): takes those that have classes n1, N2 and N3 and that do not have class N4, in which case the order does not matter

• Mode 3 .n1.n2.n3:not([data-full]): takes those that have classes n1, N2 and N3 and that do not have the attribute data-full, if this attribute is always present with class N4