innerText vs innerHTML vs мітка vs текст vs textContent vs externalText

У мене є випадаючий список, який заповнений 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:

Причина InternalText і externalText існують в симетрії з innerHTML і externalHTML. Це стає важливим при призначенні ресурсу.

Припустимо, у вас є елемент 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"