Node.textContent
Позволяет задавать или получать текстовое содержимое элемента и его потомков.
Синтаксис
var text = element.textContent; element.textContent = "Это просто текст";
Описание
- textContent возвращает null, если узел является документом (en-US), типом документа, или его описанием. Для получения всего текста и CDATA-данных во всём документе можно использовать document.documentElement.textContent .
- Если узел является CDATA, комментарием, инструкцией, или текстовым элементом, textContent возвращает текст внутри узла в виде строки (т.н. nodeValue (en-US)).
- Для узлов других типов textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.
- Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.
Отличие от innerText
element.innerText был введён Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:
- textContent получает содержимое всех элементов, включая и , тогда как innerText этого не делает.
- innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
- Метод innerText позволяет получить CSS, а textContent — нет.
Отличие от innerHTML
innerHTML , как можно понять из его названия, возвращает HTML. Довольно часто innerHTML используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать textContent : этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.
Пример
// Дан следующий фрагмент: //Это — просто текст// Достаём текстовое содержимое: var text = document.getElementById("block").textContent; // В переменной |text| находится: "Это — просто текст". // Меняем текст: document.getElementById("block").textContent = "Это — просто текст"; // Теперь наш фрагмент выглядит так: //Это — просто текст
Совместимость с браузерами
BCD tables only load in the browser
Спецификация
Смотрите также
- Подробнее о различиях innerText и textContent (пост в блоге)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
Innertext js что это
Для работы с элементами на веб-странице мы можем использовать как функциональность типа Node, который представляет любой узел веб-страницы, так и функциональность типа HTMLElement , который собственно представляет элемент. То есть объекты HTMLElement — это фактически те же самые узлы — объекты Node, у которых тип узла (свойство nodeType) равно 1.
Каждый элемент веб-страницы соответствует определенному типу в JavaScript. Но все эти типы являются пол типами типа HTMLElement , который определяет базовую функциональность элементов. Вкратце перечислю актуальные типы элементов:
- : тип HTMLAnchorElement
- : тип HTMLElement
- : тип HTMLElement
- : тип HTMLAreaElement
- : тип HTMLAudioElement
- : тип HTMLElement
- : тип HTMLBaseElement
- : тип HTMLElement
- : тип HTMLQuoteElement
- : тип HTMLBodyElement
- : тип HTMLBRElement
- : тип HTMLButtonElement
- : тип HTMLTableCaptionElement
- : тип HTMLCanvasElement
- : тип HTMLElement
- : тип HTMLElement
- , : тип HTMLTableColElement
- : тип HTMLDataElement
- : тип HTMLDataListElement
- : тип HTMLElement
- : тип HTMLModElement
- : тип HTMLElement
- : тип HTMLDivElement
- : тип HTMLDListElement
- : тип HTMLElement
- : тип HTMLElement
- : тип HTMLEmbedElement
- : тип HTMLFieldSetElement
- : тип HTMLFormElement
- , , , , , : тип HTMLHeadingElement
- : тип HTMLHeadElement
-
: тип HTMLHRElement
- : тип HTMLHtmlElement
- : тип HTMLElement
- : тип HTMLIFrameElement
: тип HTMLImageElement
- : тип HTMLInputElement
- : тип HTMLModElement
- : тип HTMLElement
- : тип HTMLKeygenElement
- : тип HTMLLabelElement
- : тип HTMLLegendElement
- : тип HTMLLIElement
- : тип HTMLLinkElement
- : тип HTMLMapElement
- : тип HTMLMediaElement
- : тип HTMLMetaElement
- : тип HTMLMeterElement
- : тип HTMLElement
- : тип HTMLObjectElement
- : тип HTMLOListElement
- : тип HTMLOptGroupElement
- : тип HTMLOptionElement
- : тип HTMLOutputElement
-
: тип HTMLParagraphElement
- : тип HTMLParamElement
- : тип HTMLPreElement
- : тип HTMLProgressElement
- : тип HTMLQuoteElement
- : тип HTMLElement
- : тип HTMLElement
- : тип HTMLScriptElement
- : тип HTMLSelectElement
- : тип HTMLElement
- : тип HTMLSourceElement
- : тип HTMLSpanElement
- : тип HTMLElement
- : тип HTMLStyleElement
- : тип HTMLElement
- : тип HTMLElement
- : тип HTMLTableElement
- : тип HTMLTableSectionElement
- : тип HTMLTableCellElement
- : тип HTMLTextAreaElement
- : тип HTMLTableSectionElement
- : тип HTMLTableHeaderCellElement
- : тип HTMLTableSectionElement
- : тип HTMLTimeElement
- : тип HTMLTitleElement
- : тип HTMLTableRowElement
- : тип HTMLTrackElement
-
-
: тип HTMLUListElement
- : тип HTMLElement / HTMLUnknownElement
- : тип HTMLVideoElement
Мы можем получить конкретный тип элемента с помощью метода Object.getPrototypeOf() :
METANIT.COM Home Page
Свойства элементов
Тип Element предоставляет ряд свойств, которые хранят информацию об элементе:
- tagName : возвращает тег элемента
- textContent : представляет текстовое содержимое элемента
- innerText : представляет текстовое содержимое элемента (аналогично textContent)
- innerHTML : представляет html-код элемента
Одним из ключевых свойств объекта Element является свойство tagName , которое возвращает тег элемента:
METANIT.COM Home Page
Управление текстом элемента
Свойство textContent позволяет получить или изменить текстовое содержимое элемента:
METANIT.COM Home Page
Аналогично можно использовать другое свойство для управление текстом — innerText :
METANIT.COM Home Page
Тем не менее между textContent и innerText есть некоторые различия:
- textContent получает содержимое всех элементов, включая и
- innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
- innerText позволяет получить CSS, а textContent — нет.
Управление кодом HTML
Ни textContent , ни innerText не позволяют ни получить, ни изменить код html элемента. Например:
header.innerText = "Hello World";
Это изменит только текст, но не html код. Для управления html применяется свойство innerHTML :
METANIT.COM Home Page
.inner Text
Читаем весь текст во вложенных элементах или записываем свой.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 6 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство inner Text позволяет считывать или задавать текстовое содержимое элемента. При считывании текста с элемента будет возвращена строка с текстовым содержимым всех вложенных дочерних элементов. Не будет считываться только содержимое скрытых с помощью CSS элементов, а так же содержимое тегов и .
Аналогичной функциональностью обладает свойство text Content , но он возвращает содержимое всех дочерних элементов, даже скрытых:
Пример
Скопировать ссылку «Пример» Скопировано
form> label for='name'>Имяlabel> input type="text" id="name"> button type="submit" id="submit">Submitbutton> form>
const form = document.querySelector('form')const button = document.getElementById('submit') console.log(form.innerText)// "ИмяSubmit" button.innerText = 'Done!'console.log(button)//const form = document.querySelector('form') const button = document.getElementById('submit') console.log(form.innerText) // "ИмяSubmit" button.innerText = 'Done!' console.log(button) //
Как понять
Скопировать ссылку «Как понять» Скопировано
Считывание и изменение текстового содержимого – довольно распространённая задача. inner Text позволяет считывать содержимое элемента и всего потомков, но с несколькими исключениями:
- не считывается содержимое тегов и ;
- не считывается содержимое скрытых элементов.
Свойство может изменять только текстовое содержимое элемента, если попытаться присвоить строку с HTML, она вставится как текст и не превратится в реальные DOM-элементы. Чтобы HTML в строке сработал, используйте inner H T M L .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Свойство inner Text работает и как геттер, и как сеттер — обращение к свойству вернёт текстовое содержимое элементов и его потомков, а установка нового значения изменит все текстовое содержимое элемента.
Например, мы хотим изменить текст в блоке после окончания загрузки:
Loading.div id="loading-status"> Loading. div>
const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Data loaded!'const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Data loaded!'
В результате в браузере будет отображаться следующий HTML:
Data loaded!div id="loading-status"> Data loaded! div>
Установка нового текста с помощью inner Text полностью удалит все старое содержимое и запишет новое текстовое значение. Если внутри элемента были другие вложенные потомки, то все они удалятся.
Предположим, что в блоке статуса загрузки был ещё элемент отображающий иконку-лоадер.
Loading.div id="loading-status"> div class="fancy-loader">div> Loading. div>
Установка нового значения в inner Text полностью удалит все предыдущее содержимое и перезапишет его новым текстом.
const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Error occurred!'const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Error occurred!'
После выполнения кода, внутри блока останется только текст:
Error occurred!div id="loading-status"> Error occurred! div>
Свойства узлов: тип, тег и содержимое
Теперь давайте более внимательно взглянем на 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 содержится его имя:
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в