NodeValue vs innerHTML и textContent. Как выбрать?

Я использую простой js для изменения внутреннего текста элемента метки, и я не был уверен, на каких основаниях я должен использовать innerHTML или nodeValue или textContent. Мне не нужно создавать новый node или изменять элементы 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 намного быстрее, какой улов? Не поддерживается ли она широко? Есть ли другая проблема?

Ответы

Ответ 1

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

fooobar.com/questions/83055/...

Резюме

  1. innerHTML анализирует контент как HTML, поэтому это занимает больше времени.
  2. nodeValue использует простой текст, не анализирует HTML и работает быстрее.
  3. textContent использует простой текст, не анализирует HTML и работает быстрее.
  4. innerText Принимает во внимание стили. Например, скрытый текст не получится.

innerText не существовало в Firefox до FireFox 45 в соответствии с caniuse, но теперь поддерживается во всех основных браузерах.

Ответ 2

.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>';

вывод: гугл

Из первого примера видно, что вывод типа text/plain не анализируется браузером и приводит к полному отображению содержимого. Вывод типа text/html говорит браузеру проанализировать его перед отображением.

MDN innerHTML, MDN textContent, MDN nodeValue

Ответ 3

Я хорошо знаю и работаю с 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>

Ответ 4

innerText - это примерно то, что вы получите, если выделите текст и скопируете его. Элементы, которые не отображаются, отсутствуют во innerText.

textContent - это объединение значений всех текстовых узлов в поддереве. Будь оказан или нет.

Вот отличный пост с подробным описанием различий

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

Ответ 5

[Примечание: этот пост больше посвящен обмену конкретными данными, которые могут помочь кому-то, чем рассказывать людям, что делать]

В случае, если кому-то интересно, какой сегодня самый быстрый: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & Амп; https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent (для второго теста содержимое диапазона представляет собой простой текст, результаты могут изменяться в зависимости от его содержимого)

Кажется, что .innerHtml - великий победитель с точки зрения чистой скорости!

(ПРИМЕЧАНИЕ: я говорю только о скорости, вы можете поискать другие критерии, прежде чем выбирать, какой из них использовать!)