Как получить элемент по имени класса

Question

Я хочу знать, есть ли способ getElementByClassName("classname").innerHTML функционировать или что-то эквивалентное getElementById("ClassName").innerHTML.

Answer 1

Вам не хватает s в названии вашей функции. getElementsByTagName возвращает коллекцию элементов, элементов, которые вам нужно перебрать:

var elements = document.getElementsByClassName("classname");

for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = 'foo';
}

IE8 и ниже не поддерживают getElementsByClassName, поэтому вам придется найти полифилл или использовать querySelectorAll (IE8).

Answer 2

Я предлагаю вам использовать JQuery, где вы можете напрямую использовать селекторы CSS (например, .yourclass), чтобы найти все элементы данного класса:

$('.yourclass').doWhatYouWant();

Если вы предпочитаете не использовать JQuery, вы можете использовать простой Javascript:

document.getElementsByClassName('my-fancy-class')

Но будьте осторожны с проблемой несовместимости IE8. В качестве альтернативы (медленнее, но вы можете создавать более сложные CSS-селекторы) вы можете использовать:

document.querySelector('.cssSelector')

, который вернет один элемент , отвечающий на ваш селектор CSS, или

document.querySelectorAll('.cssSelector')

Который вместо этого возвратит несколько элементов.

Answer 3

Если вы используете jQuery, вы можете получить его так же, как в селекторе CSS, так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

затем ...

$('.classname').each(function() {
    // get html
    $(this).html();
    // set html
    $(this).html('something');
});

Обратите внимание, что у вас также есть удобный способ управленияinnerHTML.

Answer 4

Вы можете сделать это, используя jquery

$('.className').html();

http://api.jquery.com/html/