Кроме того, что на веб-страницах можно выбирать элементы по их id, мы можем также выбирать элементы по атрибуту class.

Задача тоже очень распространенная. Когда я пишу свои скрипты, пользоваться этим селектором приходится очень часто.

Предположим, что у нас есть следующий код на странице.

<!DOCTYPE html> <html> <head> </head> <body> <div class="elem">Содержимое блока.</div> </body> </html>

Задача простая, нужно выбрать элемент с классом class=»elem» и произвести с ним какие-то действия с помощью Javascript.

Давайте рассмотрим несколько вариантов, как это можно сделать.

Вариант 1. Воспользоваться методом Javascript getElementsByClassName.

Если не использовать никаких дополнительных библиотек, то обратиться к элементу можно с помощью метода getElementsByClassName(«имя_класса»).

Например, применительно к исходному коду, можно добавить следующие строки кода.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div class="elem">Содержимое блока.</div> <script type="text/javascript"> alert(document.getElementsByClassName("elem")[0].innerHTML); </script> </body> </html>

В итоге, если все правильно работает, мы получим всплывающее окно, в котором будет выводиться текст, который находится внутри блока div.

13-05-2013 15-00-30

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

Больше моих уроков по Javascript здесь.

Именно поэтому в конце конструкции document.getElementsByClassName("elem")[0] нужно указать, что выводится нулевой элемент массива ([0]). Счет в Javascript начинается с нуля, а не с единицы.

Но проблема использования метода getElementsByClassName в том, что этот метод не поддерживается в старых версиях браузеров.

Есть некоторые уловки, как это можно обойти, но это лишний код. Например, можно воспользоваться регулярными выражениями:

if(document.getElementsByClassName == undefined) {
     document.getElementsByClassName = function(cl) {
        var retnode = [];
        var myclass = new RegExp('\\b'+cl+'\\b');
        var elem = this.getElementsByTagName('*');
        for (var i = 0; i < elem.length; i++) {
           var classes = elem[i].className;
           if (myclass.test(classes)) {
              retnode.push(elem[i]);
           }        
}        
return retnode;
}
};

Это один из способов, как можно решить проблему. Но, честно говоря, для меня не очень приемлемо засорять страницу лишним кодом, поэтому чаще всего я пользуюсь вторым вариантом решения проблемы.

Вариант 2. С помощью библиотеки Jquery.

Использование библиотеки Jquery позволяет решить проблему выбора элементов по их атрибуту class, намного легче. Нужно воспользоваться конструкцией:

$(".elem")

Здесь elem – имя класса, присвоенное для элемента.

Нужно помнить, что для того, чтобы это работало, библиотеку Jqueryнужно сначала подключить. Добавляется она в разделе <head>, одним из способов, как это можно сделать, нужно добавить следующую строку кода:

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Чтобы библиотека могла подгрузиться должно быть соединение с Интернет.

Давайте посмотрим, как это работает на примере.

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div class="elem">Содержимоеблока.</div> <script type="text/javascript"> alert($(".elem").html()); </script> </body> </html>

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

Таким образом, вот два способа, как можно взаимодействовать с элементами, у которых установлен атрибут class. Выбирайте тот, который вам больше всего подходит, и используйте его на практике.

Больше моих уроков по Javascript здесь.