有一个简单的html视图：
<html>
<head>
</head>
<body>
<input id="summaryText" type="text" name="Summary" placeholder="Summary"><br>
<input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
<input id="searchButton" type="button" value="Search"><br>
<table>
<tr>
<details>
<summary><b>First Summary</b></summary>
<ul>
<details>
<summary><b>Groups</b></summary>
<ul>
<li>group A of First</li>
<li>group B of First</li>
</ul>
</details>
<details>
<summary><b>People</b></summary>
<ul>
<li>John</li>
<li>Mark</li>
</ul>
</details>
</ul>
</details>
</tr>
<tr>
<details>
<summary><b>Second Summary</b></summary>
<ul>
<details>
<summary><b>Groups</b></summary>
<ul>
<li>group A of Second</li>
<li>group B of Second</li>
<li>group C of Second</li>
</ul>
</details>
<details>
<summary><b>People</b></summary>
<ul>
<li>Alex</li>
</ul>
</details>
</ul>
</details>
</tr>
</table>
</body>
</html>
我想使用
summaryText和groupText来过滤页面中的元素。可能只是display:none之类的东西。第一个输入
summaryText应该用作普通过滤器。这意味着如果main summary（来自每个tr元素的第一个详细信息）由String组成的summaryText-应该向用户显示（该tr中的所有元素），如果不组成-应该为用户隐藏（此tr中的所有元素）。第二个输入应按汇总中
String的li元素中的details元素中的Groups进行过滤。如果li中有String中的groupText-应该显示该tr中的所有元素，如果没有，则应该为用户隐藏。有什么方法可以通过
details搜索summary元素，然后获取父级tr并显示/隐藏它，或者仅使用任何其他解决方案？ 最佳答案
使用以下命令获取属于特定标签的所有元素的数组：
var array=document.getElementsByTagName("summary");
使用简单的for循环迭代此数组，并在该标记内搜索字符串。
for(i=0;i<array.length;i++){
if(array[i].innerHTML.indexOf("word to search for") !== -1){
//do something here
}
}
关于javascript - 按词组搜索html元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45007173/