如何为没有文本内容的 div 数组创建搜索功能？

Question

有没有一种方法可以根据元素的值、ID 或名称等为 HTML 元素创建搜索过滤器，就像您可以根据元素文本内容创建搜索过滤器一样？这是我对带有文本内容的 div 的搜索过滤器。如果 div 没有文本内容，有没有办法实现搜索过滤器？我可以访问元素标签并以某种方式使用它吗？

Javascript 根据文本内容过滤

let input = document.querySelector(`#input`);
let animalDivs = document.querySelectorAll(`.animal`);

input.addEventListener(`keyup`, function(e) {
  const term = e.target.value.toLowerCase();
  animalDivs.forEach(function(div) {
    const animal = div.textContent.toLocaleLowerCase();
    if (animal.includes(term)) {
      div.style.display = "block"
    } else {
      div.style.display = "none"
    }
  });
});

<input type="text" id="input">
<div class="container">
  <div id="monkey" class="animal">The Monkey</div>
  <div id="mongoose" class="animal">The Mongoose</div>
  <div id="mouse" class="animal">The Mouse</div>
  <div id="moose" class="animal">The Moose</div>
</div>

Answer 1

您可以使用数据属性

tag 不是 recommended/known 标签属性

同时降低模板文字的速度。我也选择使用输入事件侦听器，因为它处理 paste

let input = document.getElementById('input');
let animalDivs = document.querySelectorAll('.animal');

input.addEventListener('input', function(e) {
  const term = this.value.toLowerCase();
  animalDivs.forEach(function(div) {
    const animal = div.dataset.tag.toLocaleLowerCase();
    div.hidden = !animal.includes(term)
  });
});

<input type="text" id="input" autocomplete="off">
<div class="container">
  <div data-tag="The Monkey" id="monkey" class="animal">The Monkey</div>
  <div data-tag="The Mongoose" id="mongoose" class="animal">The Mongoose</div>
  <div data-tag="The Mouse" id="mouse" class="animal">The Mouse</div>
  <div data-tag="The Moose" id="moose" class="animal">The Moose</div>
</div>

如何为没有文本内容的 div 数组创建搜索功能？

How can I create a search feature for an array of divs with no text content?

javascript

html

dom-manipulation