базовый курс

ГРУППА КУРСА

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

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

Поиск по id

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

document.getElementById (id)

Параметры:

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

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

HTML код:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
<div id="block">Блок с id</div>

JavaScript:

10
11
var block = document.getElementById('block');
console.log(block);

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

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

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

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

document.getElementsByClassName (класс)

Параметры:

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

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

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

HTML код:

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

JavaScript:

16
17
18
var art=document.getElementsByClassName('art');
console.log(art);
console.log(art[0]);

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

Метод getElementsByClassName() можно применить не только ко всему документу, но и к конкретному элементу, например, к блоку, который есть на нашей странице. При этом будут найдены не все элементы определённого класса, а только те, которые находятся внутри блока. Найдём элементы класса art, находящиеся в блоке. Блок находится в переменной block. Через неё обратимся к блоку и произведём поиск элементов:

19
20
var artin = block.getElementsByClassName('art');
console.log(artin);

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

Поиск по тэгу

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

document.getElementsByTagName (тэг)

Параметры:

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

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

21
22
var p = document.getElementsByTagName('p');
console.log(p);

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

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

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

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

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

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

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

HTML код:

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

JavaScript:

27
28
var element = document.querySelector('ul');
console.log(element);

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

29
30
var li = document.querySelectorAll('ul li');
console.log(li);

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

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

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

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

элемент.previousElementSibling

элемент.nextElementSibling

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

31
32
var blockpre = block.nextElementSibling;
console.log(blockpre);

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

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

33
34
var text = art[0].previousSibling;
console.log(text);

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

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

элемент.children

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

35
36
var blockin = block.children;
console.log(blockin);

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

37
38
var blockall = block.childNodes;
console.log(blockall);