Объект document в JavaScript. Методы и свойства объекта document. Часть 2

Объект document в JavaScript. Методы и свойства объекта document

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомство с объектом document в JavaScript, а также с его методами, позволяющими выбирать элементы верстки в документе и манипулировать выбранными элементами.

Итак, в предыдущей статье мы с вами познакомились с двумя методами для выборки элементов документа: метод getElementById и getElementsByClassName. Первый из них позволяет выбрать нужный элемент по его идентификатору, второй же позволяет получить коллекцию (массив) элементов по указанному классу.

Однако, это далеко не все методы объекта document для выборки элементов. Следующий полезный метод — getElementsByTagName. Этот метод позволяет получить коллекцию элементов по их имени, т.е. по имени тега (div, p, input и т.п.). Давайте попробуем найти все параграфы в этом кусочке верстки:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

В результате все 4 параграфа попали в коллецию:

Объект document в JavaScript. Методы и свойства объекта document

А что, если нам нужны не все параграфы на странице, а только параграфы определенного блока? Не проблема. Метод getElementsByTagName может искать элементы не только во всем документе, но и в локальном его участке:

Объект document в JavaScript. Методы и свойства объекта document

В итоге мы получили только нужные элементы страницы. Также метод getElementsByTagName в качестве параметра может применить звездочку (*), это будет означать, что мы хотим получить все элементы, а не какой-то конкретный. Пример:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Объект document в JavaScript. Методы и свойства объекта document

Следующий полезный метод — querySelectorAll. Он возвращает все элементы по переданному селектору CSS. В качестве примера давайте выберем все параграфы с классом yellow внутри первого блока:

Объект document в JavaScript. Методы и свойства объекта document

Ну и еще один метод — querySelector. Его отличие от предыдущего в том, что querySelector возвращает лишь один, первый попавшийся элемент:

Объект document в JavaScript. Методы и свойства объекта document

И последний метод, с которым мы познакомимся, — метод closest(). Этот метод ищет ближайший родительский элемент по заданному селектору. Пример:

Объект document в JavaScript. Методы и свойства объекта document

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

На этом у меня сегодня все. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree