Как обратиться к элементу html через js

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

Условно можно сказать что обращаться к элементам в DOM можно двумя различными способами:

1. Использовать последовательное перемещение по объектной структуре до нахождения необходимого элемента.
2. Использовать прямое обращение к элементу по его идентификатору или имени тэга.

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

Последовательное перемещение

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

Красной стрелкой и черными кружками с цифрами отмечено как последовательно будет выглядеть перемещение по объектной структуре:

Разберем процесс перемещения подробнее:

1. Обращаемся к объекту document, в котором находится DOM. Код на данном шаге имеет вид: document.
2. Обращаемся к корневому узлу (т.е. тэгу ) который находится внутри объекта document. Код на данном шаге имеет вид: document.documentElement.
3. Обращаемся ко второму потомку (так как в коде страницы body располагается после head) корневого узла. Код на данном этапе будет иметь вид: document.documentElement.childNodes[1]. Вы также можете напрямую обратится к body используя следующий код (далее будем полагать что Вы выбрали этот вариант): document.body.
4. Обращаемся ко второму потомку body (элемент p задан в коде после h1). Код на данном этапе будет иметь вид: document.body.childNodes[1].
5. Обращаемся к текстовому узлу который является первым потомком p и узнаем значение его свойства. Код на данном этапе будет иметь вид: document.body.childNodes[1].childNodes[0].nodeValue.

//Выведем содержимое абзаца на страницу document.write(document.body.childNodes[1].childNodes[0].nodeValue);

Прямое обращение к элементу

С помощью метода getElementById Вы можете напрямую обращаться к элементам по их идентификатору (атрибут id), а с помощью свойства innerHTML можно быстро считывать их текстовое содержимое.

//Выведем содержимое второго абзаца на страницу document.write(document.getElementById("par").innerHTML);

Сделайте сами

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

 
Я обычный абзац.
 
Я еще один обычный абзац.
 
Выведите это содержимое на страницу





 
 
 

Wisdomweb.ru © 2023.
Все права защищены. Любое использование материалов данного сайта без разрешения администрации запрещено.
Онлайн учебники по HTML, HTML5, CSS, JavaScript, AJAX, HDOM, jQuery.

Обращение к элементу в JavaScript

