如何获得具有匹配数据属性值的dom元素？

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

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}"]`)

Answer 3

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 .