it-roy-ru.com

HTML getElementsByClassName возвращает HTMLCollection с длиной

Я пытаюсь использовать jsdocument.getElementsByClassName, чтобы найти элемент HTML, который на самом деле является заголовком таблицы.

Для следующих кодов:

console.log(document.getElementsByClassName('gtableheader'));

Из Firebug я вижу, как он регистрирует HTMLCollection, и когда я нажимаю на него, он показывает:

-> 0         tr.gtableheader
   length    1

Так что найдите элемент, который я хочу.

Но когда я использую:

console.log(document.getElementsByClassName('gtableheader').length);

Тогда вывод будет 0. Это так странно, есть идеи по этому поводу?

8
chrisTina

Использование getElementsByClassName() вернет все элементы с этим именем класса в документе как NodeList. Этот объект представляет собой набор узлов, к которым можно получить доступ по индексным номерам, который начинается с 0. Для доступа к элементам в NodeList вы должны будете использовать цикл.

Когда вы console.log(document.getElementsByClassName('gtableheader').length); , вы видите 0, потому что при его запуске нет элемента с классом gtableheader. Вы можете видеть элементы в консоли, потому что document.getElementsByClassName() возвращает живую коллекцию, которая обновляется при добавлении новых элементов.

Кроме того, в используемом вами коде, длина которого равна 0, вы можете использовать приведенный ниже код для доступа к имени класса. 

document.getElementsByClassName('gtableheader')[0].style.color="red";

Если вы хотите получить доступ ко всем элементам в классе, вы можете использовать цикл for.

var x = document.getElementsByClassName('gtableheader');
for (var i = 0; i < x.length; i++) {
    x[i].style.color = "red";
}

Дополнительная информация: http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

5
Victor Luna

Это потому, что getElementsByClassName возвращает live collection. свойство length объекта - 0, потому что в этот момент в DOM нет элемента с таким className. Так как консоль показывает живое представление объекта, она показывает все соответствующие элементы, когда элементы добавляются в DOM. 

Анализатор DOM анализирует документы сверху вниз, когда он достигает тега, он анализирует его и добавляет его представление DOM (экземпляр интерфейса HTMLElement) в объектную модель документа. Вам следует либо переместить тег сценария в конец тега body, либо прослушать событие DOMContentLoaded, которое запускается, когда исходный HTML-документ полностью загружен и проанализирован.

10
undefined

У меня была похожая проблема, но другие ответы здесь не привели к моему решению. В конце концов я понял, что в то время, когда мой код работал, DOM еще не был полностью построен, поэтому пустой массив. То, что я видел в консоли, заполненном массиве, было тем, что существовало после полного формирования DOM и завершения сценария.

Для меня работало то, что я должен был обернуть код, который нуждался в массиве в MutationObserver, и настроить его на просмотр жестко закодированного div, содержащего разделы, которые будут генерироваться динамически (см. Этот ответ StackOverflow и документацию MDN ).

Попробуй это:

var divArray = document.getElementById('hardCodedContainer');

var observer = new MutationObserver(function(){
   console.log(document.getElementsByClassName('gtableheader').length);
   console.log(document.getElementsByClassName('gtableheader'));
};

observer.observe(divArray, { attributes: false, childList: true, subtree: true });

// When you've got what you need, you should call this function to trigger a disconnect 
function classesFound(){
   observer.disconnect();
};
0
jamesthe500

Используйте это, чтобы заставить это работать 

window.addEventListener("load", function(event) {
    console.log(document.getElementsByClassName('gtableheader').length);
});
0
Benzion Gross