Базовый курс JavaScript 10. Доступ к элементам в DOM. Доступ к элементам

В прогрессе

Урок 10 из 18

В прогрессе

← Previous

10. Доступ к элементам в DOM. Доступ к элементам

ДОСТУП К ЭЛЕМЕНТАМ В DOM

Поиск HTML элементов

Часто в JavaScript необходимо проводить определенные манипуляции с HTML элементами.

Чтобы это сделать, сначала нужно найти требуемый элемент. Найти HTML элемент можно несколькими способами:

по идентификатору id
по имени тега
по имени класса
по селекторам CSS
по наборам объектов HTML

Поиск HTML элемента по идентификатору

Самый простой способ найти HTML элемент в DOM — это использовать его идентификатор id.

В следующем примере мы ищем элемент с id=»intro»:


var myElement = document.getElementById("intro");

Если элемент будет найден, то он будет возвращен в виде объекта (в переменную myElement).

Если элемент не будет найден, то в переменная myElement будет содержать значение null.

Поиск HTML элемента по имени тега

В следующем примере мы ищем все элементы <p>:


var x = document.getElementsByTagName("p");

В следующем примере сначала происходит поиск элемента с id=»main», а затем всех элементов <p> внутри «main»:


var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Поиск HTML элемента по имени класса

Если нужно найти все HTML элементы с одним и тем же именем класса, то используют метод getElementsByClassName().

В следующем примере возвращается список всех элементов с атрибутом class=»intro»:


var x = document.getElementsByClassName("intro");

Внимание! Поиск элементов по имени класса не работает в Internet Explorer 8 и более ранних версиях.

Поиск HTML элемента по CSS селекторам

Если нужно найти все HTML элементы, подходящие по заданному CSS селектору (id, имена классов, типы, атрибуты, значения атрибутов и т.п.), используется метод querySelectorAll().

В следующем примере возвращается список всех элементов <p> с атрибутом class=»intro»:


var x = document.querySelectorAll("p.intro");

Внимание! Метод querySelectorAll() не работает в Internet Explorer 8 и более ранних версиях.

Поиск HTML элемента по наборам HTML объектов

В следующем примере производится поиск элемента формы с атрибутом id=»frm1″ в наборе объектов forms, и отображаются все значения элементов:


var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Также доступны следующие HTML объекты (и наборы объектов):

document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title

Атрибуты

Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.

Конечно, здесь речь именно об узлах-элементах, не о текстовых узлах или комментариях.

Доступ к атрибутам осуществляется при помощи стандартных методов:

elem.hasAttribute(name) – проверяет наличие атрибута
elem.getAttribute(name) – получает значение атрибута
elem.setAttribute(name, value) – устанавливает атрибут
elem.removeAttribute(name) – удаляет атрибут

Эти методы работают со значением, которое находится в HTML.

Также все атрибуты элемента можно получить с помощью свойства elem.attributes, которое содержит псевдо-массив объектов типа Attr.

В отличие от свойств, атрибуты:

Всегда являются строками.
Их имя нечувствительно к регистру (ведь это HTML)
Видны в innerHTML (за исключением старых IE)

Классы в виде строки: className

Атрибуту "class" соответствует свойство className.

Так как слово "class" является зарезервированным словом в JavaScript, то при проектировании DOM решили, что соответствующее свойство будет называться className.

Например:

 
 
<body class="main page">
  <script>
    // прочитать класс элемента
    alert( document.body.className ); // main page

    // поменять класс элемента
    document.body.className = "class1 class2";
  </script>
</body>

Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту for (<label for="...">) соответствует свойство с названием htmlFor.

Классы в виде объекта: classList

Атрибут class – уникален. Ему соответствует аж целых два свойства!

Работать с классами как со строкой неудобно. Поэтому, кроме className, в современных браузерах есть свойство classList.

Свойство classList – это объект для работы с классами.

Оно поддерживается в IE начиная с IE10, но его можно эмулировать в IE8+, подключив мини-библиотеку classList.js.

Методы classList:

elem.classList.contains("class") – возвращает true/false, в зависимости от того, есть ли у элемента класс class.
elem.classList.add/remove("class") – добавляет/удаляет класс class
elem.classList.toggle("class") – если класса class нет, добавляет его, если есть – удаляет.

Кроме того, можно перебрать классы через for, так как classList – это псевдо-массив.

Задание

Дан следующий HTML:

<div id="block">


	<p>1</p>

	<p>2</p>

</div>

Получите ссылку на первый абзац из дива с id, равным block.

2.Дан следующий HTML: