JavaScript заметки

Классы DOM-узлов

У разных DOM-узлов могут быть разные свойства. Например, у узла, соответствующего тегу <a>, есть свойства, связанные со ссылками, а у соответствующего тегу <input> – свойства, связанные с полем ввода и т.д. Текстовые узлы отличаются от узлов-элементов. Но у них есть общие свойства и методы, потому что все классы DOM-узлов образуют единую иерархию.

Каждый DOM-узел принадлежит соответствующему встроенному классу.

Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.

На рисунке выше изображены основные классы.

#браузер #документ #свойства_узлов

👍8❤2🔥2

4.37K views09:15

Подробнее

JavaScript заметки

EventTarget – это корневой «абстрактный» класс. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.

P.S. На картинке описание интерфейса на TypeScipt.

#браузер #документ #свойства_узлов

👍7🔥5❤3

4.46K views14:08

Подробнее

JavaScript заметки

Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode, nextSibling, childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуют от него: Text – для текстовых узлов, Element – для узлов-элементов и более экзотический Comment – для узлов-комментариев.

#браузер #документ #свойства_узлов

👍15🔥3❤2

4.36K views17:46

Подробнее

JavaScript заметки

Element – это базовый класс для DOM-элементов. Он обеспечивает навигацию на уровне элементов: nextElementSibling, children и методы поиска: getElementsByTagName, querySelector. Браузер поддерживает не только HTML, но также XML и SVG. Класс Element служит базой для следующих классов: SVGElement, XMLElement и HTMLElement.

#браузер #документ #свойства_узлов

👍7❤4🔥4

4.35K views11:42

Подробнее

JavaScript заметки

HTMLElement – является базовым классом для всех остальных HTML-элементов.

От него наследуют конкретные элементы:
- HTMLInputElement – класс для тега <input>,
- HTMLBodyElement – класс для тега <body>,
- HTMLAnchorElement – класс для тега <a>,
…и т.д, каждому тегу соответствует свой класс, который предоставляет определённые свойства и методы.

#браузер #документ #свойства_узлов

👍7❤4🔥3

4.12K views09:11

Подробнее

JavaScript заметки

Как узнать имя класса DOM-узла?

Есть 2 способа сделать это:
- вспомним, что обычно у объекта есть свойство constructor. Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя
- мы можем просто привести его к строке

Например, для тега <body> JavaScript-класс HTMLBodyElement.

#браузер #документ #свойства_узлов

👍10🔥3❤1

4.07K views20:01

Подробнее

JavaScript заметки

Наследование классов DOM-узлов

Проверить наследование можно также при помощи instanceof.

Как видно, DOM-узлы – это обычные JavaScript объекты. Для наследования они используют классы, основанные на прототипах.

В этом легко убедиться, если вывести в консоли браузера любой элемент через console.dir(elem). Или даже напрямую обратиться к методам, которые хранятся в HTMLElement.prototype, Element.prototype и т.д.

#браузер #документ #свойства_узлов

👍5🔥4❤1

3.84K views11:05

Подробнее

JavaScript заметки

Свойство «nodeType»

Свойство nodeType предоставляет ещё один, «старомодный» способ узнать «тип» DOM-узла.

Его значением является цифра:
- elem.nodeType == 1 для узлов-элементов,
- elem.nodeType == 3 для текстовых узлов,
- elem.nodeType == 9 для объектов документа,
- В спецификации можно посмотреть остальные значения.

В современных скриптах, чтобы узнать тип узла, мы можем использовать метод instanceof и другие способы проверить класс, но иногда nodeType проще использовать. Мы не можем изменить значение nodeType, только прочитать его.

P.S. Пример с nodeType на картинке выше.

#браузер #документ #свойства_узлов

🔥5👍4❤1

3.81K views15:57

Подробнее

JavaScript заметки

Тег: nodeName и tagName

Получив DOM-узел, мы можем узнать имя его тега из свойств nodeName и tagName.

Есть ли какая-то разница между tagName и nodeName?

Да, она отражена в названиях свойств, но не очевидна.

