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

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

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

Содержимое блока .

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

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

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

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

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

Содержимое блока. alert(document.getElementsByClassName("elem").innerHTML);

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

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

Именно поэтому в конце конструкции document.getElementsByClassName("elem") нужно указать, что выводится нулевой элемент массива (). Счет в 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нужно сначала подключить. Добавляется она в разделе , одним из способов, как это можно сделать, нужно добавить следующую строку кода:

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

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

Содержимое блока . alert($(".elem").html());

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

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

В прошлом уроке был рассмотрен метод getElementsByTagName , который возвращает массив (группу ) элементов страницы по имени тега.

Здесь продолжается практическая работа с javascript и будет рассмотрен метод getElementById , который возвращает ссылку на элемент , ориентируясь на его уникальный идентификатор id .

Метод getElementById, как и getElementsByTagName является методом объекта document .

Название метода переводится буквально: получить элемент по id .

Любому элементу (тегу ) веб-документа может быть назначен свой id -идентификатор, благодаря которому элемент становиться уникальным и к нему можно получить доступ для работы именно с ним.

Обратите внимани е: в имени метода в конце слова Element нет буквы s (в отличие от метода getElementsByTagName ). Это сделано для удобства и говорит о том, что метод служит для выбора элемента .

/* Заносим в переменную unique ссылку на тег img по id-идентификатору penguin */

Немного пояснений для фрагмента кода выше...

• тег img (изображени е) имеет id -идентификатор penguin ;
• при помощи метода getElementById по идентификатору penguin выбирается именно этот тег img ;
• в переменную unique заносится ссылка на выбранный тег;
• далее можно работать с тегом, как с объектом через переменную unique , подобно тому, как проводилась работа с объектом Date через произвольную переменную.

После получения доступа к элементу (тегу ) веб-страницы по id -идентификатору при помощи метода getElementById , мы уже работаем с ним, как с Объекто м, а значит, получаем доступ к атрибутам тега, как к свойствам Объекта.

Следовательно, значения атрибутов являются уже значениями свойств.

Продолжим работать с предыдущим примером...

"Задумчивый пингвин" >

var unique = document .getElementById ("penguin" );

alert (unique .alt ); /* Выводим на экран значение свойства alt объекта unique (значение атрибута alt тега img ) */

Пояснения для примера кода...

• тег img (изображени е) имеет определенные атрибуты : src - адрес файла, width и height - ширина и высота картинки, alt - альтернативный текст;
• получив доступ к тегу при помощи метода getElementById , как к объекту , мы получаем доступ к атрибутам тега, как к свойствам объекта ;
• А значения атрибутов теперь уже являются значениями свойств ;
• в javascript доступ к свойствам объекта осуществляется через точку. Далее выводим alt - альтернативный текст тега img при помощи метода alert на экран.

Надеюсь, что Вы не запутались во всем этом. Нужно понимать одновременно, что происходит на программном уровне javascript и на уровне разметки документа.

Тег img - это Объект unique ;

Атрибуты тега width и alt - это свойства Объекта;

Значения атрибутов "128" и "Задумчивый пингвин" - это значения свойств;

// Вот, как это выглядит с позиции javascript:

var unique = {

width : "128" ,

alt : "Задумчивый пингвин"

}

Вот так работает метод getElementById , возвращающий ссылку на любой элемент (тег ) веб-стрницы, если тот имеет уникальный идентификатор id . Далее проводится работа с этим элементом на уровне javascript уже как с объектом ...

Следует учесть что : как и в предыдущем уроке , здесь - при работе с методом getElementById строку вызова скрипта следует размещать в конце html -документа

В jQuery есть и другие возможности выбора элементов веб-документа.

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

Поиск по id

Если в коде страницы элементу задан атрибут id , то элемент можно найти по id. Это самый простой способ. Поиск элемента производится с помощью метода getElementById() глобального объекта document.

document.getElementById (id)

Параметры:

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

Создадим страницу, добавим на неё элемент и зададим ему id , а в скрипте найдём этот элемент:

HTML код:

JavaScript:

var block = document.getElementById("block"); console.log(block);

Найденный элемент мы присвоили переменной block и вывели переменную в консоль. Откройте консоль браузера, в ней должен быть указан элемент.

Так как посик по id - это самый простой и удобный способ, часто используют именно его. Если с каким-то элементом нужно работать в скрипте, то в коде страницы этому элементу устанавливают атрибут id , даже если он не был установлен ранее. И находят элемент по id.

Поиск по классу

Метод getElementsByClassName() позволяет найти все элементы, относящиеся к определённому классу.

document.getElementsByClassName (класс)

Параметры:

класс - класс элементов, которые нужно найти

Метод возвращает псевдомассив, содержащий найденные элементы. Псевдомассивом он называется потому, что для него не работают многие методы массивов. Но главное свойство остаётся - можно обратиться к любому элементу массива. Даже если найден только один элемент, он всё равно находится в массиве.

