Не удается обнаружить элемент по имени класса

Question

Я новичок, и я использую чистый javascript для манипуляций с DOM. Я не могу получить все div в элементе моего раздела. Я получаю undefined. Скажите, пожалуйста, какая ошибка и как я могу это исправить.

HTML

<section class="main-content"> 
     <aside> 
      <p> 
       <span class="sidebartext">Watch this space for breaking news items.</span> 
      </p> 
     </aside> 

     <section class="notes"> 
      <div id="Services" class="nav-pages active">Services</div> 
      <div id="Resources" class="nav-pages">Resources</div> 
      <div id="Contact-Us" class="nav-pages">Contact Us</div> 
      <div id="Company" class="nav-pages">Company</div> 
     </section> 

    </section> 

JS

var navTabs = document.getElementsByClassName('notes').children; 
console.log(navTabs);//undefined 

Нет JQuery не отвечает, пожалуйста !!!

Answer 1

getElementsByClassName возвращает массив элементов (на самом деле, массив типа - см @Hamms комментарий ниже), поэтому children не определено на нем. Если есть только один раздел примечаний, вы можете вместо этого использовать id="notes" (с getElementById) или выполнить итерацию по указанному выше массиву и получить доступ к этим детям.

Answer 2

Это происходит потому, что getElementsByClassName возвращает HTMLCollection или NodeList. Если вы закроете журнал только этим элементом, «заметки» вы увидите, почему вы получаете неопределенный.

Заменить код JS по:

var navTabs = document.getElementsByClassName('notes'); 
console.log(navTabs); 

Это будет выводить массив, который когда-то расширяется, он будет показывать содержание позиции [0]. Если вы расширите этот номер, вы получите свой NodeList, помеченный как childNodes. Разверните его, и вы получите свои div.

Попробуйте это, чтобы получить непосредственно ваши дивы:

console.log('Items: ',navTabs[0].childNodes);