Javascript 基于带有多个标记的搜索输入隐藏和显示div

我一直在尝试使用多个标记进行搜索

但由于某些原因，它不起作用，它只显示h5标签作为结果

您将如何更改其工作的代码

是不是因为诺德利斯特？对于单个标记，它使用的是

Document.getElementsByTagName（）

我可以将节点列表转换为HTMLCollection吗

const searchBar = document.forms['search-webinare'].querySelector('input');
searchBar.addEventListener('keyup', function(e) {
  const term = e.target.value.toLocaleLowerCase();
  const webinare = Array.prototype.slice.call(document.querySelectorAll('h3,h5'), 0);
  var hasResults = false;
  webinare.forEach(function(webinar) {
    const title = webinar.textContent;
    if (title.toLowerCase().indexOf(term) != -1) {
      webinar.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = 'flex';
      hasResults = true;
    } else {
      webinar.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = 'none';
    }
  });
});

文本1
文本2
文本3
文本4
文本5
文本6

当您能够修改h3/h5的父div时，请尝试以下操作：

const searchBar=document.forms['search-webinare'].querySelector（'input'）；
searchBar.addEventListener（'input'，（e）=>{
const term=e.target.value.toLocaleLowerCase（）
const webinare=document.querySelectorAll（'div.content'）
让hasResults=false；
forEach（网络研讨会=>{
const titleOfh3=webinar.querySelector（'h3'）.textContent；
const titleOfh5=webinar.querySelector（'h5'）.textContent；
if（titleOf3.toLowerCase（）包括（术语）| | titleOf5.toLowerCase（）包括（术语））{
webinar.style.display='block'；
hasResults=true；
}否则{
webinar.style.display='none'；
}
})
});

文本1
文本2
文本3
文本4
文本5
文本6
您可以在节点列表上使用
forEach
。（）不需要数组

有一个很好的解释为什么你的代码没有达到你想要的效果，但是我认为循环父div，然后在子元素中搜索你的术语更容易。（请注意，使用函数也可以查找元素的父元素）

querySelector
函数也可用于元素（）

所以我建议循环浏览父div，然后尝试在每个div中找到与您的术语匹配的标题。
如果在任何地方都找不到术语，则可以直接显示或隐藏父div元素。
请注意，我向父div添加了一个类来选择它们，但根据文档中的位置，可以使用其他选择器


const searchBar=document.querySelector（“#搜索网络研讨会输入”）；
searchBar.addEventListener（'keyup'，函数（e）{
const term=e.target.value.toLocaleLowerCase（）；
const parentDivs=document.querySelectorAll（'.parent'）；
parentDiv.forEach（函数（parentDiv）{
常量标题=parentDiv.queryselectoral（'h3，h5'）；
让match=false；
标题.forEach（功能（标题）{
const title=heading.textContent.toLowerCase（）；
if（标题索引（术语）>-1）{
匹配=真
}
});
如果（匹配）{
parentDiv.style.display='flex'；
}否则{
parentDiv.style.display='none'；
}
});
});
/*只是为了让家长更容易看到*/
.家长{
保证金：5px；
填充物：5px；
背景：rgba（0,0,0,0.1）；
}

文本1
文本2a
text2b
text3a
text3b
文本4
h5是标签，对吗？你想搜索它们或标题。如果您想展示展台（h5+h3）中的某个匹配项，对吗？谢谢您的回答。抱歉，我必须询问有关父div的类的问题。当我将类添加到第一个div时，我将如何编辑要显示的代码？不客气。：）我将为您更新它，并将其添加到答案中。
<form id="search-webinare">
  <input type="text" placeholder="Suchen Sie ein Webinar ... "/>
</form>
<div>
 <div>
  <div>
   <div>
    <div>
     <div>
      <h3>text1</h3>
      <h5>text2</h5>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<div>
 <div>
  <div>
   <div>
    <div>
     <div>
      <h3>text3</h3>
      <h5>text4</h5>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<div>
 <div>
  <div>
   <div>
    <div>
     <div>
      <h3>text5</h3>
      <h5>text6</h5>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>