Как работат метод innerhtml в js?
.innerHTML позволяет читать и изменять содержимое HTML-элемента. При записи старое содержимое заменяется новым. Перед этим новое значение будет разобрано как HTML, и если обнаружатся ошибки, метод выбросит исключение.
class="example"> href="#" class="example_link" >link class="example_text">Text const example = document.querySelector('.example'); console.log(example.innerHTML); // => 'linkText
' const example = document.querySelector('.example'); example.innerHTML = 'new text'; console.log(example.innerHTML); // => 'new text' Свойства узлов: тип, тег и содержимое
Теперь давайте более внимательно взглянем на DOM-узлы.
В этой главе мы подробнее разберём, что они собой представляют и изучим их основные свойства.
Классы DOM-узлов
Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
На рисунке ниже изображены основные классы:
Существуют следующие классы:
- EventTarget – это корневой «абстрактный» класс для всего. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
- Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode , nextSibling , childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуются от него (и следовательно наследуют функционал Node ).
- Document, по историческим причинам часто наследуется HTMLDocument (хотя последняя спецификация этого не навязывает) – это документ в целом. Глобальный объект document принадлежит именно к этому классу. Он служит точкой входа в DOM.
- CharacterData – «абстрактный» класс. Вот, кем он наследуется:
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в
Hello
.
- Comment – класс для комментариев. Они не отображаются, но каждый комментарий становится членом DOM.
- HTMLInputElement – класс для тега ,
- HTMLBodyElement – класс для тега ,
- HTMLAnchorElement – класс для тега ,
- …и т.д.
Также существует множество других тегов со своими собственными классами, которые могут иметь определенные свойства и методы, в то время как некоторые элементы, такие как , и , не имеют каких-либо определенных свойств, поэтому они являются экземплярами класса HTMLElement .
Таким образом, полный набор свойств и методов данного узла является результатом цепочки наследования.
Рассмотрим DOM-объект для тега . Он принадлежит классу HTMLInputElement.
Он получает свойства и методы из (в порядке наследования):
- HTMLInputElement – этот класс предоставляет специфичные для элементов формы свойства,
- HTMLElement – предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
- Element – предоставляет типовые методы элемента,
- Node – предоставляет общие свойства DOM-узлов,
- EventTarget – обеспечивает поддержку событий (поговорим о них дальше),
- …и, наконец, он наследует от Object , поэтому доступны также методы «обычного объекта», такие как hasOwnProperty .
Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство constructor . Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя:
Свойство innerHTML
Свойство innerHTML позволяет получить и изменить HTML код элемента.
Синтаксис
элемент.innerHTML;
Пример
Давайте выведем HTML код элемента:
text
let elem = document.querySelector(‘#elem’); console.log(elem.innerHTML);
Результат выполнения кода:
Пример
Давайте поменяем HTML код на новый:
text
let elem = document.querySelector(‘#elem’); elem.innerHTML = ‘. ‘;
Результат выполнения кода:
Смотрите также
- свойство textContent ,
которое содержит текст элемента - свойство outerHTML ,
которое содержит внешний HTML код элемента
Понимание innerHTML в Javascript
В Javascript у нас есть много разных способов манипулировать элементами DOM. Элементы DOM — это элементы HTML, которые мы определяем, когда пишем наши скрипты. Когда мы нацеливаемся на определенный элемент DOM, часто бывает полезно установить его содержимое с новым содержимым HTML или получить его содержимое HTML для использования в другом месте.
Для этого мы используем innerHTML . Все элементы Javascript типа DOM имеют присоединенное свойство innerHTML . Подробнее о выборе элементов HTML с помощью Javascript можно узнать здесь, однако Самый простой способ — использовать такой метод, как getElementById : n
let getElement = document.getElementById('my-element')Здесь Javascript будет искать элемент с идентификатором #my-element в HTML-содержимом вашей страницы. Если он существует, он вернет HTMLElement , который будет содержать свойство innerHTML : n
let getElement = document.getElementById('my-element') console.log(getElement.innerHTML)Теперь мы можем легко получить содержимое HTML, включая текст, из #my-element . Примечание: если вы используете querySelectorAll для выбора HTML-элементов, будет возвращено несколько HTMLElement , поэтому убедитесь, вы выбираете только один.
Настройка HTML-элементов innerHTML
Помимо получения innerHTML из элемента, мы также можем переопределить его по своему усмотрению. Например, ниже мы можем указать, что содержимое наших элементов будет просто тегом : n
let getElement = document.getElementById('my-element') getElement.innerHTML = 'Hello World
'Содержимое, которое мы передаем в innerHTML , будет проанализировано как HTML и отображено пользователю. При этом следует учитывать две вещи:
* Если, например, вы делаете это через API, и кто-то может отправить содержимое для отображения на странице, вы можете столкнуться с некоторыми проблемами безопасности. Поэтому вам нужно быть осторожным при использовании этого, чтобы в конечном итоге кто-то не взломал и не отправил случайный контент или вредоносный код многим пользователям. * Это заменит все содержимое внутри HTML-элемента, что может быть не тем, что вам нужно.
Проблемы безопасности при использовании innerHTML
Что касается проблем безопасности, если вы беспокоитесь об использовании этого метода для установки HTML, вы можете использовать setHTML() , который очистит ввод и удалит любой недействительный HTML (в отличие от innerHTML ). Он также удаляет код, который считает небезопасным. В качестве альтернативы вы можете использовать textContent , однако это не позволит вам добавить HTML или скрипты в тег.
Для базовых манипуляций, когда вы полностью контролируете то, что делается, можно использовать innerHTML с относительно небольшими проблемами. Итак, наконец, вы хотите добавить содержимое внутри вашего HTML-элемента в дополнение к тому, что уже есть, вместо того, чтобы заменять его при использовании innerHTML , вы можете сделать что-то вроде этого: n
let getElement = document.getElementById('my-element') getElement.innerHTML = 'Hello World
' + getElement.innerHTMLПриведенный выше код добавит тег поверх остального контента, сохраняя при этом существующий контент.
Заключение
innerHTML – это распространенный инструмент для управления HTML-содержимым элемента или его получения. Он широко используется, и его легко понять. Хотя существуют некоторые проблемы с безопасностью в отношении вставки HTML, во многих случаях это допустимый метод.
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в