nodeValue против 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 согласно caniuse, но теперь поддерживается во всех основных браузерах.

.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 innerHTML , MDN textContent , MDN nodeValue

Два, которые я хорошо знаю и с которыми работаю, - это innerHTML и textContent .

Я использую 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>

Итак, во втором примере строка, которую я назначаю свойству innerHTML элемента DOM, анализируется как HTML.

Это круто и большая уязвимость в безопасности :)

(посмотрите XSS, если вы хотите узнать о безопасности для этого)

innerText - это примерно то, что вы получили бы, если бы выбрали текст и скопировали его. Элементы, которые не отображаются, отсутствуют в 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 предотвратил выполнение командной строки внутри тега. при вставке на веб-страницу через атрибут innerHTML. См. Это правило здесь .

По этой причине использование innerHTMLне рекомендуется при вставке обычного текста, вместо этого используйте textContent. textContentСвойство не будет понятно , что код , который вы передать это синтаксис HTML, но только 100% текст Нет больше и не меньше.

Результат вернется, если использовать textContentв приведенном выше примере:

My Header My Text