Доступ к javascript HTMLCollection

Я сделал веб-сайт, и мне нужно продвигать javascript. Я хотел бы получить дочерние узлы из моего меню HTML.

Вот часть моей структуры HTML:

    <ul class="menu">
       <div class="moduletable_menu">
          <ul class="nav menu nav-pills">
             <li class="item-101">
             <li class="item-108 current active deeper parent">
             <li class="item-127">
             <li class="item-113 deeper parent">
             <li class="item-124">
             <li class="item-116 deeper parent">
          </ul>
       </div>
    </ul>

Итак, я бы хотел получить "активный" элемент. Я сделал следующий код:

    function getmenuItem(){
   var SelectedItem = document.getElementsByClassName("active");
   console.log(SelectedItem);
   console.log(SelectedItem.length);
    }

Здесь возникает проблема:

Я отобразил консоль через Firebug, и она показала мне

HTMLCollection[]
0

Затем я попытался получить доступ к Коллекции с SelectedElement[0] но я получил "неопределенный".

Пожалуйста, покажи мне, как получить детей от активного элемента.

Источник

1 ответ

Решение

Элемент может быть найден только после того, как HTML страница была построена. Если ваш кусок кода является автономным в <script> в документе <head>нет элемента класса "active" еще.

Поместите ваш код в windows.onload, который вызывается после загрузки страницы и создания ее элементов:

window.onload = function() {
    var SelectedItem = document.getElementsByClassName("active");

    console.log(SelectedItem);
    console.log(SelectedItem.length);
}

Тогда ваша коллекция должна иметь длину 1, и вы можете получить доступ к первому элементу с помощью [0], Код также будет работать при вызове из обработчиков событий, таких как onclick, который будет срабатывать, только если документ уже существует. (Потому что в противном случае не было бы никакой кнопки, чтобы нажать.)

Источник
Другие вопросы по тегам