Запись в textContent (безопасный способ)
Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.
- С
- С
Сравним два тега div (см. пример выше на картинке).
- В первый
- Во второй
В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через
#браузер #документ #свойства_узлов
Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.
- С
innerHTML вставка происходит «как HTML», со всеми HTML-тегами.- С
textContent вставка получается «как текст», все символы трактуются буквально.Сравним два тега div (см. пример выше на картинке).
- В первый
<div> имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом.- Во второй
<div> имя приходит «как текст», поэтому мы видим <b>Винни-пух!</b>.В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через
textContent – один из способов от этого защититься.#браузер #документ #свойства_узлов
👍5
Свойство «hidden»
Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет.
Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке).
Технически,
#браузер #документ #свойства_узлов
Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет.
Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке).
Технически,
hidden работает так же, как style="display:none". Но его применение проще.#браузер #документ #свойства_узлов
👍5
Другие свойства
У DOM-элементов есть дополнительные свойства, в частности, зависящие от класса:
-
-
-
- …и многие другие…
Большинство стандартных HTML-атрибутов имеют соответствующее DOM-свойство, и мы можем получить к нему доступ.
Если мы хотим узнать полный список поддерживаемых свойств для данного класса, можно найти их в спецификации. Например, класс
Если же нам нужно быстро что-либо узнать или нас интересует специфика определённого браузера – мы всегда можем вывести элемент в консоль, используя
#браузер #документ #свойства_узлов
У 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 браузерных инструментов разработчика.#браузер #документ #свойства_узлов
👍5
Итого по свойствам узлов
Каждый DOM-узел принадлежит определённому классу. Классы формируют иерархию. Весь набор свойств и методов является результатом наследования.
Главные свойства DOM-узла:
nodeType - позволяет узнать тип DOM-узла.
nodeName/tagName - это свойство возвращает название тега. Только для чтения.
innerHTML - внутреннее HTML-содержимое узла-элемента. Можно изменять.
outerHTML - полный HTML узла-элемента. Запись в
nodeValue/data - содержимое узла-неэлемента (текст, комментарий). Можно изменять.
textContent - текст внутри элемента: HTML за вычетом всех
hidden - когда значение установлено в
В зависимости от своего класса DOM-узлы имеют и специфичные свойства.
#браузер #документ #свойства_узлов
Каждый DOM-узел принадлежит определённому классу. Классы формируют иерархию. Весь набор свойств и методов является результатом наследования.
Главные свойства DOM-узла:
nodeType - позволяет узнать тип DOM-узла.
nodeName/tagName - это свойство возвращает название тега. Только для чтения.
innerHTML - внутреннее HTML-содержимое узла-элемента. Можно изменять.
outerHTML - полный HTML узла-элемента. Запись в
elem.outerHTML не меняет elem. Вместо этого она заменяет его во внешнем контексте.nodeValue/data - содержимое узла-неэлемента (текст, комментарий). Можно изменять.
textContent - текст внутри элемента: HTML за вычетом всех
<тегов>. hidden - когда значение установлено в
true, делает то же самое, что и CSS display:none.В зависимости от своего класса DOM-узлы имеют и специфичные свойства.
#браузер #документ #свойства_узлов
👍5🔥1
Атрибуты и свойства
Когда браузер загружает страницу, он «парсит» HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.
Например, для такого тега
#браузер #документ #атрибуты_свойств
Когда браузер загружает страницу, он «парсит» HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.
Например, для такого тега
<body id="page"> у DOM-объекта будет такое свойство body.id="page".#браузер #документ #атрибуты_свойств
👍4
DOM-свойства
Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.
DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.
Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:
- Им можно присвоить любое значение.
- Они регистрозависимы (нужно писать
#браузер #документ #атрибуты_свойств
Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.
DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.
Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:
- Им можно присвоить любое значение.
- Они регистрозависимы (нужно писать
elem.nodeType, не elem.NoDeTyPe).#браузер #документ #атрибуты_свойств
👍3
HTML-атрибуты
В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.
Таким образом, когда у элемента есть
если атрибут нестандартный.
#браузер #документ #атрибуты_свойств
В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.
Таким образом, когда у элемента есть
id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.
#браузер #документ #атрибуты_свойств
👍3
Расширенная демонстрация работы с атрибутами
Пожалуйста, обратите внимание:
1.
2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение
3. Все атрибуты, в том числе те, которые мы установили, видны в
4. Коллекция
#браузер #документ #атрибуты_свойств
Пожалуйста, обратите внимание:
1.
getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение
"123".3. Все атрибуты, в том числе те, которые мы установили, видны в
outerHTML.4. Коллекция
attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value.#браузер #документ #атрибуты_свойств
👍6
Синхронизация между атрибутами и свойствами
Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).
В примере выше
#браузер #документ #атрибуты_свойств
Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).
В примере выше
id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону.#браузер #документ #атрибуты_свойств
👍2🔥2
Исключения синхронизации
Но есть и исключения, например,
В примере выше:
- Изменение атрибута
- Но изменение свойства не повлияло на атрибут.
Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям
#браузер #документ #атрибуты_свойств
Но есть и исключения, например,
input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную.В примере выше:
- Изменение атрибута
value обновило свойство.- Но изменение свойства не повлияло на атрибут.
Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям
value, и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.#браузер #документ #атрибуты_свойств
👍4
DOM-свойства типизированы
DOM-свойства не всегда являются строками. Например, свойство
Есть и другие примеры. Атрибут
Хотя большинство свойств, всё же, строки.
При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство
#браузер #документ #свойства_узлов
DOM-свойства не всегда являются строками. Например, свойство
input.checked (для чекбоксов) имеет логический тип.Есть и другие примеры. Атрибут
style – строка, но свойство style является объектом.Хотя большинство свойств, всё же, строки.
При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство
href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash.#браузер #документ #свойства_узлов
👍5
Нестандартные атрибуты, dataset
При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.
Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.
#браузер #документ #атрибуты_свойств
При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.
Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.
#браузер #документ #атрибуты_свойств
👍5🔥1
Атрибуты для стилизации элементов
Например, здесь для состояния заказа используется атрибут
Почему атрибут может быть предпочтительнее таких классов, как
Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто.
#браузер #документ #атрибуты_свойств
Например, здесь для состояния заказа используется атрибут
order-state (см. картинку выше).Почему атрибут может быть предпочтительнее таких классов, как
.order-state-new, .order-state-pending, order-state-canceled?Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто.
#браузер #документ #атрибуты_свойств
👍5
"Зарезервированные" атрибуты (dataset)
Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве
Например, если у
Атрибуты, состоящие из нескольких слов, к примеру
См. переписанный пример «состояния заказа» на картинке выше.
Использование
#браузер #документ #атрибуты_свойств
Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве
dataset.Например, если у
elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about.Атрибуты, состоящие из нескольких слов, к примеру
data-order-state, становятся свойствами, записанными с помощью верблюжьей нотации (CamelCase): dataset.orderState.См. переписанный пример «состояния заказа» на картинке выше.
Использование
data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.#браузер #документ #атрибуты_свойств
👍3
Итого по атрибутам и свойствам
Атрибуты – это то, что написано в HTML.
Свойства – это то, что находится в DOM-объектах.
Методы для работы с атрибутами:
В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:
- Нужен нестандартный атрибут. Но если он начинается с
- Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство
#браузер #документ #атрибуты_свойств
Атрибуты – это то, что написано в HTML.
Свойства – это то, что находится в DOM-объектах.
Методы для работы с атрибутами:
elem.hasAttribute(name) – проверить на наличие.elem.getAttribute(name) – получить значение.elem.setAttribute(name, value) – установить значение.elem.removeAttribute(name) – удалить атрибут.elem.attributes – это коллекция всех атрибутов.В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:
- Нужен нестандартный атрибут. Но если он начинается с
data-, тогда нужно использовать dataset.- Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство
href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.#браузер #документ #атрибуты_свойств
👍8
Изменение документа
Добро пожаловать в новую главу на нашем канале "Изменение документа".
Модификации DOM – это ключ к созданию «живых» страниц.
Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.
P.S. Найти все посты по этой главе вы можете с помощью комбинации хештегов, которые указаны ниже.
#браузер #документ #изменение
Добро пожаловать в новую главу на нашем канале "Изменение документа".
Модификации DOM – это ключ к созданию «живых» страниц.
Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.
P.S. Найти все посты по этой главе вы можете с помощью комбинации хештегов, которые указаны ниже.
#браузер #документ #изменение
👍4
Пример: показать сообщение
Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем
Это был пример HTML. Далее мы будем создавать такой же
#браузер #документ #изменение
Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем
alert.Это был пример HTML. Далее мы будем создавать такой же
div, используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).#браузер #документ #изменение
👍4
Создание элемента
DOM-узел можно создать двумя методами:
Большую часть времени нам нужно создавать узлы элементов, такие как
#браузер #документ #изменение
DOM-узел можно создать двумя методами:
document.createElement(tag) - создаёт новый элемент с заданным тегом.document.createTextNode(text) - создаёт новый текстовый узел с заданным текстом.Большую часть времени нам нужно создавать узлы элементов, такие как
div для сообщения.#браузер #документ #изменение
👍4
Создание сообщения
В нашем случае сообщение – это
Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.
#браузер #документ #изменение
В нашем случае сообщение – это
div с классом alert и HTML в нём.Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.
#браузер #документ #изменение
👍3
Методы вставки, append
Чтобы наш
Для этого есть метод
#браузер #документ #изменение
Чтобы наш
div появился, нам нужно вставить его где-нибудь в document. Например, в document.body.Для этого есть метод
append, в нашем случае: document.body.append(div).#браузер #документ #изменение
👍5