innerText vs innerHTML vs label vs text vs textContent vs outerText

124

У меня есть раскрывающийся список, заполненный Javascript.

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

  • innerText
  • innerHtml
  • label
  • text
  • textContent
  • outerText

Мое собственное исследование показывает сравнительные тесты или сравнения между некоторыми из них, но не всеми.

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

Мои выводы:

  • innerText будет отображать значение как есть и игнорировать любое HTML-форматирование, которое может быть включено
  • innerHTML покажет значение и применит любое форматирование HTML
  • labelпохоже, такой же innerText, поэтому я не вижу разницы
  • textвыглядит так же, как innerTextи сокращенная версия jQuery
  • textContentвыглядит так же, как, innerTextно сохраняет форматирование (например, \n)
  • outerText кажется таким же, как innerText

Мое исследование может продвинуть меня только настолько, насколько я могу проверить только то, что я могу думать или прочитать опубликованное, может ли кто-нибудь подтвердить правильность моего исследования и есть ли что-то особенное в labelи outerText?

MyDaftQuestions
источник
11
Одна из причин, по которой существует так много разных способов доступа к тексту, заключается в различиях между браузерами. Если вы уже используете jQuery, вам следует использовать его .text()для получения текстового содержимого элемента, поскольку это обеспечит максимальную кроссбраузерную поддержку.
JLRishe

Ответы:

101

Из MDN :

Internet Explorer представил element.innerText. Намерение почти такое же [как textContent] с несколькими отличиями:

  • Обратите внимание , что в то время как TextContent получает содержание всех элементов, в том числе <script>и <style>элементов, в основном эквивалентного IE-специфическое свойство, InnerText, не делает.

  • innerText также знает стиль и не возвращает текст скрытых элементов, тогда как textContent будет.

  • Поскольку innerText знает о стилях CSS, он запускает переформатирование, а textContent - нет.

Так innerTextчто не будет включать текст, скрытый CSS, но textContentбудет.

innerHTML возвращает HTML, как указывает его имя. Довольно часто люди используют innerHTML для получения или записи текста внутри элемента. Вместо этого следует использовать textContent. Поскольку текст не анализируется как HTML, вероятно, он будет работать лучше. Более того, это позволяет избежать вектора атаки XSS.

В случае , если вы пропустили , что, позвольте мне повторить это более ясно: Do не использовать , .innerHTMLесли вы специально не намерены вставить HTML внутри элемента и приняли необходимые меры предосторожности , чтобы гарантировать , что HTML вы вставляете не может содержать вредоносный контент. Если вы хотите только вставить текст, используйте .textContentили, если вам нужно поддерживать IE8 и более ранние версии, используйте обнаружение функций, чтобы переключаться между .textContentи .innerText.

Основная причина того, что существует так много разных свойств, заключается в том, что разные браузеры изначально имели разные имена для этих свойств, и до сих пор нет полной кроссбраузерной поддержки для всех из них. Если вы используете jQuery, вам следует придерживаться его, .text()поскольку он разработан для сглаживания различий между браузерами. *

Для некоторых других: outerHTMLв основном то же, что и innerHTML, за исключением того, что включает начальный и конечный теги элемента, которому он принадлежит. Кажется, я вообще не могу найти подробного описания outerText. Я думаю, что это, вероятно, малоизвестное устаревшее свойство, и его следует избегать.

JLRishe
источник
3
Проблема с советом этого документа заключается в том, in order to retrieve or write text within an element, people use innerHTML. textContent should be used insteadчто textContent не поддерживается IE 8, который до сих пор довольно широко используется, поскольку эта версия входит в комплект Windows 7. А FireFox не поддерживает innerText . Таким образом, хотя innerHTML не идеально подходит для этой цели, он имеет лучшую кроссбраузерность.
Ади Инбар
5
@AdiInbar Если вам нужна поддержка старых браузеров, правильнее всего будет использовать обнаружение функций для переключения между .textContentи .innerTextили использовать что-то вроде jQuery, которое сглаживает эти различия браузеров.
JLRishe
1
Большое спасибо за это объяснение! Я использую flot для отображения диаграмм, и он не отображается в ff, потому что ff использует textContent. Когда я использовал tickFormatter, внутренний текст всегда был неопределенным.
Rainhider
1
@bvl Нельзя использовать textContentс тегами HTML. Если вам нужно вставить HTML, вы должны либо использовать, .innerHTMLлибо создавать узлы HTML, используя document.createElement()и т. Д.
JLRishe
4
Безопасность: неправильное использование innerHTML(в отличие от textContent) может открыть дверь для атак XSS (межсайтовый скриптинг) на ваше приложение. Если контент, вставляемый в DOM через innerHTML, не является полностью доверенным, злоумышленник может использовать <script>элемент для взлома вашего приложения, аутентифицированного на уровне авторизации пользователя или администратора. Все атаки, в том числе такие странно выглядящие, как <img src="x.x" onerror="alert('Hacked!');"/>и множество более хитрых, эффективно уничтожаются простым использованием textContentв этом контексте вместо опасного innerHTML.
ChaseMoskal
8

Выпадающий список содержит набор Optionобъектов, поэтому вы должны использовать это .textсвойство для проверки текстового представления элемента, т. Е.

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.textвыглядит так же, как .innerTextи сокращенная версия JQuery

Это не правильно; $(element).text()- это версия jQuery, тогда element.textкак версия доступа к свойствам.

Разъем
источник
5

Дополнение к отличному ответу JLRishe:

Причина, по которой существуют innerText и outerText, заключается в симметрии с innerHTML и outerHTML. Это становится важным при назначении собственности.

Предположим, у вас есть элемент eс HTML-кодом <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!
анонимное
источник
2

textContent не будет форматировать (\ n)

Харихаран
источник
1

См. Информацию о совместимости браузеров http://www.quirksmode.org/dom/html/, если вы ориентируетесь на определенные браузеры. Потому что кажется, что у всех есть свой способ делать что-то. Вот почему лучше использовать JQuery .text () ( http://api.jquery.com/text/ ), если вы не хотите возиться.

nywooz
источник
0

textи labelудалите лишние пробелы. Я получил эти результаты при запросе параметров в раскрывающемся списке:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"
Джей Джей
источник