Textcontent js что это
JavaScript | Чем отличается innerText от textContent?
Отличие № 1
textContent возвращает содержимое узла БЕЗ HTML-разметки и БЕЗ СИМВОЛОВ ПЕРЕНОСА СТРОКИ всех потомков элемента, на котором вызвано обращение к этому свойству.
Пример элемента DIV с разметкой
Разметка со списком, заголовком h2 и div — HTML
Мы видим, что все строчные элементы имеют свои переносы строк. То есть каждый элемент списка переносится на новую строку.
Теперь обратимся к свойству textContent
Потеряли символы переноса строки между однородными элементами используя textContent — JavaScript
Теперь обратимся к свойству innerText
innerText сохранил все символы переноса строки у потомков узла div — JavaScript
Отличие № 2
Второе по важности отличие в том, что innerText зависит от отрисовки элементов, а textContent нет.
Стоит добавить, что:
Выдержка из стандарта HTML
элемент. innerText [= значение]
Возвращает текстовое содержимое элемента «в том виде, в каком оно отображено» (as rendered).
Может быть установлено, чтобы заменить дочерние элементы элемента с заданным значением, но с переносами строк, преобразованными в элементы br.
Выдержка из стандарта DOM
элемент. textContent [= значение]
Возвращает текстовое содержимое потомка узла и представляет собой конкатенацию данных всех потомков узла Text в древовидном порядке.
Видео
Пример с разметкой
Есть простая разметка документа:
Первый параграф не отрисовался. То есть мы применили CSS-стиль прямо на элементе, который заблокировал отрисовку элемента.
Применили стиль для элемента — display node — HTML
Обращаемся к innerText
Если сейчас мы обратимся к свойству innerText для родителя неотрисованного элемента
Неожиданно правда? А куда делось слово «Что?». А innerText его не увидел т. к. оно небыло отрисовано.
innerText не вернул нам содержимое одного элемента — JavaScript
Обращаемся к textContent
А теперь давайте обратимся к свойству textContent для того же родителя:
textContent обнаружил всё что было скрыто от отрисовки — JavaScript
Получение и установка контента элементам в JavaScript
Свойство textContent и как оно работает
textContent – это свойство, которое предназначено для работы с текстовым контентом элемента. Оно позволяет его как получить (включая текстовое содержимое всего его потомков), так и установить.
Примеры с textContent
1. При получении текста элемента, содержащего один текстовый узел, textContent возвратит текст, находящийся внутри этого текстового узла.
2. Для элемента, который содержит множество других узлов, textContent вернёт конкатенацию (сложение) текстов всех его текстовых узлов.
В этом примере текстовые узлы обозначены цифрами. textContent вернёт сложение текстов этих текстовых узлов.
При установке элементу текстового содержимого, textContent удалит всего его узлы (при их наличии), и добавит в него один текстовый узел, содержащий указанный текст.
4. Например, установим элементу #message новое текстовое содержимое:
5. Например, создадим элемент « div.alert », вставим в него некоторый текст и добавим его на страницу перед закрывающим тегом body :
innerText, outerText и их отличие от textContent
innerText также как textContent используется для извлечения текста из элементов.
При установке элементу текстового контента, innerText также как textContent удаляет все имеющиеся в нём узлы и создаёт новый текстовый узел с указанным содержимым.
Синтаксис свойства innerText :
В этом примере мы ещё дополнительно удалим отображение элемента span из документа, т.е. установим ему « display: none »:
Таким образом innerText учитывает стили элементов, и возвращает только текст отображаемый этим элементом в браузере.
outerText
Синтаксис свойства outerText :
Его отличие от innerText только в том, что outerText при установки элементу текстового контента удаляет не только всё его содержимое, но и сам этот элемент и помещает на этом месте новый текстовый узел с заданным текстом.
innerHTML и outerHTML
innerHTML предназначен для установки или получения HTML разметки элемента.
Например, установим элементу ul#list новое HTML содержимое:
Пример, в котором получим HTML разметку некоторого элемента:
Задание HTML содержимого элементу с помощью innerHTML всегда сопровождается удалением его контента и установкой ему новой HTML разметки, но основе указанной строки, которая была разобрана внутренним парсером браузера как HTML.
Но на самом деле это не так. Этот код выполняет следующее:
Эквивалентная запись кода, приведённого выше:
Таким образом, используя такую запись мы не просто добавляем некоторый HTML в конец элемента, а полностью переустанавливаем его. Выполнение такого кода обычно сопровождается «миганием».
Пример использования innerHTML для очистки содержимого элемента:
Например, получить и изменить HTML контент элемента р с id=»myP» :
outerHTML
Свойство outerHTML устанавливает или возвращает HTML контент, представляющий сам элемент и его дочерние элементы.
Разница между innerHTML и textContent
Свойство innerHTML
Копируем небольшой отрывок текста и вставим его вместе с тегами форматирования в HTML-страницу.
Как изменять существующие элементы документа
и добавлять на страницуновые элементы при помощи языка JavaScript.
Добавим CSS код для красоты.
.container <
width: 500px;
border: 10px solid plum;
margin: 20px auto;
>
.text-example <
padding: 10px;
font-size: 20px;
font-weight: 200;
font-family: ‘Arial Narrow Bold’, sans-serif;
text-align: center;
>
Далее найдем вставленный текст по названию класса у параграфа text-example и присвоим его переменной textExample. Выведем в консоль содержимое переменной.
// JavaScript
const textExample = document.querySelector(‘.text-example’);
console.log(textExample);
Текст в консоли отформатировался согласно прописанным тегам, включая сам тег p.
Теперь выведем в консоль содержимое переменной textExample, добавив свойство innerHTML. Свойство innerHTML извлекло из элемента отформатированный текст вместе с тегами, просто продублировав HTML-разметку, проигнорировав сам тег p.
// JavaScript
const textExample = document.querySelector(‘.text-example’);
console.log(textExample.innerHTML);
Вывод: свойство innerHTML извлекает весь контент вместе с тегами из указанного элемента на HTML странице.
Свойство textContent
Перед нами все тот же текст.
Как изменять существующие элементы документа
и добавлять на страницуновые элементы при помощи языка JavaScript.
Выведем в консоль опять содержимое переменной, но уже добавив свойство textContent. Посмотрим, что теперь изменится.
// JavaScript
const textExample = document.querySelector(‘.text-example’);
console.log(textExample.textContent);
На выходе мы получили отформатированный текст в чистом виде, но без тегов внутри. Вывод очевидный: свойство textContent извлекает весь контент без тегов из указанного элемента на HTML странице.
Замена контента на HTML странице
const textExample = document.querySelector(‘.text-example’);
console.log(textExample.innerHTML);
textExample.innerHTML = ‘Дальше будет интереснее!‘;
const textExample = document.querySelector(‘.text-example’);
console.log(textExample.textContent);
textExample.textContent = ‘Дальше будет интереснее!‘;
Когда использовать textContent?
Рекомендуется использовать textContent, если вам нужно получить просто текст из элемента. Данный метод потребляет меньше памяти, поскольку парсится как текст и кроме того более безопасен. Выигрыш от скорости обработки страницы будет заметен на большом объеме текста. Во всех остальных случаях, когда нужно получить контент вместе с HTML тегами, используется innerHTML.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 1 ):
Спасибо! Доступно и понятно, с наглядными примерами 🙂 Не поленился зарегистрироваться, чтобы оставить комментарий 😉
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Свойство textContent
Свойство textContent позволяет получить текстовый контент указанного узла и всех его потомков. Данное значение можно представить как конкатенацию (сложение) все текстовых узлов, которые являются потомками узла, для которого вызывается данное свойство.
Кроме этого, данное свойство позволяет также установить элементу текстовый контент. При этом все дочерние узлы будут удалены и заменены единственным текстовым узлом, содержащий этот контент.
Например, изменить текстовый контент элемента р с id=»myP» :
Например, получить текстовый контент элемента ul с id=»myList» :
Свойства innerText и outerText
Данное свойство также позволяет установить элементу заданный текстовый контент, т.е. заменить содержимое элемента, расположенное между его открывающим и закрывающим тегом, на указанное.
Свойства innerHTML и outerHTML
Свойство innerHTML устанавливает или возвращает HTML контент, расположенный между открывающим и закрывающим тегом элемента.
Например, получить и изменить HTML контент элемента р с id=»myP» :
Свойство outerHTML устанавливает или возвращает HTML контент, представляющий сам элемент и его дочерние элементы.
Шпаргалка по JS-методам для работы с DOM
Основные источники
Введение
JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.
Я постараюсь дать вам исчерпывающее представление об этих методах, а также покажу парочку полезных приемов, которые сделают вашу жизнь веб-разработчика немного легче.
Размышляя над подачей материала, я пришел к выводу, что оптимальным будет следование спецификациям с промежуточными и заключительными выводами, сопряженными с небольшими лирическими отступлениями.
Сильно погружаться в теорию мы не будем. Вместо этого, мы сосредоточимся на практической составляющей.
Для того, чтобы получить максимальную пользу от данной шпаргалки, пишите код вместе со мной и внимательно следите за тем, что происходит в консоли инструментов разработчика и на странице.
Вот как будет выглядеть наша начальная разметка:
У нас есть список ( ul ) с тремя элементами ( li ). Список и каждый элемент имеют идентификатор ( id ) и CSS-класс ( class ). id и class — это атрибуты элемента. Существует множество других атрибутов: одни из них являются глобальными, т.е. могут добавляться к любому элементу, другие — локальными, т.е. могут добавляться только к определенным элементам.
Мы часто будем выводить данные в консоль, поэтому создадим такую «утилиту»:
Миксин NonElementParentNode
Данный миксин предназначен для обработки (браузером) родительских узлов, которые не являются элементами.
В чем разница между узлами (nodes) и элементами (elements)? Если кратко, то «узлы» — это более общее понятие, чем «элементы». Узел может быть представлен элементом, текстом, комментарием и т.д. Элемент — это узел, представленный разметкой (HTML-тегами (открывающим и закрывающим) или, соответственно, одним тегом).
Небольшая оговорка: разумеется, мы могли бы создать список и элементы программным способом.
Для создания элементов используется метод createElement(tag) объекта Document :
Одним из основных способов получения элемента (точнее, ссылки на элемент) является метод getElementById(id) объекта Document :
Почему идентификаторы должны быть уникальными в пределах приложения (страницы)? Потому что элемент с id становится значением одноименного свойства глобального объекта window :
Миксин ParentNode
Данный миксин предназначен для обработки родительских элементов (предков), т.е. элементов, содержащих одного и более потомка (дочерних элементов).
Такая структура называется коллекцией HTML и представляет собой массивоподобный объект (псевдомассив). Существует еще одна похожая структура — список узлов (NodeList ).
Для дальнейших манипуляций нам потребуется периодически создавать новые элементы, поэтому создадим еще одну утилиту:
Наша утилита принимает 4 аргумента: идентификатор, текст, название тега и CSS-класс. 2 аргумента (тег и класс) имеют значения по умолчанию. Функция возвращает готовый к работе элемент. Впоследствии, мы реализуем более универсальный вариант данной утилиты.
Одной из интересных особенностей HTMLCollection является то, что она является «живой», т.е. элементы, возвращаемые по ссылке, и их количество обновляются автоматически. Однако, эту особенность нельзя использовать, например, для автоматического добавления обработчиков событий.
Создадим универсальную утилиту для получения элементов:
Наша утилита принимает 3 аргумента: CSS-селектор, родительский элемент и индикатор количества элементов (один или все). 2 аргумента (предок и индикатор) имеют значения по умолчанию. Функция возвращает либо один, либо все элементы (в виде обычного массива), совпадающие с селектором, в зависимости от значения индикатора:
Миксин NonDocumentTypeChildNode
Миксин ChildNode
Данный миксин предназначен для обработки дочерних элементов, т.е. элементов, являющихся потомками других элементов.
Интерфейс Node
Данный интерфейс предназначен для обработки узлов.
Интерфейс Document
Фрагменты позволяют избежать создания лишних элементов. Они часто используются при работе с разметкой, скрытой от пользователя с помощью тега template (метод cloneNode() возвращает DocumentFragment ).
createTextNode(data) — создает текст
createComment(data) — создает комментарий
importNode(existingNode, deep) — создает новый узел на основе существующего
Интерфейсы NodeIterator и TreeWalker
Интерфейсы NodeIterator и TreeWalker предназначены для обхода (traverse) деревьев узлов. Я не сталкивался с примерами их практического использования, поэтому ограничусь парочкой примеров:
Интерфейс Element
Данный интерфейс предназначен для обработки элементов.
Работа с classList
Работа с атрибутами
insertAdjacentElement(where, newElement) — универсальный метод для вставки новых элементов перед/в начало/в конец/после текущего элемента. Аргумент where определяет место вставки. Возможные значения:
insertAdjacentText(where, data) — универсальный метод для вставки текста
Text — конструктор для создания текста
Comment — конструктор для создания комментария
Объект Document
Свойства объекта location :
reload() — перезагружает текущую локацию
replace() — заменяет текущую локацию на новую
title — заголовок документа
head — метаданные документа
body — тело документа
images — псевдомассив ( HTMLCollection ), содержащий все изображения, имеющиеся в документе
Следующие методы и свойство считаются устаревшими:
Миксин InnerHTML
Геттер/сеттер innerHTML позволяет извлекать/записывать разметку в элемент. Для подготовки разметки удобно пользоваться шаблонными литералами:
Расширения интерфейса Element
Вот несколько полезных ссылок, с которых можно начать изучение этих замечательных инструментов:
Иногда требуется создать элемент на основе шаблонной строки. Как это можно сделать? Вот соответствующая утилита:
Существует более экзотический способ создания элемента на основе шаблонной строки. Он предполагает использование конструктора DOMParser() :
Еще более экзотический, но при этом самый короткий способ предполагает использование расширения для объекта Range — метода createContextualFragment() :
В завершение, как и обещал, универсальная утилита для создания элементов:
Заключение
Разумеется, шпаргалка — это всего лишь карманный справочник, памятка для быстрого восстановления забытого материала, предполагающая наличие определенного багажа знаний.
VDS от Маклауд быстрые и безопасные.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!