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

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

Поиск по id

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

document.getElementById(id)

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

HTML код:

<div id="block">Блок с id</div>

JavaScript:

let block = document.getElementById('block');
console.log(block);

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

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

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

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

document.getElementsByClassName(класс)

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

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

HTML код:

<div id="block">Блок с id
  <p class="art">Абзац в блоке</p>
  <p class="art">Ещё один абзац в блоке</p>
</div>
<p class="art">Отдельный абзац</p>

JavaScript:

let art = document.getElementsByClassName('art');
console.log(art);
console.log(art[0]);

В строке 17 мы вывели в консоль весь массив, чтобы посмотреть, сколько в нём элементов, а в строке 18 мы обратились к конкретному элементу.

Любой метод, рассматриваемый в данной теме, можно применить не только ко всему документу, но и к конкретному элементу. Например, к блоку, который есть на нашей странице. При этом будут найдены не все элементы, а только те, которые находятся внутри блока. Найдём элементы класса art, находящиеся в блоке:

let artIn = block.getElementsByClassName('art');
console.log(artIn);

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

Поиск по тэгу

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

document.getElementsByTagName(тэг)

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

let p = document.getElementsByTagName('p');
console.log(p);

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

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

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

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

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

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

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

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

HTML код:

<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>

JavaScript:

let element = document.querySelector('ul');
console.log(element);

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

let li = document.querySelectorAll('ul li');
console.log(li);

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

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

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

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

элемент.previousElementSibling

элемент.nextElementSibling

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

let blockPre = block.nextElementSibling;
console.log(blockPre);

Свойства previousSibling и nextSibling тоже содержат соседей, но они учитывают не только элементы, но и другие узлы.

Перед первым абзацем идёт текст "Блок с id". Найдём этот текстовый узел. Абзац содержится в нескольких псевдомассивах, созданных нами в примерах, в том числе, в массиве art. Обратимся к нему через этот массив:

let text = art[0].previousSibling;
console.log(text);

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

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

элемент.children

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

let blockIn = block.children;
console.log(blockIn);

Свойство childNodes содержит не только элементы, но и другие узлы. Найдём все узлы, которые находятся в блоке:

let blockAll = block.childNodes;
console.log(blockAll);