как получить доступ к свойствам document.getElementsByClassName

Question

Я пытаюсь проверить, используется ли класс css внутри DOM или нет. Итак, у меня есть

var x = document.getElementsByClassName('classname');

Когда я печатаю x, я получаю [object NodeList] для классов, существующих на странице, и классов, которые не существуют. Есть ли свойство x, к которому я могу получить доступ? Как имя тега или что-то. Было бы здорово, если бы кто-нибудь рассказал мне о различных свойствах x и о том, как я могу получить к ним доступ.

Спасибо:)

Answer 1

Обратите внимание, что это множественное число:

var x = document.getElementsByClassName('classname');
                           ^

Вам нужно перебрать x, чтобы получить отдельные элементы:

for (var i = 0; i < x.length; i++) {
  var element = x[i];

  console.log(element);
}

Обязательно добавьте резервную поддержку Internet Explorer:http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

Answer 2

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

var x = document.querySelector('.classname');

Возвращает null, если ни у одного элемента нет этого класса, в противном случае первый элемент с таким именем класса. Если вы хотите, чтобы все элементы использовали classname:

var x = document.querySelectorAll('.classname');

Теперь x - это null, если класс не используется в документе, в противном случае Nodelist, содержащий все элементы с классом classname, который можно повторить, как показано Blender, В этой итерации вы можете, например, получить элементы tagName или их идентификатор. Как:

for (var i=0;i<x.lenght;(i=i+1)){
   console.log(x[i].id + ': ' + x[i].tagName);
}

document.querySelector доступно во всех современных браузерах, а также для IE версии 8 и выше.

Answer 3

Я почти всегда использую document.querySelector (который: "Возвращает первый элемент в документе, который соответствует указанной группе селекторов" ), который возвращает объект элемента и его.

Я не знаю почему, но в консоли моего Chrome я пишу:

var img = document.getElementsByClassName('image__pic');
img[0]...

img[0], несмотря на свое счастливое существование, он не генерирует никаких дополнительных атрибутов / методов для использования в окне завершения. Как будто их не было (хотя я мог бы использовать img [0] .src например)

С другой стороны:

var imgq = document.querySelector('.image__pic')

Дает мне очень полезное автозаполнение на консоли:

Что касается поддержки браузера , то это феноменально :

Он также менее сложен в использовании, потому что getElementsByClassName возвращает HTMLCollection, что само по себе является маленьким зверем.

Еще одним плюсом для querySelector является его универсальность: любой вид CSS-селектора подходит!

С отрицательной стороны, querySelector немного медленнее , но я думаю, что оно того стоит.