В jQuery обращение к элементу происходит с помощью $(‘#id’).onEventName()= <> или $(‘.class’).onEventName()= <> , а как происходит обращение к элементу в JavaScript?

Отслеживать
задан 12 окт 2020 в 12:06
ProgrammerOfParadoxThings ProgrammerOfParadoxThings
39 9 9 бронзовых знаков

Запомните Все не декларация функции () — это ее вызов. Так вот $(‘#id’).onEventName() это вызов функции и присвоить значение результату работы функции не получится. У вас идет запрос $(‘#id’) почитайте jquery

12 окт 2020 в 12:18
Как интересно, изучать жквери, не разобравшись с основами.
12 окт 2020 в 15:15

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Также для прослушивания событий можно использовать onclick(ev) , onmouseenter(ev) и тд.

Отслеживать
ответ дан 12 окт 2020 в 13:04
2,398 4 4 золотых знака 14 14 серебряных знаков 32 32 бронзовых знака

Прочитайте про селекторы JQuery

Выберите элемент с идентификатором intro:

Выделите все элементы с классом «intro»:

А нативно на JS можно обратиться

Отслеживать
ответ дан 12 окт 2020 в 12:23
Aziz Umarov Aziz Umarov
22.5k 2 2 золотых знака 10 10 серебряных знаков 33 33 бронзовых знака
вопрос был про нативный эквивалент
12 окт 2020 в 12:43
@teran добавил в ответ
12 окт 2020 в 13:16

Проблема (или, преимущество) в том, что jQuery оставляет все необходимые циклы за кулисами. Что с одним элементом, что с нескольким — зачастую код выглядит одинаково. А на стандартном JS нужно делать переборы «вручную».

• document.querySelector(«.class») — возвращает первый соответствующий элемент на странице, или null , если ничего не найдет.
  * на jQuery, обращение к первому элементу: $(«.class»).eq(0)
• document.querySelectorAll(«.class») — всегда возвращает NodeList коллекцию всех найденных элементов. К каждому элементу из коллекции можно обращаться через его номер. Если элементов не найдено, вернет коллекцию нулевой длины ( length: 0 )

И querySelector -ы, и jQuery-функция $() помимо классов, поддерживают любой стандартный CSS-селектор

$("div").addClass("blue"); let div = document.querySelectorAll("div"); for (let i = 0; i < div.length; i++) < div[i].classList.add("yellow"); >// div[0].classList.add("yellow"); // первый // div[1].classList.add("yellow"); // второй. // . document.querySelector("div").style.backgroundColor = "#2ad"; // обращение к первому элементу

div < display: inline-block; width: 80px; height: 80px; margin: 4px; font-size: 50px; >.blue < background-color: #169; >.yellow

 
1
 
2
 
3
 
4
 
5

Поиск: getElement*, querySelector*

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

Для этого в DOM есть дополнительные методы поиска.

document.getElementById или просто id

Если у элемента есть атрибут id , то мы можем получить его вызовом document.getElementById(id) , где бы он ни находился.

Также есть глобальная переменная с именем, указанным в id :

…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:

Пожалуйста, не используйте такие глобальные переменные для доступа к элементам

Это поведение соответствует стандарту, но поддерживается в основном для совместимости, как осколок далёкого прошлого.

Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.

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

В реальной жизни лучше использовать document.getElementById .

Значение id должно быть уникальным

Значение id должно быть уникальным. В документе может быть только один элемент с данным id .

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

Только document.getElementById , а не anyElem.getElementById

Метод getElementById можно вызвать только для объекта document . Он осуществляет поиск по id по всему документу.

querySelectorAll

Самый универсальный метод поиска – это elem.querySelectorAll(css) , он возвращает все элементы внутри elem , удовлетворяющие данному CSS-селектору.

Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.

Псевдоклассы тоже работают

Псевдоклассы в CSS-селекторе, в частности :hover и :active , также поддерживаются. Например, document.querySelectorAll(‘:hover’) вернёт коллекцию (в порядке вложенности: от внешнего к внутреннему) из текущих элементов под курсором мыши.

querySelector

Метод elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.

Иначе говоря, результат такой же, как при вызове elem.querySelectorAll(css)[0] , но он сначала найдёт все элементы, а потом возьмёт первый, в то время как elem.querySelector найдёт только первый и остановится. Это быстрее, кроме того, его короче писать.

matches

Предыдущие методы искали по DOM.

Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false .

Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.

. .  

closest

Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.

Метод elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск.

Другими словами, метод closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null , если такой элемент не найден.

getElementsBy*

Существуют также другие методы поиска элементов по тегу, классу и так далее.

На данный момент, они скорее исторические, так как querySelector более чем эффективен.

Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.

• elem.getElementsByTagName(tag) ищет элементы с данным тегом и возвращает их коллекцию. Передав «*» вместо тега, можно получить всех потомков.
• elem.getElementsByClassName(className) возвращает элементы, которые имеют данный CSS-класс.
• document.getElementsByName(name) возвращает элементы с заданным атрибутом name . Очень редко используется.

// получить все элементы div в документе let divs = document.getElementsByTagName('div');

Давайте найдём все input в таблице:

 
Ваш возраст:
 
  младше 18  от 18 до 50  старше 60 
 
 
 let inputs = table.getElementsByTagName('input'); for (let input of inputs) 

Не забываем про букву «s» !

Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву «s» . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .

Буква «s» отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому «s» обязательна.

Возвращает коллекцию, а не элемент!

Другая распространённая ошибка – написать:

// не работает document.getElementsByTagName('input').value = 5;

Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.

Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:

// работает (если есть input) document.getElementsByTagName('input')[0].value = 5;

Ищем элементы с классом .article :

 
Long article
 
  

Живые коллекции

Все методы «getElementsBy*» возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.

В приведённом ниже примере есть два скрипта.

1. Первый создаёт ссылку на коллекцию . На этот момент её длина равна 1 .
2. Второй скрипт запускается после того, как браузер встречает ещё один , теперь её длина – 2 .

First div
  
Second div
  

Напротив, querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.

Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную 1 :

First div
  
Second div
  

Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе.

Итого

Есть 6 основных методов поиска элементов в DOM:

Метод	Ищет по.	Ищет внутри элемента?	Возвращает живую коллекцию?
querySelector	CSS-selector	✔	—
querySelectorAll	CSS-selector	✔	—
getElementById	id	—	—
getElementsByName	name	—	✔
getElementsByTagName	tag or ‘*’	✔	✔
getElementsByClassName	class	✔	✔

Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll , но и методы getElement(s)By* могут быть полезны в отдельных случаях, а также встречаются в старом коде.

• Есть метод elem.matches(css) , который проверяет, удовлетворяет ли элемент CSS-селектору.
• Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.

И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:

• elemA.contains(elemB) вернёт true , если elemB находится внутри elemA ( elemB потомок elemA ) или когда elemA==elemB .

Задачи

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

важность: 4

Вот документ с таблицей и формой.

1. Таблицу с id=»age-table» .
2. Все элементы label внутри этой таблицы (их три).
3. Первый td в этой таблице (со словом «Age»).
4. Форму form с именем name=»search» .
5. Первый input в этой форме.
6. Последний input в этой форме.

Откройте страницу table.html в отдельном окне и используйте для этого браузерные инструменты разработчика.

Есть много путей как это сделать.

// 1. Таблица с `id="age-table"`. let table = document.getElementById('age-table') // 2. Все label в этой таблице table.getElementsByTagName('label') // или document.querySelectorAll('#age-table label') // 3. Первый td в этой таблице table.rows[0].cells[0] // или table.getElementsByTagName('td')[0] // или table.querySelector('td') // 4. Форма с name="search" // предполагаем, что есть только один элемент с таким name в документе let form = document.getElementsByName('search')[0] // или, именно форма: document.querySelector('form[name="search"]') // 5. Первый input в этой форме form.getElementsByTagName('input')[0] // или form.querySelector('input') // 6. Последний input в этой форме let inputs = form.querySelectorAll('input') // найти все input inputs[inputs.length-1] // взять последний

Методы JavaScript для поиска элементов на странице

В этой статье мы изучим методы JavaScript для поиска элементов в HTML-документе: querySelector , querySelectorAll , getElementById и другие. Кроме них рассмотрим ещё следующие: matches , contains и closest . Первые два из них могут быть полезны для выполнения различных проверок, а третий использоваться, когда нужно получить родительский элемент по CSS-селектору.

Методы для выбора HTML-элементов

Работа с веб-страницей так или иначе связана с манипулированием HTML-элементами. Но перед тем, как над ними выполнить некоторые действия (например, добавить стили), их сначала нужно получить.

Выбор элементов в основном выполняется с помощью этих методов:

Они позволяют выполнить поиск HTML-элементов по CSS-селектору . При этом querySelector выбирает один элемент, а querySelectorAll – все.

Кроме них имеются ещё:

• getElementById ;
• getElementsByClassName ;
• getElementsByTagName ;
• getElementsByName .

Но они сейчас применяются довольно редко. В основном используется либо querySelector , либо querySelectorAll .

querySelectorAll

Метод querySelectorAll применяется для выбора всех HTML-элементов , подходящих под указанный CSS-селектор. Он позволяет искать элементы как по всей странице, так и внутри определённого элемента:

JavaScript

// выберем элементы по классу item во всем документе const items = document.querySelectorAll('.item'); // выберем .btn внутри #slider const buttons = document.querySelector('#slider').querySelectorAll('.btn');

Здесь на первой строчке мы нашли все элементы с классом item . На следующей строчке мы сначала выбрали элемент с id=»slider» , а затем в нём все HTML-элементы с классом btn .

Метод querySelectorAll как вы уже догадались принимает в качестве аргумента CSS-селектор в формате строки, который соответственно и определяет искомые элементы. В качестве результата querySelectorAll возвращает объект класса NodeList . Он содержит все найденные элементы:

Полученный набор представляет собой статическую коллекцию HTML-элементов. Статической она называется потому, что она не изменяется. Например, вы удалили элемент из HTML-документа, а в ней как был этот элемент, так он и остался. Чтобы обновить набор, querySelectorAll нужно вызвать заново:

Узнать количество найденных элементов можно с помощью свойства length :

JavaScript

// выберем элементы с атрибутом type="submit" const submits = document.querySelectorAll('[type="submit"]'); // получим количество найденных элементов const countSubmits = submits.length;

Обращение к определённому HTML-элементу коллекции выполняется также как к элементу массива, то есть по индексу. Индексы начинаются с 0 :

JavaScript

// получим первый элемент const elFirst = submits[0]; // получим второй элемент const elSecond = submits[1];

Здесь в качестве результата мы получаем HTML-элемент или undefined , если элемента с таким индексом в наборе NodeList нет.

Перебор коллекции HTML-элементов

Перебор NodeList обычно осуществляется с помощью forEach :

JavaScript

// получим все 
на странице const elsP = document.querySelectorAll('p'); // переберём выбранные элементы elsP.forEach((el) => { // установим каждому элементу background-color="yellow" el.style.backgroundColor = 'yellow'; });

Также перебрать набор выбранных элементов можно с помощью цикла for или for. of :

JavaScript

// получим все элементы p на странице const elsP = document.querySelectorAll('p'); // for for (let i = 0, length = elsP.length; i < length; i++) { elsP[i].style.backgroundColor = 'yellow'; } // for. of for (let el of elsP) { el.style.backgroundColor = 'yellow'; }

querySelector

Метод querySelector также как и querySelectorAll выполняет поиск по CSS-селектору . Но в отличие от него, он ищет только один HTML-элемент:

JavaScript

// ищем #title во всём документе const elTitle = document.querySelector('#title'); // ищем footer в const elFooter = document.body.querySelector('footer');

На первой строчке мы выбираем HTML-элемент, имеющий в качестве id значение title . На второй мы ищем в HTML-элемент по тегу footer .

В качестве результата этот метод возвращает найденный HTML-элемент или null , если он не был найден.

querySelector всегда возвращает один HTML-элемент, даже если под указанный CSS-селектор подходят несколько:

Задачу, которую решает querySelector можно выполнить через querySelectorAll :

JavaScript

const elFirst = document.querySelectorAll('#list > li')[0];

Но querySelector в отличие от querySelectorAll делает это намного быстрее, да и писать так проще. То есть querySelectorAll не возвращает как querySelector сразу же первый найденный элемент. Он сначала ищет все элементы, и только после того, как он это сделает, мы можем уже обратиться к первому HTML-элементу в этой коллекции.

Обычно перед тем, как выполнить какие-то действия с найденным HTML-элементом необходимо сначала проверить, а действительно ли он был найден :

JavaScript

const elModal = document.querySelector('.modal'); // если элемент .modal найден, то . if (elModal) { // переключим у elModal класс show elModal.classList.toggle('show'); }

Здесь мы сначала проверили существования HTML-элемента, и только потом выполнили над ним некоторые действия.

Методы getElement(s)By* для выбора HTML-элементов

Здесь мы рассмотрим методы, которые сейчас применяются довольно редко для поиска HTML-элементов. Но в некоторых случаях они могут быть очень полезны. Это:

• getElementById – получает один элемент по id ;
• getElementsByClassName – позволяет найти все элементы с указанным классом или классами;
• getElementsByTagName – выбирает элементы по тегу;
• getElementsByName – получает все элементы с указанным значением атрибута name .

1. Метод getElementById позволяет найти HTML-элемент на странице по значению id :

.
 .  

В качестве результата getElementById возвращает объект класса HTMLElement или значение null , если элемент не был найден. Этот метод имеется только у объекта document .

Указывать значение id необходимо с учётом регистра. Так например, document.getElementById('aside') и document.getElementById('ASIDE') ищут элементы с разным id .

Обратите внимание, что в соответствии со стандартом в документе не может быть несколько тегов с одинаковым id , так как значение идентификатора на странице должно быть уникальным.

Тем не менее, если вы допустили ошибку и в документе существуют несколько элементов с одинаковым id , то метод getElementById более вероятно вернёт первый элемент, который он встретит в DOM. Но на это полагаться нельзя, так как такое поведение не прописано в стандарте.

То, что делает getElementById можно очень просто решить посредством querySelector :

JavaScript

// получим элемент #title const elTitle = document.getElementById('title'); // получим элемента #title, используя querySelector const elTitleSame = document.querySelector('#nav');

Кстати, оба этих метода возвращают в качестве результата один и тот же результат. Это либо HTML-элемент (экземпляр класса HTMLElement ) или null , если элемент не найден.

2. Метод getElementsByClassName позволяет найти все элементы с заданным классом или классами. Его можно применить для поиска элементов как во всём документе, так и внутри указанного. В первом случае его нужно будет вызывать как метод объекта document , а во втором – как метод соответствующего HTML-элемента:

JavaScript

// найдем элементы с классом control в документе const elsControl = document.getElementsByClassName('control'); // выберем элементы внутри другого элемента, в данном случае внутри формы с const elsFormControl = document.forms.myform.getElementsByClassName('form-control');

В качестве результата он возвращает живую HTML-коллекцию найденных элементов . Чем живая коллекция отличается от статической мы рассмотрим ниже.

Здесь мы сохранили найденные элементы в переменные elsControl и elsFormControl . В первой переменной будет находиться HTMLCollection , содержащая элементы с классом control . Во второй – набор элементов с классом form-control , находящиеся в форме с id="myform" . Для получения этой формы мы использовали document.forms.myform .

Метод getElementsByClassName позволяет искать элементы не только по одному классу, но и сразу по нескольким, которые должны присутствовать у элемента:

JavaScript

// выберем элементы .btn.btn-danger const elsBtn = document.getElementsByClassName('btn btn-danger');

На querySelectorAll этот пример решается так:

JavaScript

const elsBtn = document.querySelectorAll('.btn.btn-danger');

3. Метод getElementsByTagName предназначен для получения коллекции элементов по имени тега:

JavaScript

// найдем все в документе const anchors = document.getElementsByTagName('a'); // найдем все >li> внутри #list const elsLi = document.getElementById('list').getElementsByTagName('li');

Задачу по выбору элементов внутри другого элемента с помощью querySelectorAll выполняется намного проще:

JavaScript

const elsLi = document.querySelectorAll('#list li');

Для выбора всех элементов можно использовать символ * :

JavaScript

// выберем все элементы в const els = document.body.getElementsByTagName('*');

4. В JavaScript getElementsByName можно использовать для выбора элементов, имеющих определенное значение атрибута name :

JavaScript

// получим все элементы с name="phone" const elsPhone = document.getElementsByName('phone');

Через querySelectorAll это выполняется так:

JavaScript

const elsPhone = document.querySelectorAll('[name="phone"]');

getElementsBy* и живые HTML-коллекции

В JavaScript getElementsByTagName , getElementsByClassName и getElementsByName в отличие от других методов (например, querySelectorAll ) возвращают живую коллекцию HTML-элементов (на английском live HTMLCollection ). То есть коллекцию содержимое которой автоматически обновляется при изменении DOM. Для наглядности рассмотрим следующий пример.

• One
• Two

Если в коде приведённом выше заменить выбор элементов на querySelectorAll , то мы увидим, что в ней находится статическая (не живая) коллекция элементов:

// получим статическую коллекцию const els = document.querySelectorAll('li');

Как вы видите количество элементов в коллекции не изменилось. Чтобы после изменения DOM получить актуальную коллекцию элементов, их нужно просто выбрать заново посредством querySelectorAll :

• One
• Two

Таким образом в JavaScript насчитывается 6 основных методов для выбора HTML-элементов на странице. По чему они ищут и что они возвращают приведено на следующем рисунке:

Экземпляры класса HTMLCollection не имеют в прототипе метод forEach . Поэтому если вы хотите использовать этот метод для перебора такой коллекции, её необходимо преобразовать в массив:

JavaScript

const items = document.getElementsByClassName('item'); [. items].forEach((el) => { console.log(el); });

matches, closest и contains

В JavaScript имеются очень полезные методы:

• matches – позволяет проверить соответствует ли HTML-элемент указанному CSS-селектору;
• closest – позволяет найти для HTML-элемента его ближайшего предка, подходящего под указанный CSS-селектор (поиск начинается с самого элемента);
• contains – позволяет проверить содержит ли данный узел другой в качестве потомка (проверка начинается с самого этого узла).

1. Метод matches ничего не выбирает, но он является очень полезным, так как позволяет проверить HTML-элемент на соответствие CSS-селектору. Он возвращает true , если элемент ему соответствует, иначе false .

JavaScript

// выберем HTML элемент, имеющий атрибут data-target="slider" const elSlider = document.querySelector('[data-target="slider"]'); // проверим соответствует ли он CSS селектору 'div' const result = element.matches('div');

JavaScript

• One
• Two
• Three

Ранее, в «старых» браузерах данный метод имел название matchesSelector , а также поддерживался с использованием префиксов. Если вам нужна поддержка таких браузеров, то можно использовать следующий полифилл:

JavaScript

if (!Element.prototype.matches) 

2. Метод closest очень часто используется в коде. Он позволяет найти ближайшего предка, подходящего под указанный CSS-селектор. При этом поиск начинается с самого элемента, для которого данный метод вызывается. Если этот элемент будет ему соответствовать, то closest вернёт его.

Здесь мы сначала выбираем HTML-элемент .level-3 и присваиваем его переменной el . Далее мы пытаемся среди предков этого элемента включая его сам найти такой, который отвечает заданному CSS-селектору, в данном случае .level-1 .

Начинается поиск всегда с самого этого элемента. В данном случае он не подходит под указанный селектор. Следовательно, этот метод переходит к его родителю. Он тоже не отвечает этому CSS-селектору. Значит, closest переходит дальше, то есть уже к его родителю. Этот элемент подходит под указанный селектор. Поэтому поиск прекращается и этот метод возвращает его в качестве результата.

Метод closest возвращает null , когда он дошёл бы конца иерархии и не нашёл элемент отвечающий указанному селектору. То есть, если такого элемента нет среди предков.

В этом примере найдем с помощью closest для .active его ближайшего родителя, отвечающего CSS-селектору #list > li :

• Four
• Five

В JavaScript closest очень часто используется в обработчиках событий. Это связано с тем, чтобы события всплывают и нам нужно, например, узнать кликнул ли пользователь в рамках какого-то элемента:

JavaScript

document.addEventListener('click', (e) => { if (e.closest.matches('.btn__action')) { // пользователь кликнул внутри .btn__action } });

3. Метод contains позволяет проверить содержит ли некоторый узел другой в качестве потомка. При этом проверка начинается с самого этого узла, для которого этот метод вызывается. Если узел соответствует тому для которого мы вызываем данный метод или является его потомком, то contains в качестве результата возвращает логическое значение true . В противном случае false :

 
 
.
 
 
 
.
  

Здесь выражение elDiv1.contains(elDiv1) возвращает true , так как проверка начинается с самого элемента. Это выражение elDiv1.contains(elDiv3) тоже возвращает true , так как elDiv3 находится внутри elDiv1 . А вот elDiv1.contains(elDiv4) в качестве результата возвращает false , так как elDiv4 не находится внутри elDiv1 .

В этом примере проверим с помощью contains содержит ли

другие узлы в качестве потомка:

Tag b
 
This is tag b.
  

Метод contains позволяет проверить является ли потомком не только узел-элемент, но и любой другой узел. Например, узнаем является ли потомком elDiv1 указанный текстовый узел:

JavaScript

const elDiv1 = document.querySelector('#div-1'); const textNode = document.querySelector('#div-3').firstChild; elDiv1.contains(textNode); // true

Задачи

1. Узнать количество элементов с атрибутом data-toggle="modal" на странице:

JavaScript

const count = document.querySelectorAll('[data-toggle="modal"]').length; console.log(count);

JavaScript

const anchors = document.querySelectorAll('ul.nav a');

3. Получить элемент по id , значение которого равно pagetitle :

JavaScript

var pagetitle = document.querySelector('#pagetitle');

4. Выполнить поиск элемента по классу nav :

JavaScript

var el = document.querySelector('.nav');

5. Найти элемент , находящийся в теге с классом comments , который в свою очередь расположен в :

JavaScript

var header = document.querySelector('main div.comments h3');

6. Имеется страница. В ней следует выбрать:

• последний элемент с классом article , расположенный в (решение);
• все элементы .section , находящиеся в .aside кроме 2 второго (решение);
• элемент расположенный после (решение).