遍歷html元素中的子元素

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..."/>