Просмотров: 9 771

Javascript и Jquery выборка элемента по классу (атрибут class).

Кроме того, что на веб-страницах можно выбирать элементы по их 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 будет массив элементов т.к. элементов с одинаковым классом на странице может быть несколько.

Именно поэтому в конце конструкции 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 и jQuery, которые могут быть полезными для вас:

07099997_cover-pdf-kniga-n-prohorenok-html-javascript-php-i-mysql-dzhentlmenskiy-nabor-web-mastera   12367630_cover-pdf-kniga-elizabet-robson-izuchaem-programmirovanie-na-javascript-9523650   01687985_cover-pdf-kniga-petr-tashkov-veb-mastering-na-100-html-css-javascript-php-cms-ajax-raskrutka