Как получить html содержимое dom элемента elem

Element

Теги HTML превращаются в элементы JavaScript, чтобы их можно было потрогать из кода.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. Как пишется
3. Как понять
   1. �� Свойства, связанные с HTML-атрибутами
   2. �� Свойства и методы, связанные с DOM
   3. �� Свойства с информацией о содержимом
   1. Николай Лопин советует

   Контрибьюторы:

   • Егор Левченко ,
   • Светлана Коробцева

   Обновлено 29 мая 2022

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   Элемент — это кусочек HTML в DOM-дереве. Браузер создаёт DOM для взаимодействия между JavaScript и HTML. Каждый HTML-тег при этом превращается в элемент DOM. Ещё такие элементы называют узлами.

   Из DOM можно получить элемент и изменить его. Браузер заметит изменения и отобразит их на странице.

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Например, можно поменять выравнивание у элемента h1 :

    // получаем элемент из DOMconst element = document.getElementsByTagName('h1')[0] // после выполнения этого кода h1 будет выравнивать текст по центруelement.align = 'center'// меняем цвет шрифта на красныйelement.style.color = 'red' // получаем элемент из DOM const element = document.getElementsByTagName('h1')[0] // после выполнения этого кода h1 будет выравнивать текст по центру element.align = 'center' // меняем цвет шрифта на красный element.style.color = 'red'    Скопировать Скопировано Не удалось скопировать   

   Как понять

   Скопировать ссылку «Как понять» Скопировано

   HTML-элементы содержат свойства, которые можно разделить на группы:

   • свойства, связанные с HTML-атрибутами: id, классы, стили и так далее;
   • свойства и методы связанные с обходом DOM: получение дочерних элементов, родителя, соседей;
   • информация о содержимом;
   • специфические свойства элемента.

   Первые три группы свойств есть у всех элементов. Специфические свойства отличаются в зависимости от типа элемента. Например, у полей ввода есть свойства, которых нет у параграфов и блоков: value , type и другие.

   �� Свойства, связанные с HTML-атрибутами

   Скопировать ссылку «�� Свойства, связанные с HTML-атрибутами» Скопировано

   Читать и записывать значения HTML-атрибутов можно при помощи свойств элемента. Название обычно совпадает с названием атрибута:

   • id — получить идентификатор элемента.
   • class Name — список классов в HTML-атрибуте class .

    const element = document.getElementsByTagName('div')[0] // напечатать список классов в консольconsole.log(element.className)// установить свой классelement.className = 'hacked' const element = document.getElementsByTagName('div')[0] // напечатать список классов в консоль console.log(element.className) // установить свой класс element.className = 'hacked'    Скопировать Скопировано Не удалось скопировать   

   • style — добавить стили. Стили добавляются так же с помощью свойств. Свойства именуются по аналогии с CSS-свойствами:

    const element = document.getElementsByTagName('div')[0] // CSS-свойство background-colorelement.style.backgroundColor = 'beige'// CSS-свойство colorelement.style.color = 'gray'// CSS-свойство margin-topelement.style.marginTop = '20px' const element = document.getElementsByTagName('div')[0] // CSS-свойство background-color element.style.backgroundColor = 'beige' // CSS-свойство color element.style.color = 'gray' // CSS-свойство margin-top element.style.marginTop = '20px'    Скопировать Скопировано Не удалось скопировать   

   �� Свойства и методы, связанные с DOM

   Скопировать ссылку «�� Свойства и методы, связанные с DOM» Скопировано

   • children — список дочерних элементов;
   • parent Element — получить родительский элемент;
   • next Element Sibling и previous Element Sibling — получить следующий/предыдущий узел-сосед:
   • get Elements By Class Name ( ) — поиск среди дочерних элементов по названию класса;
   • get Elements By Tag Name ( ) — поиск среди дочерних элементов по названию тега;
   • query Selector ( ) — поиск первого дочернего элемента, подходящего под CSS-селектор;
   • query Selector All ( ) — поиск всех дочерних элементов подходящих под CSS-селектор;

   С помощью этих свойств и методов можно перемещаться по дереву и даже обойти все его элементы, если это нужно.

   �� Свойства с информацией о содержимом

   Скопировать ссылку «�� Свойства с информацией о содержимом» Скопировано

   • inner H T M L — это свойство возвращает HTML-код всего, что вложено в текущий элемент. При записи в это свойство, предыдущее содержимое будет затёрто. Страница отобразит новое содержимое:

    const divElement = document.getElementsByTagName('div')[0]divElement.innerHTML = '
   Добавлен из кода
   '// после выполнения этого кода, на странице отобразится параграф с указанным текстом const divElement = document.getElementsByTagName('div')[0] divElement.innerHTML = '
   Добавлен из кода
   ' // после выполнения этого кода, на странице отобразится параграф с указанным текстом    Скопировать Скопировано Не удалось скопировать   

   • outer H T M L — это свойство возвращает HTML-код текущего элемента и всего, что в него вложено. При записи в это свойство, предыдущее содержимое будет затёрто.
   • text Content — свойство, возвращает текст всех вложенных узлов без HTML-тегов.

   Почувствуй разницу на демо:

   На практике

   Скопировать ссылку «На практике» Скопировано

   Николай Лопин советует

   Скопировать ссылку «Николай Лопин советует» Скопировано

   �� Если нужно добавить текст в элемент, то всегда используйте свойство text Content . Другие свойства обрабатывают HTML, это может привести к дырам в безопасности.

   �� Для работы с классами элемента есть удобные методы, доступные через свойство class List :

   • добавить класс — метод add ( ) .
   • удалить класс — метод remove ( ) .

    const element = document.getElementsByTagName('div')[0]element.classList.add('hello')element.classList.remove('bye') const element = document.getElementsByTagName('div')[0] element.classList.add('hello') element.classList.remove('bye')    Скопировать Скопировано Не удалось скопировать   

   �� В HTML часто используют data-атрибуты. Они используются, когда нужно передать данные через HTML. Например, когда сервер собирает стартовый HTML, он может поместить значения в data-атрибуты. Фронтендер затем может использовать их, вместо того, чтобы отправлять запрос на сервер. Название таких атрибутов начинаются с префикса data — . Для доступа к ним из JavaScript используется свойство dataset :

    const element = document.getElementsByTagName('div')[0] // получить значение атрибута data-columns тега divconsole.log(element.dataset.columns)// изменить значениеelement.dataset.columns = 99 const element = document.getElementsByTagName('div')[0] // получить значение атрибута data-columns тега div console.log(element.dataset.columns) // изменить значение element.dataset.columns = 99    Скопировать Скопировано Не удалось скопировать   

   �� У элементов очень много свойств. Если нужно что-то получить из элемента, то скорее всего уже есть свойство, которое хранит эти данные.

   �� Если нужно удалить элемент и все вложенные в него, воспользуйтесь методом remove ( ) :

    const element = document.querySelector('#some-element')element.remove() const element = document.querySelector('#some-element') element.remove()    Скопировать Скопировано Не удалось скопировать   

   Навигация по DOM-элементам

   DOM позволяет нам делать что угодно с элементами и их содержимым, но для начала нужно получить соответствующий DOM-объект.

   Все операции с DOM начинаются с объекта document . Это главная «точка входа» в DOM. Из него мы можем получить доступ к любому узлу.

   Так выглядят основные ссылки, по которым можно переходить между узлами DOM:

   Поговорим об этом подробнее.

   Сверху: documentElement и body

   Самые верхние элементы дерева доступны как свойства объекта document :

   = document.documentElement Самый верхний узел документа: document.documentElement . В DOM он соответствует тегу . = document.body Другой часто используемый DOM-узел – узел тега : document.body . = document.head Тег доступен как document.head .

   Есть одна тонкость: document.body может быть равен null

   Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.

   В частности, если скрипт находится в , document.body в нём недоступен, потому что браузер его ещё не прочитал.

   Поэтому, в примере ниже первый alert выведет null :

   В мире DOM null означает «не существует»

   В DOM значение null значит «не существует» или «нет такого узла».

   Дети: childNodes, firstChild, lastChild

   Здесь и далее мы будем использовать два принципиально разных термина:

   • Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например, и являются детьми элемента .
   • Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д.
   (и несколько пустых текстовых узлов):

   и вложенные в них:
   (ребёнок
   ) и (ребёнок
   ) – в общем, все элементы поддерева.

   Коллекция childNodes содержит список всех детей, включая текстовые узлы.

   Пример ниже последовательно выведет детей document.body :

   Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент . На самом деле, в документе есть ещё «какой-то HTML-код», но на момент выполнения скрипта браузер ещё до него не дошёл, поэтому скрипт не видит его.

   Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему элементу.

   Они, по сути, являются всего лишь сокращениями. Если у тега есть дочерние узлы, условие ниже всегда верно:

   elem.childNodes[0] === elem.firstChild elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

   Для проверки наличия дочерних узлов существует также специальная функция elem.hasChildNodes() .

   DOM-коллекции

   Как мы уже видели, childNodes похож на массив. На самом деле это не массив, а коллекция – особый перебираемый объект-псевдомассив.

   И есть два важных следствия из этого:

   1. Для перебора коллекции мы можем использовать for..of :

   for (let node of document.body.childNodes) < alert(node); // покажет все узлы из коллекции >

   Это работает, потому что коллекция является перебираемым объектом (есть требуемый для этого метод Symbol.iterator ).

   1. Методы массивов не будут работать, потому что коллекция – это не массив:

   alert(document.body.childNodes.filter); // undefined (у коллекции нет метода filter!)

   Первый пункт – это хорошо для нас. Второй – бывает неудобен, но можно пережить. Если нам хочется использовать именно методы массива, то мы можем создать настоящий массив из коллекции, используя Array.from :

   alert( Array.from(document.body.childNodes).filter ); // сделали массив

   DOM-коллекции – только для чтения

   DOM-коллекции, и даже более – все навигационные свойства, перечисленные в этой главе, доступны только для чтения.

   Мы не можем заменить один дочерний узел на другой, просто написав childNodes[i] = . .

   Для изменения DOM требуются другие методы. Мы увидим их в следующей главе.

   DOM-коллекции живые

   Почти все DOM-коллекции, за небольшим исключением, живые. Другими словами, они отражают текущее состояние DOM.

   Если мы сохраним ссылку на elem.childNodes и добавим/удалим узлы в DOM, то они появятся в сохранённой коллекции автоматически.

   Не используйте цикл for..in для перебора коллекций

   Коллекции перебираются циклом for..of . Некоторые начинающие разработчики пытаются использовать для этого цикл for..in .

   Не делайте так. Цикл for..in перебирает все перечисляемые свойства. А у коллекций есть некоторые «лишние», редко используемые свойства, которые обычно нам не нужны:

   Соседи и родитель

   Соседи – это узлы, у которых один и тот же родитель.

   Например, здесь и соседи:

   • говорят, что – «следующий» или «правый» сосед
   • также можно сказать, что «предыдущий» или «левый» сосед .

   Следующий узел того же родителя (следующий сосед) – в свойстве nextSibling , а предыдущий – в previousSibling .

   Родитель доступен через parentNode .

   // родителем является alert( document.body.parentNode === document.documentElement ); // выведет true // после идёт alert( document.head.nextSibling ); // HTMLBodyElement // перед находится alert( document.body.previousSibling ); // HTMLHeadElement

   Навигация только по элементам

   Навигационные свойства, описанные выше, относятся ко всем узлам в документе. В частности, в childNodes находятся и текстовые узлы и узлы-элементы и узлы-комментарии, если они есть.

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

   Поэтому давайте рассмотрим дополнительный набор ссылок, которые учитывают только узлы-элементы:

   Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово Element :

   • children – коллекция детей, которые являются элементами.
   • firstElementChild , lastElementChild – первый и последний дочерний элемент.
   • previousElementSibling , nextElementSibling – соседи-элементы.
   • parentElement – родитель-элемент.

   Зачем нужен parentElement ? Разве может родитель быть не элементом?

   Свойство parentElement возвращает родитель-элемент, а parentNode возвращает «любого родителя». Обычно эти свойства одинаковы: они оба получают родителя.

   За исключением document.documentElement :

   alert( document.documentElement.parentNode ); // выведет document alert( document.documentElement.parentElement ); // выведет null

   Причина в том, что родителем корневого узла document.documentElement ( ) является document . Но document – это не узел-элемент, так что parentNode вернёт его, а parentElement нет.

   Эта деталь может быть полезна, если мы хотим пройти вверх по цепочке родителей от произвольного элемента elem к , но не до document :

   while(elem = elem.parentElement) < // идти наверх до alert( elem ); >

   Изменим один из примеров выше: заменим childNodes на children . Теперь цикл выводит только элементы:

   Свойства узлов: тип, тег и содержимое

   Теперь давайте более внимательно взглянем на 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 содержится его имя:

     Получение и установка контента элементам в JavaScript

     На этом уроке мы рассмотрим свойства, предназначенные для работы с текстовым содержимым элемента ( textContent , innerText , outerText ) и свойства, предназначенные для работы с HTML содержимым элемента ( innerHTML , outerHTML ).

     Свойство textContent и как оно работает

     textContent – это свойство, которое предназначено для работы с текстовым контентом элемента. Оно позволяет его как получить (включая текстовое содержимое всего его потомков), так и установить.

     JavaScript

     // $elem – некоторый DOM-элемент // получим текстовый контент $elem const text = $elem.textContent; // установим текстовый контент $elem: $elem.textContent = 'Некоторый текст. ';

     Примеры с textContent

     1. При получении текста элемента, содержащего один текстовый узел, textContent возвратит текст, находящийся внутри этого текстового узла.

     Некоторый текст
       

     2. Для элемента, который содержит множество других узлов, textContent вернёт конкатенацию (сложение) текстов всех его текстовых узлов.

     

     Внимание! Это очень важный текст.
       

     В этом примере текстовые узлы обозначены цифрами. textContent вернёт сложение текстов этих текстовых узлов.

     3. При получении textContent у document , оно возвратит null :

     JavaScript

     const text = document.textContent; // null

     При установке элементу текстового содержимого, textContent удалит всего его узлы (при их наличии), и добавит в него один текстовый узел, содержащий указанный текст.

     4. Например, установим элементу #message новое текстовое содержимое:

      
     Внимание! 
     Это очень важный текст.
       

     После установки $elem текстового контента, он будет выглядеть следующим образом:

     

     5. Например, создадим элемент « div.alert », вставим в него некоторый текст и добавим его на страницу перед закрывающим тегом body :

     JavaScript

     // создадим элемент const $alert = document.createElement('div'); // добавим к $alert класс alert $alert.className = 'alert'; // установим $alert текстовый контент $alert.textContent = 'Некоторый текст. '; // вставим на страницу перед document.body.appendChild($alert);

     6. Если присвоить textContent строку, содержащую HTML код, то символы < и >будут заменены соответственно на < и > .

     JavaScript

     $elem.textContent = '
     .
      '; const text = $elem.textContent; // "<p>. </p>"

     innerText, outerText и их отличие от textContent

     innerText также как textContent используется для извлечения текста из элементов.

     Но innerText в отличие от textContent как бы копирует текст, отображаемый этим элементом в браузере . Он учитывает стили, применённые к элементу (отображается элемент или нет). Когда элемент скрыт, innerText не включает его текстовый контент в возвращаемые данные.

     Кроме этого, innerText не добавляет в возвращаемый результат содержимое style и script .

     При установке элементу текстового контента, innerText также как textContent удаляет все имеющиеся в нём узлы и создаёт новый текстовый узел с указанным содержимым.

     Синтаксис свойства innerText :

     JavaScript

     // получим текстовый контент $elem const text = $elem.innerText; // зададим $elem текстовый контент $elem.innerText = 'Новый текст. ';

     Пример , в котором показана разница между innerText и textContent :

     Внимание! Это очень важный текст.
       

     Из примера видно, что innerText не включает в возвращаемые данные контент элемента script .

     В этом примере мы ещё дополнительно удалим отображение элемента span из документа, т.е. установим ему « display: none »:

       
     Внимание! Это очень важный текст.
       

     Таким образом innerText учитывает стили элементов, и возвращает только текст отображаемый этим элементом в браузере.

     

     outerText

     Ещё в DOM API у элементов имеется свойство outerText . Оно возвращает текстовое содержимое элемента аналогично свойству innerText .

     Синтаксис свойства outerText :

     JavaScript

     // получим текстовый контент $elem const text = $elem.outerText; // установим $elem текстовый контент $elem.outerText = 'Текстовый контент. ';

     Его отличие от innerText только в том, что outerText при установки элементу текстового контента удаляет не только всё его содержимое, но и сам этот элемент и помещает на этом месте новый текстовый узел с заданным текстом.

     Например , заменим все элементы img на текст ‘Здесь было изображение’ :

     JavaScript

      
     .
      
     .
       

     innerHTML и outerHTML

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

     JavaScript

     // получим HTML содержимое $elem const html = $elem.innerHTML; // установим $elem новый HTML $elem.innerHTML = '. ';

     Например, установим элементу ul#list новое HTML содержимое:

     JavaScript

     Пример, в котором получим HTML разметку некоторого элемента:

     JavaScript

     Я люблю JavaScript! Он позволяет сделать что угодно со страницей.
       

     Задание HTML содержимого элементу с помощью innerHTML всегда сопровождается удалением его контента и установкой ему новой HTML разметки, но основе указанной строки, которая была разобрана внутренним парсером браузера как HTML.

     Начинающие веб-разработчики при написании такого кода полагают что он добавит только указанную HTML разметку в конец содержимого $someElem :

     JavaScript

     $someElem.innerHTML += '
     .
      ';

     Но на самом деле это не так. Этот код выполняет следующее:

     1. получает текущее содержимое $someElem , т.е. HTML-строку, к которой прибавляет ещё одну строку
        .

        ;

     2. очищает всё что есть в $someElem ;
     3. устанавливает $someElem HTML, полученный в результате разбора результирующей строки.

     Эквивалентная запись кода, приведённого выше:

     JavaScript

     let html = $someElem.innerHTML; html = html + '
     .
      '; $someElem.innerHTML = html;

     Таким образом, используя такую запись мы не просто добавляем некоторый HTML в конец элемента, а полностью переустанавливаем его. Выполнение такого кода обычно сопровождается «миганием».

     Поэтому, в ситуациях, когда вам нужно просто добавить некоторый фрагмент HTML разметки в некоторый элемент лучше воспользоваться, например, методом insertAdjacentHTML .

     Пример использования innerHTML для очистки содержимого элемента:

     JavaScript

     $elem.innerHTML = '';

     Например, получить и изменить HTML контент элемента р с id=»myP» :

     JavaScript

     var myP = document.getElementById("myP"); //получить HTML содержимое элемента, имеющего myP.innerHTML; //изменить HTML содержимое элемента, имеющего myP.innerHTML = "Что-то новое";

     Например, удалить HTML контент элемента p , имеющего id=»demo» :

     JavaScript

     document.getElementById("demo").innerHTML = "";

     

     outerHTML

     Свойство outerHTML устанавливает или возвращает HTML контент, представляющий сам элемент и его дочерние элементы.

     Например, получить и изменить HTML контент списка ul , имеющего id=»myList» :

     JavaScript

     • HTML
     • CSS
     • JavaScript

     Задания

     1. Напишите сценарий, который изменит содержимое всех элементов p в документе.
     2. Напишите сценарий, который заменит HTML содержимое элемента body на другое. Условием для запуска сценария является время, равное 5 секундам, которое прошло с момента полной загрузки страницы.
     Читать:

     Сколько масла в кпп луаза заливается