Уже доступно! Исследование Telegram 2025 — ключевые инсайты года 
JavaScript заметки
Открыть в Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Больше7 740
Подписчики
Нет данных24 часа
-57 дней
-5730 день
Архив постов
7 740
Имена тегов (кроме XHTML) всегда пишутся в верхнем регистре
В браузере существуют два режима обработки документа: HTML и XML. HTML-режим обычно используется для веб-страниц. XML-режим включается, если браузер получает XML-документ с заголовком:
Content-Type: application/xml+xhtml.
В HTML-режиме значения tagName/nodeName всегда записаны в верхнем регистре. Будет выведено BODY вне зависимости от того, как записан тег в HTML <body> или <BoDy>.
В XML-режиме регистр сохраняется «как есть». В настоящее время XML-режим применяется редко.
#браузер #документ #свойства_узлов7 740
Тег: nodeName и tagName
Получив DOM-узел, мы можем узнать имя его тега из свойств
nodeName и tagName.
Есть ли какая-то разница между tagName и nodeName?
Да, она отражена в названиях свойств, но не очевидна.
- Свойство tagName есть только у элементов Element.
- Свойство nodeName определено для любых узлов Node:
- - для элементов оно равно tagName.
- - для остальных типов узлов (текст, комментарий и т.д.) оно содержит строку с типом узла.
Другими словами, свойство tagName есть только у узлов-элементов (поскольку они происходят от класса Element), а nodeName может что-то сказать о других типах узлов.
Например, сравним tagName и nodeName на примере объекта document и узла-комментария (см. картинку выше).
#браузер #документ #свойства_узлов7 740
🔥 Если ты фронт, такое лучше не пропускать.
На фронте - канал, на котором команда фронтендеров, собирает для Вас обучающие материалы. На канале ты найдешь
💎Макеты для верстки
💎Тесты с объяснениями
💎Обучающие туториалы и статьи
Подписывайся и начинай прокачать свои скилы вместе с
👉 @on_the_frontend
7 740
Свойство «nodeType»
Свойство
nodeType предоставляет ещё один, «старомодный» способ узнать «тип» DOM-узла.
Его значением является цифра:
- elem.nodeType == 1 для узлов-элементов,
- elem.nodeType == 3 для текстовых узлов,
- elem.nodeType == 9 для объектов документа,
- В спецификации можно посмотреть остальные значения.
В современных скриптах, чтобы узнать тип узла, мы можем использовать метод instanceof и другие способы проверить класс, но иногда nodeType проще использовать. Мы не можем изменить значение nodeType, только прочитать его.
P.S. Пример с nodeType на картинке выше.
#браузер #документ #свойства_узлов7 740
Наследование классов DOM-узлов
Проверить наследование можно также при помощи
instanceof.
Как видно, DOM-узлы – это обычные JavaScript объекты. Для наследования они используют классы, основанные на прототипах.
В этом легко убедиться, если вывести в консоли браузера любой элемент через console.dir(elem). Или даже напрямую обратиться к методам, которые хранятся в HTMLElement.prototype, Element.prototype и т.д.
#браузер #документ #свойства_узлов7 740
Стоит ли учить Java в 2022 году? Так ли хорош Java в качестве первого языка для изучения программирования? Какие карьерные перспективы ждут Java-разработчиков?
22 сентября в 19.00 по мск образовательная платформа Хекслет приглашает всех, кто делает первые шаги в Java или только задумывается о профессии, на бесплатный карьерный мастер-класс!
Поговорим о сфере применения языка и задачах, которые предстоит решать. Порассуждаем, где учиться и почему не всем нужна «вышка» в IT.
Расскажем о специфике программы по Java-разработке в Хекслете. Затронем тему поиска первой работы.
Дадим лайфхаки от студентов — как собрать портфолио, не имея опыта коммерческой разработки.
✅ Q&A сессия
Ответим на ваши вопросы. Вышлем «Карту компетенций начинающего разработчика» всем участникам мероприятия, подарим бонусы для воодушевляющего старта!
Жмите по ссылке и записывайтесь!
7 740
Как узнать имя класса DOM-узла?
Есть 2 способа сделать это:
- вспомним, что обычно у объекта есть свойство
constructor. Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя
- мы можем просто привести его к строке
Например, для тега <body> JavaScript-класс HTMLBodyElement.
#браузер #документ #свойства_узлов7 740
«По домам» frontend-разработчиков AvitoTech
Ребята из Авито придумали классный проект, который даёт возможность познакомиться с командой, узнать о работе в компании изнутри и не только.
В видосах фронтендеры расскажут:
— Какие технологии и библиотеки, по их мнению, лучшие
— Что стоит изучить в 2022 году
— Как писать стили, какой инструмент выбрать
И ещё
много полезного.
Поэтому го на Ютуб, смотреть первое интервью.7 740
HTMLElement – является базовым классом для всех остальных HTML-элементов.
От него наследуют конкретные элементы:
- HTMLInputElement – класс для тега
<input>,
- HTMLBodyElement – класс для тега <body>,
- HTMLAnchorElement – класс для тега <a>,
…и т.д, каждому тегу соответствует свой класс, который предоставляет определённые свойства и методы.
#браузер #документ #свойства_узлов7 740
20 сентября в Айтилогии стартует 7-дневный бесплатный интенсив по frontend-разработке, на котором ты с нуля без знаний создашь фронтенд-проект на Angular 🔥
На интенсиве ты:
– Сверстаешь лендинг на HTML + CSS
– Реализуешь функционал на JavaScript
– Используешь фронтенд-фреймворк Angular
– Подключишь Backend и загрузишь сайт на хостинг
🎁 Будет общий чат, проверка домашек от экспертов, различные бонусы!
А в конце автор подарит своё резюме Senior-разработчика, с помощью которого устроился на ЗП 3500$
Первые 100 мест бесплатно, потом 6 990 руб. Не упусти👇🏻
Frontend Start
7 740
Element – это базовый класс для DOM-элементов. Он обеспечивает навигацию на уровне элементов:
nextElementSibling, children и методы поиска: getElementsByTagName, querySelector. Браузер поддерживает не только HTML, но также XML и SVG. Класс Element служит базой для следующих классов: SVGElement, XMLElement и HTMLElement.
#браузер #документ #свойства_узлов7 740
Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность:
parentNode, nextSibling, childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуют от него: Text – для текстовых узлов, Element – для узлов-элементов и более экзотический Comment – для узлов-комментариев.
#браузер #документ #свойства_узлов7 740
Прекрати мечтать и найди уже работу в IT!
Ну или поменяй, подняв ЗП 😁
2 канала, с топовыми материалами, которые помогут тебе подготовиться и найти работу мечты!
IT questions – поможет тебе подготовиться к собеседованию:
- ответы на популярные вопросы с интервью;
- реальные задачи, с примерами решений;
- полезные материалы и отобранные вакансии (Frontend, Backend)
Learn English, code better 🇬🇧 — качай свой технический английский без больших усилий, уделяя 5 минут в день!
Через 30 дней будешь спокойно читать документации на английском и искать работу за рубежом!
7 740
7 740
Классы DOM-узлов
У разных DOM-узлов могут быть разные свойства. Например, у узла, соответствующего тегу
<a>, есть свойства, связанные со ссылками, а у соответствующего тегу <input> – свойства, связанные с полем ввода и т.д. Текстовые узлы отличаются от узлов-элементов. Но у них есть общие свойства и методы, потому что все классы DOM-узлов образуют единую иерархию.
Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
На рисунке выше изображены основные классы.
#браузер #документ #свойства_узлов7 740
Хочешь разобраться в Angular и повысить зп в разы?
Тогда заходи на канал angular-разработчика с опытом > 5 лет!
Там ты найдешь:
🔑 Базовые знания по фреймворку;
🔑 Решение заданий с собеседований;
🔑 Советы по оптимизации angular-приложений;
🔑 Рекомендации книг;
🔑 Лайфхаки по настройке окружения.
Зацени 👉 @ng_maestro
7 740
Итого по поиску в 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 740
Статические коллекции
querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.
Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную
1.
Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе, в отличие от живой коллекции.
#браузер #документ #поиск7 740
Серверный JavaScript | Node.JS [ru] - канал для тех кому интересен JS не только со стороны фронта но и бэка. Там вы найдете много инфы и новостей о Node.JS.
Вам сюда: 👉 @we_use_js
В общем добро пожаловать!
