Question

我有几个同一个类的元素。但是在其中一个类中有一个带type="search"的输入字段。我想把重点放在那个选择元素上。 DOM中还有多个`type =“search”元素。所以我无法浏览DOM并选择它。我需要在包含类中找到它。

const container = Array.from(document.getElementsByClassName('md-select-menu-container'));

for (const htmlElement of container) {
    console.log(htmlElement);

}

这显示了所有元素md-select-menu-container。所以我想遍历所有子元素（以及那些子元素的子元素）并搜索具有属性type="search"的元素。

我的问题是如何编写循环遍历html元素的所有可用子元素的for循环。

Answer 1

我认为最好不要搜索所有类，而是使用type=search查找元素，搜索具有该属性的元素。使用此：

document.querySelectorAll('[type="search"]');

然后遍历它们并找到您的特定元素。

Answer 2

您不需要循环来获取孩子。

尝试document.querySelector('.md-select-menu-container > input[type=search]'

const el = document.querySelector('.md-select-menu-container > input[type=search]');
el.focus();

<div class="md-select-menu-container">Div 1</div>
<div class="md-select-menu-container">Div 2
  <input type="search" placeholder="Search 1..."/>
</div>
<div class="md-select-menu-container">Div 1</div>

<div class="md-select-menu-container">Div 3</div>

<input type="search" placeholder="Search 2..."/>

OR：可能需要以下内容：

const container = document.querySelectorAll('.md-select-menu-container');

for (const htmlElement of container) {
  const children = htmlElement.children;
  for (const el of children) {
    if(el.getAttribute('type') === 'search')
      el.focus();;
  }    
}

<div class="md-select-menu-container">Div 1</div>
<div class="md-select-menu-container">Div 2
  <input type="search" placeholder="Search 1..."/>
</div>
<div class="md-select-menu-container">Div 1</div>

<div class="md-select-menu-container">Div 3</div>

<input type="search" placeholder="Search 2..."/>

循环通过html元素中的子元素

2 个答案: