Как получить конкретный дочерний элемент родительского div с помощью метода DOM get?

Я пытаюсь получить доступ к определенному дочернему элементу по имени класса, но он не работает, он дает мне весь внутренний HTML-код, используемый в ul? 

var element = document.getElementsByClassName("inner")[0].innerHTML;
console.log(element);

  <ul id="list" class="inner">
    <p>paragraph</p>
    <li><a href="" class="hom" id="hoo">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Classes</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Teachers</a></li>
    <button ><a href="" id="btn-1" >Join class</a></button>
  </ul>
</nav>

Всего 2 ответа

document.getElementsByClassName возвращает массив со всеми elements, которые имеют указанный класс. document.getElementsByClassName('inner')[0] просто выберет первый и единственный элемент с таким классом (Ваш ul).

Если вам нужно получить доступ к определенному дочернему элементу этого элемента, вам нужно будет использовать свойство children, а затем вы можете использовать любой индекс, который соответствует существующему дочернему элементу. 

var element=document.getElementsByClassName("inner")[0].children[0].innerHTML;
console.log(element);
<ul id="list" class="inner">
                     <p>paragraph</p>
                     <li><a href="" class="hom" id="hoo">Home</a></li>
                     <li><a href="">About</a></li>
                     <li><a href="">Classes</a></li>
                     <li><a href="">Services</a></li>
                     <li><a href="">Gallery</a></li>
                     <li><a href="">Teachers</a></li>
                     <button ><a href="" id="btn-1" >Join class</a></button>
              </ul>
       </nav>

Я бы посоветовал не использовать document.getElementsByClassName и просто использовать document.querySelector('.inner') вместо этого для выбора элемента.

Вместо использования getElementsByClassName вы можете использовать querySelector для простого нацеливания на абзацы innerHTML.

См. пример ниже: 

var element = document.querySelector(".inner p").innerHTML;

console.log(element);
<ul id="list" class="inner">
  <p>paragraph</p>
  <li><a href="" class="hom" id="hoo">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Classes</a></li>
  <li><a href="">Services</a></li>
  <li><a href="">Gallery</a></li>
  <li><a href="">Teachers</a></li>
  <button><a href="" id="btn-1" >Join class</a></button>
</ul>
</nav>

Есть идеи?

10000