Replacement for document.querySelectorAll

Question

I have a querySelectorAll('a') that applies to all buttons. I only want to query select these two specific buttons that are listed as 'Know More'. How would I do this?

Here is my code:

const buttons = document.querySelectorAll('a');
buttons.forEach(btn => {
  btn.addEventListener('click', function(e) {

    var totalOffsetX = 0; // X and Y COORDINATES WITH SCROLL START
    var totalOffsetY = 0;
    var X = 0;
    var Y = 0;
    var currentElement = this;

    do {
      totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
      totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while (currentElement = currentElement.offsetParent)

    X = e.pageX - totalOffsetX;
    Y = e.pageY - totalOffsetY; // X and Y COORDINATES WITH SCROLL END

    let ripples = document.createElement('buttonspan');
    ripples.style.left = X + 'px';
    ripples.style.top = Y + 'px';
    this.appendChild(ripples);

    setTimeout(() => {
      ripples.remove()
    }, 1000);
  })
})

<div class="buttons">
  <a href="javascript:void(0)">Know More</a>
  <a href="javascript:void(0)" class="button">Know More</a>
</div>

You don't need a replacement for `querySelectorAll` you need a replacement for the selector `'a'`. Don't blame the tool; blame the one who uses the tool incorrectly. Add a class to both anchor elements and select on that class. — Heretic Monkey, Jul 19 '21 at 15:11
`.querySelectorAll(".buttons a")`? Or is there anything even more specific you can select them by? We can't know without a representative HTML. — VLAZ, Jul 19 '21 at 15:12
How about `if (btn.innerText === "...")` before you attach the event listener? — Peter B, Jul 19 '21 at 15:14
Does this answer your question? [How can I select an element using its text content?](https://stackoverflow.com/questions/52315525/how-can-i-select-an-element-using-its-text-content) or [How to find a DOM element by its text content?](https://stackoverflow.com/q/58052522/215552) — Heretic Monkey, Jul 19 '21 at 15:18

Tushar Shahi · Accepted Answer · 2021-07-19T15:24:46.753

You can convert the collection from querySelectorAll() to an array and use .filter().

const buttons = [...document.querySelectorAll('a')].filter((x) => x.innerText==="Know More");
       
       console.log(buttons);
       buttons.forEach((a) => { a.addEventListener('click',()=>{
       console.log("yo"); });
       });

<div class="buttons">
      <a href="javascript:void(0)">Know More</a>
      <a href="javascript:void(0)" class="button">Know More</a>
      <a href="#a">Know Less</a>
    </div>

Note: If you know the content of the anchor tags already('Know More'), giving a relevant class name would save you this headache. Then you can simply do :

let buttons = document.querySelectorAll('a.knowmore');

Since the return type of querySelectorAll() is not exactly an array but NodeList, I am using the ... operator to convert them into an array, to make .filter() method work.

.forEach() is a method implemented on the NodeList and that is why it works in your code. But, I found this in the docs. Probably mean Internet Explorer here.

Some older browsers have not implemented NodeList.forEach().

score 0 · Answer 2 · answered Jul 19 '21 at 15:14

0

You can use the element id or class to specify which specific buttons you want to select, like

<a class="foo">...</a>
<a>...</a> //won't be selected
<a class="foo">...</a>

And then use the proper CSS selector

document.querySelectorAll("a.foo")...

answered Jul 19 '21 at 15:14

ControlAltDel

33,923
10
53
80

score 0 · Answer 3 · answered Jul 19 '21 at 15:15

There's no CSS selector that checks the contents of an element (jQuery has a :contains() extension, but it's not available in standard querySelectorAll()).

So you'll need to check for this in your loop:

buttons.forEach(btn => {
  if (btn.textContent.trim() == 'Know More') {
    // rest of code
  }
});

score 0 · Answer 4 · answered Jul 19 '21 at 15:16

I would simply use a specific class name for the elements that you want to get and then use document.getElementsByClassName method.

const elements = document.getElementsByClassName('know-more');

console.log(elements);

<div class="buttons">
  <a href="javascript:void(0)" class="know-more">Know More</a>
  <a href="javascript:void(0)" class="button know-more">Know More</a>
</div>

score 0 · Answer 5 · edited Jul 19 '21 at 21:25

0

You can use filter to get only those elements that you need.

const buttons = [...document.querySelectorAll('a')];
const knowMoreButtons = buttons.filter(button => button.textContent === 'Know More')

edited Jul 19 '21 at 21:25

ptpaterson

9,131
4
26
40

answered Jul 19 '21 at 15:16

ManuelMB

1,254
2
8
16

Replacement for document.querySelectorAll

5 Answers5