Available now! Telegram Research 2025 — the year's key insights 
JavaScript заметки
Open in Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Show more7 737
Subscribers
+124 hours
-57 days
-5130 days
Posts Archive
7 737
Считаете себя уверенным пользователем ПК?
Тогда приглашаем вас в <Компуктерную>
Топовые сборки, лучшие сервисы и софты, крутые фишки и советы ждут вашего внимания 🎭
Link: https://t.me/+zIGm8lmHvBQyMWVi
7 737
Наследование классов DOM-узлов
Проверить наследование можно также при помощи
instanceof.
Как видно, DOM-узлы – это обычные JavaScript объекты. Для наследования они используют классы, основанные на прототипах.
В этом легко убедиться, если вывести в консоли браузера любой элемент через console.dir(elem). Или даже напрямую обратиться к методам, которые хранятся в HTMLElement.prototype, Element.prototype и т.д.
#браузер #документ #свойства_узлов7 737
Три закрытых канала для фронтендера.
@build_html — сотни бесплатных макетов для верстки на русском языке.
@on_the_frontend — дайджест самых актуальных статей по фронтенду.
@frontend_tests — сборник задач (с их разбором) для прокачки теоретических знаний и подготовки к собеседованиям.
⚠️ Доступ открыт на 3 дня, кто успеет подписаться, останется навсегда.
7 737
Как узнать имя класса DOM-узла?
Есть 2 способа сделать это:
- вспомним, что обычно у объекта есть свойство
constructor. Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя
- мы можем просто привести его к строке
Например, для тега <body> JavaScript-класс HTMLBodyElement.
#браузер #документ #свойства_узлов7 737
Команда разработчиков Uber создала телеграм-канал, в котором на пальцах помогает новичкам освоить айти.
Их главная фишка – понятные инструкции. Хотите научиться писать сайты? Держите гайд. Создавать приложения? На канале есть текстовые уроки с примерами.
Кризис – лучшее время, чтобы освоить новую профессию. Залетайте в IT без напряга: @it_tochka
7 737
HTMLElement – является базовым классом для всех остальных HTML-элементов.
От него наследуют конкретные элементы:
- HTMLInputElement – класс для тега
<input>,
- HTMLBodyElement – класс для тега <body>,
- HTMLAnchorElement – класс для тега <a>,
…и т.д, каждому тегу соответствует свой класс, который предоставляет определённые свойства и методы.
#браузер #документ #свойства_узлов7 737
Наконец-то! Хабр официально создал телеграм-канал
Хабр Community – здесь собирают отборные статьи по технологиям, новости из мира айти и фишки по кибербезопасности.
Вы знаете, что делать: @habr_official
7 737
Element – это базовый класс для DOM-элементов. Он обеспечивает навигацию на уровне элементов:
nextElementSibling, children и методы поиска: getElementsByTagName, querySelector. Браузер поддерживает не только HTML, но также XML и SVG. Класс Element служит базой для следующих классов: SVGElement, XMLElement и HTMLElement.
#браузер #документ #свойства_узлов7 737
Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность:
parentNode, nextSibling, childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуют от него: Text – для текстовых узлов, Element – для узлов-элементов и более экзотический Comment – для узлов-комментариев.
#браузер #документ #свойства_узлов7 737
Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность:
parentNode, nextSibling, childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуют от него: Text – для текстовых узлов, Element – для узлов-элементов и более экзотический Comment – для узлов-комментариев.
#браузер #документ #свойства_узлов7 737
7 737
Эпичная коллекция говнокода. Элитные костыли и велосипеды от 300кк/сек сеньоров на канале @shitty_code
7 737
Классы DOM-узлов
У разных DOM-узлов могут быть разные свойства. Например, у узла, соответствующего тегу
<a>, есть свойства, связанные со ссылками, а у соответствующего тегу <input> – свойства, связанные с полем ввода и т.д. Текстовые узлы отличаются от узлов-элементов. Но у них есть общие свойства и методы, потому что все классы DOM-узлов образуют единую иерархию.
Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
На рисунке выше изображены основные классы.
#браузер #документ #свойства_узлов7 737
Совет от создателя Google: учите программирование.
Айтишник даже на cтарте получает от $2000. А хороших спецов настолько мало, что платить готовы даже чайникам.
Пока 90% людей думают, это сложно, читайте канал IT Helper. Python, C++, Java – здесь вы на изи выучите любой язык и вольетесь за 2-3 недели.
Ребята собрали самое важное и оформили в понятные картинки, поэтому даже у гуманитариев проблем нет.
Подписывайтесь, чтобы через месяц выбирать между зарплатой в $2000 или $3000: @ithelper
7 737
Итого по поиску в DOM
Есть 6 основных методов поиска элементов в DOM (см. изображение выше).
Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll, но и методы getElement(s)By* могут быть полезны в отдельных случаях, а также встречаются в старом коде.
Кроме того:
- Есть метод elem.matches(css), который проверяет, удовлетворяет ли элемент CSS-селектору.
- Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.
И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:
- elemA.contains(elemB) вернёт
true, если elemB находится внутри elemA (elemB потомок elemA) или когда elemA==elemB.
#браузер #документ #поиск7 737
Когда начать свой путь в IT, если не сейчас? Хекслет открывает четвертый набор на Подготовительный курс по JavaScript: https://bit.ly/3OhfCwq
Теория в доступном изложении + еще больше практики.
В течение 14 дней вас ждут:
📍72 урока в онлайн-тренажере с автоматической проверкой
📍2 интерактивные онлайн-встречи с наставником и 1 лайвкодинг-сессия, на которой вы напишете свою первую настоящую программу
📍постоянная чат-поддержка в Slack и сообщество учеников в Telegram для непрерывного обмена знаниями, домашние задания, доступ ко всем материалам курса после его окончания
🔥И всё это за 990 рублей.
Начинаем 21 апреля. Занимайте своё место в группе!
7 737
Статические коллекции
querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.
Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную
1.
Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе, в отличие от живой коллекции.
#браузер #документ #поиск7 737
Мечтаете о карьере в сфере IT — начните с Python.
Этот язык рекомендуют в качестве первого языка программирования, и для начала обучения вам не понадобятся технические знания и навыки.
Программа акцентирована на практике. За 6 занятий вы освоите логику и синтаксис языка, научитесь работать с данными, изучите основные инструменты для написания кода. С нуля разработаете приложение «To do-list» и создадите чат-бота для Telegram на Python.
Попробуйте → https://netolo.gy/h98
7 737
Живые коллекции
Все методы
"getElementsBy*" возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.
В приведённом выше примере есть два скрипта.
- Первый создаёт ссылку на коллекцию <div>. На этот момент её длина равна 1.
- Второй скрипт запускается после того, как браузер встречает ещё один <div>, теперь её длина – 2.
#браузер #документ #поиск7 737
getElementsBy*
Существуют также другие методы поиска элементов по тегу, классу и так далее.
На данный момент, они скорее исторические, так как
querySelector более чем эффективен.
Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.
elem.getElementsByTagName(tag) - ищет элементы с данным тегом и возвращает их коллекцию. Передав "*" вместо тега, можно получить всех потомков.
elem.getElementsByClassName(className) - возвращает элементы, которые имеют данный CSS-класс.
document.getElementsByName(name) - возвращает элементы с заданным атрибутом name. Очень редко используется.
P.S. На картинке пример поиска всех input в таблице.
#браузер #документ #поиск