- Свойство tagName есть только у элементов Element.
- Свойство nodeName определено для любых узлов Node:
- - для элементов оно равно tagName.
- - для остальных типов узлов (текст, комментарий и т.д.) оно содержит строку с типом узла.

Другими словами, свойство tagName есть только у узлов-элементов (поскольку они происходят от класса Element), а nodeName может что-то сказать о других типах узлов.

Например, сравним tagName и nodeName на примере объекта document и узла-комментария (см. картинку выше).

#браузер #документ #свойства_узлов

🔥8👍6❤1

3.68K views11:54

Подробнее

JavaScript заметки

Имена тегов (кроме XHTML) всегда пишутся в верхнем регистре

В браузере существуют два режима обработки документа: HTML и XML. HTML-режим обычно используется для веб-страниц. XML-режим включается, если браузер получает XML-документ с заголовком: Content-Type: application/xml+xhtml.

В HTML-режиме значения tagName/nodeName всегда записаны в верхнем регистре. Будет выведено BODY вне зависимости от того, как записан тег в HTML <body> или <BoDy>.

В XML-режиме регистр сохраняется «как есть». В настоящее время XML-режим применяется редко.

#браузер #документ #свойства_узлов

👍5❤3🔥3

3.78K views16:43

Подробнее

JavaScript заметки

innerHTML: содержимое элемента

Свойство innerHTML позволяет получить HTML-содержимое элемента в виде строки.

Мы также можем изменять его. Это один из самых мощных способов менять содержимое на странице.

Пример выше показывает содержимое document.body, а затем полностью заменяет его.

#браузер #документ #свойства_узлов

👍7🔥5❤1

3.9K views08:05

Подробнее

JavaScript заметки

Будьте внимательны: «innerHTML+=» осуществляет перезапись

Мы можем добавить HTML к элементу, используя elem.innerHTML+="ещё html".

На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись.

Технически эти две строки (см. картинку выше) делают одно и то же.

Другими словами, innerHTML+= делает следующее:
1) Старое содержимое удаляется.
2) На его место становится новое значение innerHTML (с добавленной строкой).

Так как содержимое «обнуляется» и переписывается заново, все изображения и другие ресурсы будут перезагружены.

В примере chatDiv выше строка chatDiv.innerHTML+="Как дела?" заново создаёт содержимое HTML и перезагружает smile.gif (надеемся, картинка закеширована). Если в chatDiv много текста и изображений, то эта перезагрузка будет очень заметна.

#браузер #документ #свойства_узлов

👍12🔥5❤1

3.99K views15:27

Подробнее

JavaScript заметки

outerHTML: HTML элемента целиком

Свойство outerHTML содержит HTML элемента целиком. Это как innerHTML плюс сам элемент.

Будьте осторожны: в отличие от innerHTML, запись в outerHTML не изменяет элемент. Вместо этого элемент заменяется целиком во внешнем контексте.

Да, звучит странно, и это действительно необычно, поэтому здесь мы и отмечаем это особо.

#браузер #документ #свойства_узлов

👍8🔥4❤1

3.88K views18:00

Подробнее

JavaScript заметки

nodeValue/data: содержимое текстового узла

Свойство innerHTML есть только у узлов-элементов.

У других типов узлов, в частности, у текстовых, есть свои аналоги: свойства nodeValue и data. Эти свойства очень похожи при использовании, есть лишь небольшие различия в спецификации. Мы будем использовать data, потому что оно короче.

Прочитаем содержимое текстового узла и комментария (см. картинку выше).

Мы можем представить, для чего нам может понадобиться читать или изменять текстовый узел, но комментарии?

Иногда их используют для вставки информации и инструкций шаблонизатора в HTML.

JavaScript может прочитать это из свойства data и обработать инструкции.

#браузер #документ #свойства_узлов

👍10❤4🔥1

3.88K views19:12

Подробнее

JavaScript заметки

This media is not supported in your browser

VIEW IN TELEGRAM

Делать сайты не так сложно как кажется!

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

Подписывайтесь на канал и получайте новые идеи!

🔥6❤1👍1

3.51K views20:36

Подписаться 🔥

JavaScript заметки

textContent: просто текст

Свойство textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше).

