JavaScript заметки

2022-04-18 14:07:30 getElementsBy*

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

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

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

elem.getElementsByTagName(tag) - ищет элементы с данным тегом и возвращает их коллекцию. Передав "*" вместо тега, можно получить всех потомков.

elem.getElementsByClassName(className) - возвращает элементы, которые имеют данный CSS-класс.

document.getElementsByName(name) - возвращает элементы с заданным атрибутом name. Очень редко используется.

P.S. На картинке пример поиска всех input в таблице.

#браузер #документ #поиск Открыть/Комментировать

2022-04-17 13:05:41 closest

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

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

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

#браузер #документ #поиск Открыть/Комментировать

2022-04-16 20:13:54 Прокачивай навыки JavaScript решая практические тесты!

На канале JavaScript тесты каждый день выходят викторины на знание особенностей языка.

Также у вас будет возможность обсудить любые вопросы в нашем чате с другими участниками и авторами контента.

Подойдёт начинающим и уже более уверенным JS разработчикам!

Можно пощёлкать, пока компилируется проект :)

Подпишись, чтобы не потерять

#javascript #тесты Открыть/Комментировать

2022-04-16 13:05:20 matches

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

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

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

#браузер #документ #поиск Открыть/Комментировать

2022-04-15 18:53:02 Топовые инструменты для работы с JavaScript!

Канал JavaScript инструменты будет регулярно знакомить тебя с инструментами для:
- сборки
- тестирования
- отладки
- безопасности
- аналитики
- оптимизации кода
- документирования

Можно почитать, пока компилируется проект Открыть/Комментировать

2022-04-14 18:57:22 querySelector

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

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

#браузер #документ #поиск Открыть/Комментировать

2022-04-13 23:10:21 querySelectorAll

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

Запрос на картинке получает все элементы 

, которые являются последними потомками в 

.

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

#браузер #документ #поиск
3.2K views20:10
Открыть/Комментировать

2022-04-13 16:40:18 document.getElementById или просто id

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

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

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

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

#браузер #документ #поиск Открыть/Комментировать

2022-04-12 17:03:47 Поиск: getElement*, querySelector*

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

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

#браузер #документ #поиск Открыть/Комментировать

2022-04-12 12:05:06 Итого по DOM навигации

Получив DOM-узел, мы можем перейти к его ближайшим соседям используя навигационные ссылки.

Есть два основных набора ссылок:
- Для всех узлов: parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling.
- Только для узлов-элементов: parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling.

Некоторые виды DOM-элементов, например таблицы, предоставляют дополнительные ссылки и коллекции для доступа к своему содержимому.

#браузер #документ #dom_навигация Открыть/Комментировать