innerText vs innerHTML vs label vs text vs textContent vs outerText

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

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

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

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

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

Мои выводы:

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

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

Из 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. Я думаю, что это, вероятно, малоизвестное устаревшее свойство, и его следует избегать.

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

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

Btw,

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

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

Дополнение к отличному ответу 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!

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

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

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

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"