Добавим на страницу элементы и зададим им класс. Часть элементов разместим внутри блока, который мы создали ранее. Другую часть создадим вне блока. Смысл этого будет понятен чуть позднее. Теперь страница будет выглядеть так:

HTML код:

JavaScript:

Теперь найдены только те элементы, которые расположены в блоке.

Поиск по тэгу

Метод getElementsByTagName() находит все элементы с конкретным тэгом. Он также возвращает псевдомассив с найденными элементами.

document.getElementsByTagName (тэг)

Параметры:

тэг - тэг элементов, которые нужно найти

Найдём все тэги p , которые есть на странице:

var p = document.getElementsByTagName("p"); console.log(p);

Этот метод можно также применять не ко всему документу, а к конкретному элементу. Найдите все тэги p , находящиеся в блоке.

Поиск по селектору

Существуют методы querySelector() и querySelectorAll() , которые находят элементы соответсвующие определённому селектору. То есть, будут найдены элементы, к которым был бы применён стиль, если бы он был указан такому селектору. При этом, наличие такого селектора в стиле страницы совсем не обязательно. Эти методы никак не связаны с CSS. Метод querySelectorAll() находит все элементы, соответствующие селектору. А метод querySelector() находит один элемент, который является первым в коде страницы. Эти методы могут заменить все способы поиска элементов, рассмотренные ранее, ведь есть селектор по id, селектор по тэгу и многие другие.

document.querySelector (селектор)

document.querySelectorAll (селектор)

Селекторы пишутся точно так же, как в CSS, только не забывайте ставить кавычки.

Добавим на страницу список и найдём его по селектору. Мы ищем только один элемент и мы точно знаем, что он будет первый, потому что он один на странице. Поэтому в данном случае удобнее использовать метод querySelector() . Но при использовании этого метода нужно учитывать, что в дальнейшем на страницу могут быть добавлены такие же элементы. Впрочем, это касается большинства методов.

HTML код:

Данные методы также могут искать элементы не во всём документе, а внутри конеретного элемента.

В примере мы использовали только селекторы по тэгу. Попробуйте найти элементы страницы с использованием других селекторов.

Соседние элементы

Для найденного элемента можно найти соседей. Каждый элемент является объектом, и соседние элементы можно получить через свойства этого объекта. Свойство previousElementSibling содкржит предыдущий элемент, а свойство nextElementSibling содержит следующий элемент.

элемент.previousElementSibling

элемент.nextElementSibling

Найдём элемент, следующий за блоком:

Дочерние элементы

Свойство children содержит массив с дочерними элементами.

элемент.children

Найдём дочерние элементы блока.

Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById , getElementsByTagName и getElementsByName .

Более мощные способы поиска предлагают javascript-библиотеки.

Поиск по id

Самый удобный способ найти элемент в DOM - это получить его по id . Для этого используется вызов document.getElementById(id)

Например, следующий код изменит цвет текста на голубой в div "е c id="dataKeeper" :

Document.getElementById("dataKeeper").style.color = "blue"

Поиск по тегу

Следующий способ - это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag) . Она возвращает массив из элементов, имеющих такой тег.

Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li:

Document.getElementsByTagName("LI")

Что интересно, getElementsByTagName можно вызывать не только для document , но и вообще для любого элемента, у которого есть тег (не текстового).

При этом будут найдены только те объекты, которые находятся под этим элементом.

Например, следующий вызов получает список элементов LI , находящихся внутри первого тега div:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Получить всех потомков

Вызов elem.getElementsByTagName("*") вернет список из всех детей узла elem в порядке их обхода .

Например, на таком DOM:

Такой код:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i because "M" and "m" are different for the purposes of this method.

Elements not in the document are not searched by getElementById() . When creating an element and assigning it an ID, you have to insert the element into the document tree with or a similar method before you can access it with getElementById() :

Var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el will be null!

Non-HTML documents . The DOM implementation must have information that says which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document"s DTD. The id attribute is defined to be of ID type in the common cases of XHTML , XUL , and other. Implementations that do not know whether attributes are of type ID or not are expected to return null .

Specification Specification Status Comment

Document Object Model (DOM) Level 1 Specification	Obsolete	Initial definition for the interface
Document Object Model (DOM) Level 2 Core Specification The definition of "getElementById" in that specification.	Obsolete	Supersede DOM 1
Document Object Model (DOM) Level 3 Core Specification The definition of "getElementById" in that specification.	Obsolete	Supersede DOM 2
DOM The definition of "getElementById" in that specification.	Living Standard	Intend to supersede DOM 3

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet getElementById

Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5.5	Opera Full support 7	Safari Full support 1	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android ?

Legend Full support Full support Compatibility unknown Compatibility unknown Алгоритм