सरणी

Question

मैं कैसे जे एस कर सकते हैं एक यूएल टैग के अंदर हर LI तत्व का चयन और उन्हें एक सरणी में डाल में सभी LI तत्वों प्राप्त करें?

<div id="navbar"> 
     <ul> 
      <li id="navbar-One">One</li 
      ><li id="navbar-Two">Two</li 
      ><li id="navbar-Three">Three</li 
      ><li id="navbar-Four">Four</li 
      ><li id="navbar-Five">Five</li> 
     </ul> 
    </div> 

मैं यह इतना जे एस उनमें से प्रत्येक के एक सरणी जैसे नेवबार में हो जाता है [ '0'] document.getElementById वापसी होगी बना सकते हैं ("नेवबार-वन")?

Answer 1

आप एक NodeList getElementsByTagName() उपयोग करते हुए, इस तरह से के माध्यम से पुनरावृति करने के लिए प्राप्त कर सकते हैं:

var lis = document.getElementById("navbar").getElementsByTagName("li"); 

You can test it out here। यह NodeList एक सरणी नहीं है, लेकिन इसमें .length है और आप इसे सरणी की तरह पुन: सक्रिय कर सकते हैं।

Answer 2

के बाद कुछ साल बीत चुके हैं, तो आप कि अब क्या कर सकते हैं ES6 Array.from (या spread syntax) के साथ:

const navbar = Array.from(document.querySelectorAll('#navbar>ul>li')); 
 
console.log('Get first: ', navbar[0].textContent); 
 

 
// If you need to iterate once over all these nodes, you can use the callback function: 
 
console.log('Iterate with Array.from callback argument:'); 
 
Array.from(document.querySelectorAll('#navbar>ul>li'),li => console.log(li.textContent)) 
 

 
// ... or a for...of loop: 
 
console.log('Iterate with for...of:'); 
 
for (const li of document.querySelectorAll('#navbar>ul>li')) { 
 
    console.log(li.textContent); 
 
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

<div id="navbar"> 
 
    <ul> 
 
    <li id="navbar-One">One</li> 
 
    <li id="navbar-Two">Two</li> 
 
    <li id="navbar-Three">Three</li> 
 
    </ul> 
 
</div>