Как мы видим, возвращается только текст, как если бы все <теги> были вырезаны, но текст в них остался.
На практике редко появляется необходимость читать текст таким образом.

Намного полезнее возможность записывать текст в textContent, т.к. позволяет писать текст «безопасным способом».

#браузер #документ #свойства_узлов

👍13🔥4

3.73K views23:02

Подробнее

JavaScript заметки

Запись в textContent (безопасный способ)

Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.
- С innerHTML вставка происходит «как HTML», со всеми HTML-тегами.
- С textContent вставка получается «как текст», все символы трактуются буквально.

Сравним два тега div (см. пример выше на картинке).
- В первый <div> имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом.
- Во второй <div> имя приходит «как текст», поэтому мы видим <b>Винни-пух!</b>.

В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через textContent – один из способов от этого защититься.

#браузер #документ #свойства_узлов

👍19🔥3

3.66K views11:09

Подробнее

JavaScript заметки

Свойство «hidden»

Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет.
Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке).

Технически, hidden работает так же, как style="display:none". Но его применение проще.

#браузер #документ #свойства_узлов

👍23🔥2

3.68K views16:15

Подробнее

JavaScript заметки

Другие свойства

У DOM-элементов есть дополнительные свойства, в частности, зависящие от класса:
- value – значение для <input>, <select> и <textarea> (HTMLInputElement, HTMLSelectElement…).
- href – адрес ссылки «href» для <a href="..."> (HTMLAnchorElement).
- id – значение атрибута «id» для всех элементов (HTMLElement).
- …и многие другие…

Большинство стандартных HTML-атрибутов имеют соответствующее DOM-свойство, и мы можем получить к нему доступ.

Если мы хотим узнать полный список поддерживаемых свойств для данного класса, можно найти их в спецификации. Например, класс HTMLInputElement описывается здесь: https://html.spec.whatwg.org/#htmlinputelement.

Если же нам нужно быстро что-либо узнать или нас интересует специфика определённого браузера – мы всегда можем вывести элемент в консоль, используя console.dir(elem), и прочитать все свойства. Или исследовать «свойства DOM» во вкладке Elements браузерных инструментов разработчика.

#браузер #документ #свойства_узлов

👍16🔥2

4.68K views14:05

Подробнее

JavaScript заметки

Итого по свойствам узлов

Каждый DOM-узел принадлежит определённому классу. Классы формируют иерархию. Весь набор свойств и методов является результатом наследования.

Главные свойства DOM-узла:

nodeType - позволяет узнать тип DOM-узла.

nodeName/tagName - это свойство возвращает название тега. Только для чтения.

innerHTML - внутреннее HTML-содержимое узла-элемента. Можно изменять.

outerHTML - полный HTML узла-элемента. Запись в elem.outerHTML не меняет elem. Вместо этого она заменяет его во внешнем контексте.

nodeValue/data - содержимое узла-неэлемента (текст, комментарий). Можно изменять.

textContent - текст внутри элемента: HTML за вычетом всех <тегов>.

hidden - когда значение установлено в true, делает то же самое, что и CSS display:none.

В зависимости от своего класса DOM-узлы имеют и специфичные свойства.

#браузер #документ #свойства_узлов

👍14🔥4❤2

5.29K views10:11

Подробнее

JavaScript заметки

Привет, дорогой подписчик!

Мы молодая команда JS разработчиков, которая решила открыть несколько каналов в Telegram, посвященных JavaScript и frontend-разработке в целом.

Подписывайся на другие наши проекты:

JavaScript тесты - канал с тестами и задачами по JS. Здесь ты сможешь практиковаться и обсуждать свои решения с другими подписчиками и админами. Каждый день тебя будет ждать новый интересный вызов в виде очередной викторины.

JavaScript инструменты - канал с инструментами по JS. Здесь каждый день публикуются современные технологии призванные упростить разработку на JavaScript.

Полезная вËрстка - канал с готовым кодом интересных решений различных повседневных задач: слайдеры, навигации, различная анимация и многое другое.

Развивайся с нами, ведь так проще!

👍28❤3🔥3

6.61K views14:01

About

Blog

Apps

Platform