如何獲得具有匹配數據屬性值的dom元素？

Question

我有一個從懸停的元素獲取數據名稱屬性值的函數。 我想使用匹配的“ data-name-match”屬性值來獲取頁面上的dom元素，以便為它添加一個類。

我已經走了很多路，但是我無法弄清楚與元素匹配的最后一步。 在這種情況下是否可以使用模板文字來匹配“名稱”變量值？

 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

如果您希望所有具有data-name-match屬性的元素，則可以執行

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

如果要匹配一個特定的querySelectorAll ，則在技術上僅要求一個就使用querySelectorAll可能就沒有意義，因此可以（如前所述）使用模板文字來做到這一點，例如：

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

Answer 2

您需要將name注入選擇器

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

或者您可以使用模板文字

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

Answer 3

在這種情況下是否可以使用模板文字來匹配“名稱”變量值？

應該是的。

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

如果應該只有其中的一個，你可以使用document.querySelector將只匹配第一個，你會不會需要遍歷highlight 。