nodeValue vs innerHTML та textContent. Як вибрати?

Я використовую звичайний js для зміни внутрішнього тексту елемента мітки, і я не був впевнений, на яких підставах я повинен використовувати innerHTML або nodeValue або textContent. Мені не потрібно створювати новий вузол або змінювати елементи HTML або щось інше - просто замініть текст. Ось приклад коду:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

Я переглянув джерело jQuery, і воно використовує nodeValue рівно один раз, але innerHTML та textContent кілька разів. Тоді я знайшов цей тест jsperf, який вказує, що firstChild.nodeValue значно швидше. Принаймні, це те, що я трактую.

Якщо firstChild.nodeValue набагато швидше, у чому ловить? Хіба це не широко підтримується? Чи є ще якесь питання?

Відмінності між textContent / innerText / innerHTML на MDN.

І відповідь Stackoverflow про innerText / nodeValue.

Підсумок

1. innerHTML аналізує вміст як HTML, тому це займає більше часу.
2. nodeValue використовує прямий текст, не розбирає HTML і швидший.
3. textContent використовує прямий текст, не розбирає HTML і швидший.
4. innerText Враховує стилі. Наприклад, він не отримає прихований текст.

innerTextне існувало у Firefox до FireFox 45 згідно канюзи, але зараз підтримується у всіх основних браузерах.

.textContentВиходи text/plainпід час .innerHTMLвиходів text/html.

Короткий приклад:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

вихід: <a href="http://google.com"> google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

вихід: google

З першого прикладу видно, що вихід типу text/plainне розбирається браузером і призводить до повного відображення вмісту. Вихід типу text/htmlповідомляє браузеру проаналізувати його перед його відображенням.

MDN InternalHTML , MDN textContent , MDN nodeValue

Два, яких я добре знаю і з якими працюю, - це внутрішній HTML і текстовий вміст .

Я використовую textContent, коли просто хочу змінити текст абзацу або заголовка так:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Отже, textContent просто змінює текст, але він не розбирає HTML, як ми можемо сказати з тегів, видимих ​​у простому тексті, в результаті.

Якщо ми хочемо розібрати HTML, ми використовуємо innerHTML так:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Так, що другий приклад розбирає рядок Доручаю DOM - елемента innerHTML власності як HTML.

Це приголомшливо та велика вразливість безпеки:)

(шукайте XSS, якщо ви хочете знати про безпеку для цього)

innerText - це приблизно те, що ви отримали, якби вибрали текст і скопіювали його. Елементи, які не відображаються, не містяться у внутрішньому тексті.

textContent - це об'єднання значень усіх TextNodes в під-дереві. Будь винесений чи ні.

Ось чудовий пост з деталізацією відмінностей

innerHTML не повинен включатися в порівняння з innerText або textContent, оскільки він зовсім інший, і ви дійсно повинні знати, чому :-) Перегляньте це окремо

[Примітка: ця публікація стосується більше спільного використання конкретних даних, які можуть допомогти комусь, ніж розповідати людям, що робити]

Якщо хтось цікавиться, що сьогодні найшвидше: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( для другого тесту вміст інтервалу - це звичайний текст, результати можуть змінюватися відповідно до його вмісту)

Здається, .innerHtmlце великий переможець з точки зору чистої швидкості!

(ПРИМІТКА. Тут я говорю лише про швидкість, ви можете пошукати інші критерії, перш ніж вибрати, який з них використовувати!)

Властивість Element.innerHTML setабо getHTML-код елемента.

Наприклад: у нас є <h1>тег і сильний стиль з ним:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Якщо getвміст елемента має id дорівнює "myHeader", ми зробимо те саме:

var element = document.getElementById("myHeader");
element.innerHTML

Результат повернення:

<strong>My Header</strong> Normal Text`

Щоб "встановити" новий вміст (значення) для цього елемента, код буде тут:

Element.innerHTML = "My Header My Text";

Таким чином, ця властивість не тільки працює з простим текстом, але спрямована на передачу або копіювання HTML-коду.

=> Ми не повинні ним користуватися.

Однак багато програмістів (включаючи мене) використовують цей атрибут для вставки тексту на веб-сторінку, і цей метод несе потенційний ризик:

1. Неправильна операція: вставляючи кожен текст, іноді видаляється весь інший HTML-код вставленого елемента.
2. Для безпеки: Звичайно, два вищевказані приклади є абсолютно нешкідливими, навіть якщо використання тегу все ще не становить проблеми, оскільки стандарт HTML5 перешкоджає виконанню командного рядка всередині тегу. коли вставляється на веб-сторінку через внутрішній атрибут HTML. Дивіться це правило тут .

З цієї причини використання innerHTMLне рекомендується використовувати під час вставки простого тексту, а використовувати textContent. textContentВластивість не буде зрозуміло , що код , який ви передати це синтаксис HTML, але тільки 100% текст Немає більше і не менше.

Результат повертається, якщо використовується textContentу наведеному вище прикладі:

My Header My Text