JavaScript заметки

Знаешь о своих слабых местах на JavaScript? Стартап @yourcodereview запустил 4-недельное обучение: на нём менторы — Senior-разработчики и HRы помогают IT-специалистам проходить собеседования. Что будет на обучении: 🔹вместе разберёте свои ошибки, узнаете свои слабые места и получите гайд по исправлению 🔹научитесь правильно себя презентовать и продавать приведёте своё резюме в порядок вместе с JavaScript Senior-разработчиком и HRом 🔹получите фидбэк по тестовым Самая главная фича — пройдёте 4 собеседования с Senior-ом и HR🔥 В итоге — станете готовыми к собесу в любую компанию и узнаете, сколько реально стоите на рынке. Оставляй заявку и записывайся на подготовку, места ещё есть!

closest Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины. Метод elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск. Другими словами, метод closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null, если такой элемент не найден. #браузер #документ #поиск

Прокачивай навыки JavaScript решая практические тесты! На канале JavaScript тесты каждый день выходят викторины на знание особенностей языка. Также у вас будет возможность обсудить любые вопросы в нашем чате с другими участниками и авторами контента. Подойдёт начинающим и уже более уверенным JS разработчикам! Можно пощёлкать, пока компилируется проект :) Подпишись, чтобы не потерять 👇 #javascript #тесты

matches Предыдущие методы искали по DOM. Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false. Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют. #браузер #документ #поиск

Топовые инструменты для работы с JavaScript! Канал JavaScript инструменты будет регулярно знакомить тебя с инструментами для: - сборки - тестирования - отладки - безопасности - аналитики - оптимизации кода - документирования Можно почитать, пока компилируется проект 😉

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

Stack Overflow — наипопулярнейший IT форум теперь в Telegram! Тут программисты со всего мира помогают друг другу. • Синтаксис Python, срез строки. • Как преобразовать одну структуру данных JavaScript в другую? • Как найти одинаковые значения в массиве объектов JavaScript? Еще больше интересных вопросов с ответами на канале /stackoverflow

querySelectorAll Самый универсальный метод поиска – это elem.querySelectorAll(css), он возвращает все элементы внутри elem, удовлетворяющие данному CSS-селектору. Запрос на картинке получает все элементы <li>, которые являются последними потомками в <ul>. Этот метод действительно мощный, потому что можно использовать любой CSS-селектор. #браузер #документ #поиск

Unity теперь в Telegram! Assassin’s Creed, Rust, Hearthstone и ещё десятки известнейших игр были созданы на платформе Unity. Благодаря профессионалам из Unity Education у вас есть возможность совершено бесплатно научиться создавать игры на Unity с нуля. ⚡️Подписаться - @unityrussia

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

Frontend Planet - канал с инструментами, без которых не обойдется ни один разработчик.

Поиск: getElement*, querySelector* Свойства навигации по DOM хороши, когда элементы расположены рядом. А что, если нет? Как получить произвольный элемент страницы? Для этого в DOM есть дополнительные методы поиска (см. картинку выше). #браузер #документ #поиск

Команда Senior Frontend разработчиков ведёт несколько БЕСПЛАТНЫХ телеграм-каналов, Их цель - сформировать лучшее IT сообщество по JavaScript, поэтому они охотно помогают новичкам стать специалистами! Канал Front Helper (готовый код): Здесь ты найдешь огромное количество готовых решений, которые достаточно просто скопировать к себе в проект! Канал Front Tests (задачи для проверки знаний): Здесь ты сможешь прокачать свои навыки, решая тестовые задачи Канал Front Study (теория, заметки): Здесь ежедневно выходят разборы синтаксиса и особенностей языка Переходи и развивайся ежедневно!

Итого по DOM навигации Получив DOM-узел, мы можем перейти к его ближайшим соседям используя навигационные ссылки. Есть два основных набора ссылок: - Для всех узлов: parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling. - Только для узлов-элементов: parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling. Некоторые виды DOM-элементов, например таблицы, предоставляют дополнительные ссылки и коллекции для доступа к своему содержимому. #браузер #документ #dom_навигация

​​Ⓘ Важное упоминание для подписчиков канала! Открывается доступ к архиву с платными книгами для программистов: 📚 Кладовая книг – лучший сборник книг для изучения по всем языкам программирования!

Ещё немного ссылок: таблицы До сих пор мы описывали основные навигационные ссылки. Некоторые типы DOM-элементов предоставляют для удобства дополнительные свойства, специфичные для их типа. Таблицы – отличный пример таких элементов. Элемент <table>, в дополнение к свойствам, о которых речь шла выше, поддерживает следующие: - table.rows – коллекция строк <tr> таблицы. - table.caption/tHead/tFoot – ссылки на элементы таблицы <caption>, <thead>, <tfoot>. - table.tBodies – коллекция элементов таблицы <tbody> (по спецификации их может быть больше одного). <thead>, <tfoot>, <tbody> предоставляют свойство rows: - tbody.rows – коллекция строк <tr> секции. <tr>: - tr.cells – коллекция <td> и <th> ячеек, находящихся внутри строки <tr>. - tr.sectionRowIndex – номер строки <tr> в текущей секции <thead>/<tbody>/<tfoot>. - tr.rowIndex – номер строки <tr> в таблице (включая все строки таблицы). <td> and <th>: - td.cellIndex – номер ячейки в строке <tr>. P.S. Пример выше на картинке. #браузер #документ #dom_навигация

Фишки, советы, полезные материалы — все это есть на канале Programmer Way Немного о нем: 📝 Авторские статьи, мысли и фишки 📍Верстка, JS, React, Redux, Wordpress 🤝 Чат фронтендеров 🗂 Полезные уроки/статьи

Навигация только по элементам Навигационные свойства, описанные выше, относятся ко всем узлам в документе. В частности, в childNodes находятся и текстовые узлы и узлы-элементы и узлы-комментарии, если они есть. Но для большинства задач текстовые узлы и узлы-комментарии нам не нужны. Мы хотим манипулировать узлами-элементами, которые представляют собой теги и формируют структуру страницы. Поэтому давайте рассмотрим дополнительный набор ссылок, которые учитывают только узлы-элементы. Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово Element: - children – коллекция детей, которые являются элементами. - firstElementChild, lastElementChild – первый и последний дочерний элемент. - previousElementSibling, nextElementSibling – соседи-элементы. - parentElement – родитель-элемент. #браузер #документ #dom_навигация

💡 JavaScript - канал, в котором админ рассказывает сложный javascript человеческим языком. Подписывайся, если хочешь прокачать JS и повысить свой чек за работу - t.me/simple_js

Соседи и родитель Соседи – это узлы, у которых один и тот же родитель. Следующий сосед – в свойстве nextSibling, а предыдущий – в previousSibling. Родитель доступен через parentNode. P.S. Примеры показаны на картинке выше. #браузер #документ #dom_навигация