JavaScript заметки

Живые коллекции Все методы "getElementsBy*" возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении. В приведённом выше примере есть два скрипта. - Первый создаёт ссылку на коллекцию <div>. На этот момент её длина равна 1. - Второй скрипт запускается после того, как браузер встречает ещё один <div>, теперь её длина – 2. #браузер #документ #поиск

getElementsBy* Существуют также другие методы поиска элементов по тегу, классу и так далее. На данный момент, они скорее исторические, так как querySelector более чем эффективен. Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде. elem.getElementsByTagName(tag) - ищет элементы с данным тегом и возвращает их коллекцию. Передав "*" вместо тега, можно получить всех потомков. elem.getElementsByClassName(className) - возвращает элементы, которые имеют данный CSS-класс. document.getElementsByName(name) - возвращает элементы с заданным атрибутом name. Очень редко используется. P.S. На картинке пример поиска всех input в таблице. #браузер #документ #поиск

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

Figma Pro теперь в Telegram! Канал с плагинами, шаблонами, макетами, шрифтами и готовыми дизайн-системами, на который подписаны практикующие разработчики и дизайнеры.  Сделано с ❤️ Сделано в Figma

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

scrollWidth/Height Эти свойства – как clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть элемента. На рисунке выше: - scrollHeight = 723 – полная внутренняя высота, включая прокрученную область. - scrollWidth = 324 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth. Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту. #браузер #документ #размеры

Любишь разработку и ищешь готовые CSS-фреймворки, плагины и другие компоненты дизайн-систем? Заходи на наш канал, узнаешь многое о решениях пользовательского интерфейса, потрогаешь каждый из элементов UI самостоятельно.

clientTop/Left Пойдём дальше. Внутри элемента у нас рамки (border). Для них есть свойства-метрики clientTop и clientLeft. В нашем примере: - clientLeft = 25 – ширина левой рамки - clientTop = 25 – ширина верхней рамки Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней. #браузер #документ #размеры

Пришёл во Frontend и этот мир пугает тебя?  Мы уже давно катимся на этой телеге, и нам есть что показать в этой хижине.  Наши редакторы (практикующие разработчики), ищут для вас контент, который будет полезен при старте. На канале вы найдете : 📌 Статьи 📌 Тесты с объяснениями 📌 Обучающие туториалы Следуй за нами - и начинай получать  материалы, которые помогут тебе прокачать свои знания. Подписаться  👨‍💻

Метрики для не показываемых элементов равны нулю. Координаты и размеры в JavaScript устанавливаются только для видимых элементов. Если элемент (или любой его родитель) имеет display:none или отсутствует в документе, то все его метрики равны нулю (или null, если это offsetParent). Например, свойство offsetParent равно null, а offsetWidth и offsetHeight равны 0, когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none. Мы можем использовать это, чтобы делать проверку на видимость. Заметим, что функция isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые <div>). #браузер #документ #размеры

offsetWidth/Height Теперь переходим к самому элементу. Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки. Для нашего элемента: - offsetWidth = 390 – внешняя ширина блока, её можно получить сложением CSS-ширины (300px), внутренних отступов (2 * 20px) и рамок (2 * 25px). - offsetHeight = 290 – внешняя высота блока. #браузер #документ #размеры

Слайдер главной страницы - визитная карточка всего сайта, он не имеет права быть скучным! Это и другие готовые решения для frontend-разработчиков и web-дизайнеров в канале CSS-хаки

Вот так выглядят свойства offsetParent, offsetLeft/Top Подробное описание можете посмотреть постом выше: https://t.me/notesjs/567 #браузер #документ #размеры

offsetParent, offsetLeft/Top Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них. В свойстве offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге. То есть, ближайший предок, который удовлетворяет следующим условиям: - Является CSS-позиционированным (CSS-свойство position равно absolute, relative, fixed или sticky), - или <td>, <th>, <table>, - или <body>. Свойства offsetLeft/offsetTop содержат координаты x/y относительно верхнего левого угла offsetParent. В примере выше внутренний <div> имеет элемент <main> в качестве offsetParent, а свойства offsetLeft/offsetTop являются сдвигами относительно верхнего левого угла (180). #браузер #документ #размеры

Пришёл во Frontend и этот мир пугает тебя? Мы уже давно катимся на этой телеге, и нам есть что показать в этой хижине. Наши редакторы (практикующие разработчики), ищут для вас контент, который будет полезен при старте. На канале вы найдете : 📌 Статьи 📌 Тесты с объяснениями 📌 Обучающие туториалы Следуй за нами - и начинай получать материалы, которые помогут тебе прокачать свои знания.

Метрики Вот общая картина с геометрическими свойствами. Значениями свойств являются числа, подразумевается, что они в пикселях. К ней мы часто будем возвращаться в следующих постах и описывать отдельные составляющие. А пока просто изучите, что за что примерно отвечает. #браузер #документ #размеры

Внимание, полоса прокрутки В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «content width» выше). Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет 300px, но если предположить, что ширина полосы прокрутки равна 16px (её точное значение зависит от устройства и браузера), тогда остаётся только 300 - 16 = 284px, и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Без неё некоторые вычисления будут проще. #браузер #документ #размеры

Хочешь стать мидлом и выше? Тогда надо закреплять теорию на практике 🤑 Канал DOM JavaScript позволит тебе быстро прокачать свои навыки за считанные недели на реальных тестах с собесов Google и Yandex. Решай отборные тесты по JS и даже не заметишь как станешь востребованным специалистом. Вместе с практикой качай и теорию. На канале ежедневно публикуются материалы, где JS раскладывают по полочкам наши избранные авторы. Никакой воды, все по делу. Подпишись и развивайся ежедневно с командой единомышленников! Заявку принимаем моментально. 👇

Размеры и полоса прокрутки: общий вид У элемента есть рамка border, внутренний отступ padding и прокрутка. Полный набор характеристик. Обратите внимание, тут нет внешних отступов margin, потому что они не являются частью элемента, для них нет особых JavaScript-свойств. #браузер #документ #размеры

Размеры и прокрутка элементов Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики». Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript. #браузер #документ #размеры