Обращение к элементам DOM

576
посл. ред. 18.03.2018

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

Встроенные свойства и методы объекта document позволяют найти любой элемент на странице и произвести с ним необходимые действия. Например, у каждого элемента есть свойство style, которое позволяет изменять CSS-стили элемента.

Элементы верхнего уровня

К элементам верхнего уровня можно обратиться напрямую, используя свойства объекта document:

  • document.documentElement - для обращения к элементу <html>.
  • document.head - для обращения к элементу <head>.
  • document.body - для обращения к элементу <body>.
<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <script>
    alert('Смена фона');
    document.body.style.background = '#599';
  </script>
</body>
</html>

К элементу страницы нельзя обратиться раньше, чем он отобразится в браузере.

DOM-структура документа создаётся по мере вывода страницы на экран. Если элемент ещё не отображён в браузере, значит его нету в дереве DOM. Соответственно, к такому элементу нельзя обратиться. При выполнении следующего скрипта ничего не произойдёт:

<html>
<head>
  <title>DOM интерфейс</title>
  <script>
    document.body.style.background = '#599';
  </script>
</head>
<body>
</body>
</html>

Это объясняется тем, что в момент выполнения скрипта элемента <body> не существует.

Выполнение скрипта должно начинаться только после вывода изменяемого элемента на экран.

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

Для обращения к любому элементу страницы в DOM интерфейсе введены специальные поисковые методы. Поиск может осуществляется по разным параметрам элементов, поэтому с помощью них можно найти любой элемент.

getElementById()

Объект document имеет встроенный метод getElementById(). Он выполняет поиск элемента по его уникальному идентификатору id.

document.getElementById(идентификатор)
идентификатор
Строка, содержащая уникальный идентификатор.
<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p>Lorem ipsum dolor...</p>
  <p id="last_paragraph">Deleniti sit veniam...</p>
</body>
</html>

<script>
  var elem = document.getElementById('last_paragraph');
  elem.style.background = '#599';  
</script>

Lorem ipsum dolor...

Deleniti sit veniam...

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

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p id="first_paragraph">Lorem ipsum dolor...</p>
  <p id="last_paragraph">Deleniti sit veniam...</p>
</body>
</html>

<script>
  window['first_paragraph'].style.background = 'gray'; /* или */
  last_paragraph.style.background = '#599';  
</script>

Lorem ipsum dolor...

Deleniti sit veniam...

Оперирование глобальными переменными может привести к ошибкам в программе. Более правильным является использование document.getElementById().

Данный метод работает очень быстро, так как браузер сам создаёт ссылки на элементы с атрибутом id.

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

getElementsByName()

Объект document имеет встроенный метод getElementsByName(). Поиск ведётся по всем элементам страницы с заданным атрибутом name. Метод возвращает список всех элементов, чей атрибут name удовлетворяет запросу.

document.getElementsByName(имя)
имя
Строка, содержащая имя элемента (атрибут name).
<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p name="paragraph">Lorem ipsum dolor...</p>
  <p name="paragraph">Deleniti sit veniam...</p>
</body>
</html>

<script>
  var paragraphs = document.getElementsByName('paragraph');
  paragraphs[0].style.background = 'lime';
  paragraphs[1].style.background = 'olive';
</script>

Lorem ipsum dolor...

Deleniti sit veniam...

Результирующий список автоматически обновляется при изменении содержимого страницы.

getElementsByTagName()

Для любого элемента страницы доступен метод getElementsByTagName(). Данный метод выполняет поиск по тегу. При его вызове поиск ведётся внутри данного элемента. Метод возвращает список всех элементов, удовлетворяющих запросу.

element.getElementsByTagName(тег)
тег
Строка, содержащая имя тега.

В поисковом запросе регистр букв не имеет значения. Если в запросе передать звёздочку *, то метод вернёт всех потомков данного элемента.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p>Lorem ipsum dolor...</p>
  <p>Deleniti sit veniam...</p>
</body>
</html>

<script>
  var paragraphs = document.body.getElementsByTagName('p');
  paragraphs[0].style.background = 'lime';
</script>

Lorem ipsum dolor...

Deleniti sit veniam...

Результирующий список автоматически обновляется при изменении содержимого страницы.

getElementsByClassName()

Для любого элемента страницы доступен метод getElementsByClassName(). Данный метод выполняет поиск по глобальному атрибуту class. При его вызове поиск ведётся внутри данного элемента. Метод возвращает список всех элементов с указанным классом.

element.getElementsByClassName(класс)
класс
Строка, содержащая имя класса.
<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p class="first paragraph">Lorem ipsum dolor...</p>
  <p class="last paragraph">Deleniti sit veniam...</p>
</body>
</html>

<script>
  var paragraphs = document.body.getElementsByClassName('paragraph');
  paragraphs[0].style.background = 'lime';
  paragraphs[1].style.background = 'olive';
</script>

Lorem ipsum dolor...

Deleniti sit veniam...

Результирующий список автоматически обновляется при изменении содержимого страницы.

querySelectorAll()

Для любого элемента страницы доступен метод querySelectorAll(). Метод возвращает список всех элементов, удовлетворяющих заданному CSS-селектору. При его вызове поиск ведётся внутри данного элемента.

element.querySelectorAll(селектор)
селектор
Строка, содержащая CSS-селектор.
<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p>Lorem ipsum dolor...</p>
  <p>Deleniti sit veniam...</p>
</body>
</html>

<script>
  var first = document.body.querySelectorAll('p:first-child');
  first[0].style.background = 'lime';
</script>

Lorem ipsum dolor...

Deleniti sit veniam...

Этот метод является самым распространённым, так как им можно заменить любой из вышеперечисленных методов.

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

querySelector()

Для любого элемента страницы доступен метод querySelector(). Метод возвращает первый элемент, удовлетворяющий заданному CSS-селектору. При его вызове поиск ведётся внутри данного элемента.

element.querySelector(селектор)
селектор
Строка, содержащая CSS-селектор.

Основное преимущество данного метода относительно querySelectorAll() в том, что он останавливается при первом найденном совпадении. Это позволяет увеличить производительность. Например, если заведомо известно, что результат будет состоять из одного элемента, то лучше воспользоваться данным методом.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p>Lorem ipsum dolor...</p>
  <p>Deleniti sit veniam...</p>
</body>
</html>

<script>
  var first = document.body.querySelector('p:first-child');
  first.style.background = 'lime';
</script>

Lorem ipsum dolor...

Deleniti sit veniam...

closest()

Для любого элемента страницы доступен метод closest(). Как и querySelector(), метод возвращает первый элемент, удовлетворяющий заданному CSS-селектору. Но поиск ведётся не внутри данного элемента, а наоборот - вверх по иерархии DOM. При этом сам элемент, на котором вызван метод, тоже участвует в проверке.

element.closest(селектор)
селектор
Строка, содержащая CSS-селектор.

Принцип работы метода таков:

  • Сначала проверяется сам элемент, на котором вызывается метод.
  • Далее проверяется родитель данного элемента. Потом родитель родителя и так далее.
  • Метод останавливается на первом найденном элементе и возвращает его.
<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <ul class="story">
    <li class="story">
      <p>Lorem ipsum dolor...</p>
    </li>
  </ul>
</body>
</html>

<script>
  var paragraph = document.getElementsByTagName('p')[0];
  alert(paragraph.closest('.story')); /* LI элемент */
</script>