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 намного быстрее, в чем подвох? Разве это не широко поддерживается? Есть ли другая проблема?

Источник

4 ответа

Решение

Различия между textContent/innerText/innerHTML в MDN.

И ответ Stackru о innerText / nodeValue.

Резюме

  1. nodeValue немного сложнее в использовании, но быстрее, чем innerHTML.
  2. innerHTML анализирует контент как 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>';

вывод: google

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

вывод: гугл

Вы можете видеть из первого примера, что вывод типа 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, или get HTML-код элемента.

Пример: у нас есть <h1> тег и сильный стиль с ним:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1>Чтобы get содержимое элемента имеет идентификатор, равный "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
Источник
Другие вопросы по тегам