How can I get a dom elements with a matching data attribute value?

Question

I have a function that gets the data-name attribute value from a hovered element. I would like to grab the dom element on the page with the matching "data-name-match" attribute value so I can add a class to it.

I am most of the way there but I cannot figure out the last step that matches the element. Is it possible to use a template literal in this situation to match the "name" variables value?

const blocks = [...document.getElementsByClassName('footer-block_icon-block')];

console.log(blocks)

blocks.forEach(block => {
  block.addEventListener('mouseover', () => {
    const name = block.dataset.name;
    console.log({name})

    const highlight = document.querySelectorAll('[data-name-match=""]')
    console.log({highlight})
  });
})

<div class="footer-blocks">
  <div class="footer-block footer-block_header-block" data-name-match="market">
    <img src="<?php echo get_bloginfo('template_directory'); ?>/img/logo_winstons-market-white.png" alt="">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Catering Menu</a></li>
      <li><a href="">Directions</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div> 
  <div class="footer-block footer-block_header-block" data-name-match="sausage">
    <img src="<?php echo get_bloginfo('template_directory'); ?>/img/logo_winstons-sausage-white.png " alt="">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Ordering</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div> 
  <div class="footer-block footer-block_header-block" data-name-match="ashford">
    <img src="<?php echo get_bloginfo('template_directory'); ?>/img/logo_ashford-house-white.png" alt="">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Dinner</a></li>
      <li><a href="">Lunch & Breakfast</a></li>
      <li><a href="">Directions</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>
  <div class="footer-block footer-block_icon-block" data-name="market">
    <div class="footer-block_icon-block-header">
      <i class="fas fa-home"></i>
      <a href="">
        7959 159th Street
        <br>
        Tinley Park, IL 60477
      </a>
    </div>
    <div class="footer-block_icon-block-body">
      <ul>
        <li><i class="fas fa-phone"></i>708-633-7500</li>
        <li><i class="fas fa-fax"></i>708-633-7552</li>
        <li>
          <i class="fas fa-clock"></i>
          <ul class="icon-block_sub-list">
            <li>Mon - Sat: 9am - 6pm</li>
            <li>Sun: 10am - 3pm</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="footer-block footer-block_icon-block" data-name="sausage">
    <div class="footer-block_icon-block-header">
      <i class="fas fa-home"></i>
      <a href="">
        4701 West 63rd Street
        <br>
        Chicago, IL 60629
      </a>
    </div>
    <div class="footer-block_icon-block-body">
      <ul>
        <li><i class="fas fa-phone"></i>773-767-4353</li>
        <li><i class="fas fa-fax"></i>773-767-0470</li>
        <li>
          <i class="fas fa-clock"></i>
          <ul class="icon-block_sub-list">
            <li>Tues - Thurs: 8am - 3pm</li>
            <li>Sun - Mon: Closed</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="footer-block footer-block_icon-block" data-name="ashford">
    <div class="footer-block_icon-block-header">
      <i class="fas fa-home"></i>
      <a href="">
        7959 West 159th St.
        <br>
        Tinley Park, IL 60477
      </a>
    </div>
    <div class="footer-block_icon-block-body">
      <ul>
        <li><i class="fas fa-phone"></i>708-633-7600</li>
        <li><i class="fas fa-fax"></i>708-633-7552</li>
        <li>
          <i class="fas fa-clock"></i>
          <ul class="icon-block_sub-list">
            <li>Mon - Thurs: 7am - 9pm</li>
            <li>Fri & Sat: 7am - 10pm</li>
            <li>Sun: 7am - 8pm</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

If you want ALL elements that have the attribute data-name-match then you can do

const highlight = document.querySelectorAll('[data-name-match]');

if you want to match a specific one, it might not make sense to use querySelectorAll as you technically just ask for one, so you could do (as you already indicated) that with a template literal, like so:

const highlight = document.querySelector(`[data-name-match="${name}"]`);

Answer 2

Is it possible to use a template literal in this situation to match the "name" variables value?

Should be, yes.

const highlight = document.querySelectorAll(`[data-name-match="${name}"]`)

If there should only be one of those, you can use document.querySelector which will only match the first one and you won't need to iterate over highlight.

Answer 3

You need to inject the name to the selector

const highlight = document.querySelectorAll('[data-name-match="'+name+'"]')

or you could use template literals

const highlight = document.querySelectorAll(`[data-name-match="${name}"]`)