через свойство innerText против innerHTML будет против против против против текстового содержимого этикетке текст, то свойство outertext

Question

через свойство innerText против innerHTML будет против против против против текстового содержимого этикетке текст, то свойство outertext

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

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

innerText

innerHtml

label

text

textContent

outerText

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

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

мои выводы:

innerText покажет значение как есть и игнорирует любое форматирование HTML, которое может быть включено

innerHTML покажет значение и применит любое форматирование HTML

label появляется то же самое как innerText, Я не вижу разницы

text похоже, это то же самое, что и innerText но сокращенная версия jQuery

textContent выглядит так же, как innerText, но сохраняет форматирование (например,n)

outerText представляется таким же, как innerText

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

585 5

javascript dom html

5 ответов:

Comments

Ничего не найдено.

JLRishe · Accepted Answer · 2018-05-22 04:54:27

С MDN:

Internet Explorer представил элемент.внутренний текст. Намерение в значительной степени то же самое [как 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 на всех. Я думаю, что это, вероятно, неясное наследственное свойство и его следует избегать.

Ja͢ck · Accepted Answer · 2014-06-26 14:04:57

выпадающий список содержит коллекцию Option объекты, так что вы должны использовать .text свойство для проверки текстового представления элемента, т. е.
<option value="123">text goes here</option>
 ^^^^^^^^^^^^^^
кстати,

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

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

Anonymous · Accepted Answer · 2016-09-01 07:22:11

добавление в противном случае отличный ответ JLRishe это:

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

Предположим, у вас есть элемент e HTML-код Lorem Ipsum:
e.innerHTML = "Hello World!"; => Hello World!
e.outerHTML = "Hello World!"; => Hello World!
e.innerText = "Hello World!"; => Hello World!
e.outerText = "Hello World!"; => Hello World!

nywooz · Accepted Answer · 2015-08-20 02:19:56

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

Hariharan · Accepted Answer · 2017-06-13 12:33:54

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