Разница между textContent vs innerText

Ответ 1

Ни один из других ответов не дает полного объяснения, отсюда и этот. Ключевые различия между innerText и textContent очень хорошо описаны в посте Келли Нортон: innerText vs. textContent. Ниже вы можете найти резюме:

1. innerText был нестандартным, в то время как textContent был стандартизирован ранее.
2. innerText возвращает видимый текст, содержащийся в узле, а textContent возвращает полный текст. Например, в следующем HTML <span>Hello <span style="display: none;">World</span></span>, innerText вернет "Hello", а textContent вернет "Hello World". Более полный список различий см. в таблице на http://perfectionkills.com/the-poor-misunderstood-innerText/ (дальнейшее чтение на & # 39; innerText & # 39; работает в IE, но не в Firefox).
3. В результате, innerText значительно повышает производительность: для получения результата требуется информация макета.
4. innerText определено только для объектов HTMLElement, а textContent определено для всех объектов Node.

Обходной путь для textContent в IE8- будет включать в себя рекурсивную функцию, использующую nodeValue на всех childNodes указанного узла, здесь попытка в полифилле:

function textContent(rootNode) {
  if ('textContent' in document.createTextNode(''))
    return rootNode.textContent;

  var childNodes = rootNode.childNodes,
      len = childNodes.length,
      result = '';

  for (var i = 0; i < len; i++) {
    if (childNodes[i].nodeType === 3)
      result += childNodes[i].nodeValue;
    else if (childNodes[i].nodeType === 1) 
      result += textContent(childNodes[i]);
  }

  return result;
}

Ответ 2

Оба innerText и textContent стандартизированы по состоянию на 2016 год. Все объекты Node (включая узлы чистого текста) имеют textContent, но только объекты HTMLElement имеют innerText.

Хотя textContent работает с большинством браузеров, он не работает в IE8 или более ранних версиях. Используйте этот polyfill для работы только на IE8. Этот polyfill не будет работать с IE7 или более ранней версией.

if (Object.defineProperty 
  && Object.getOwnPropertyDescriptor 
  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") 
  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
     {
       get: function() {
         return innerText.get.call(this);
       },
       set: function(s) {
         return innerText.set.call(this, s);
       }
     }
   );
  })();
}

Метод Object.defineProperty доступен в IE9 или более поздней версии, однако он доступен в IE8 только для объектов DOM.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Ответ 3

textContent только в доступных текстовых узлах.

var text = document.createTextNode('text');

console.log(text.innerText);    //  undefined
console.log(text.textContent);  //  text

В элементах узлов innerText оценивает тег, textContent управляет символами.

var span = document.querySelector('span');
span.innerHTML = "1<br>2<br>3<br>4\n5\n6\n7\n8";

span.innerText

1
2
3
4 5 6 7 8

span.textContent

1234
5
6
7
8


Строки с управляющими символами (например, линейные каналы) недоступны с помощью textContent, если контент был задан с помощью innerText. Другой способ (установить управляющие символы с помощью textContent), все символы возвращаются как с innerText, так и с textContent.

var div = document.createElement('div');

div.innerText = "x\ny";
console.log(div.textContent);  //  xy

Ответ 4

textContent поддерживается большинством браузеров. Он не поддерживается ie8 или ранее, но для этого

Свойство textContent устанавливает или возвращает текстовое содержимое указанного node и всех его потомков.

См. http://www.w3schools.com/jsref/prop_node_textcontent.asp

Ответ 5

Для тех, кто гуглил этот вопрос и приехал сюда. Я чувствую, что наиболее ясный ответ на этот вопрос находится в документе MDN: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent.

Вы можете забыть все моменты, которые могут вас смущать, но помните 2 вещи:

1. Когда вы пытаетесь изменить текст, textContent обычно является тем свойством, которое вы ищете.
2. Когда вы пытаетесь получить текст из какого-либо элемента, innerText приблизительно соответствует тексту, который получит пользователь, если он выделит содержимое элемента курсором, а затем скопирует в буфер обмена. А textContent предоставляет вам все, видимое или скрытое, включая элементы <script> и <style>.

Ответ 6

textContent возвращает полный текст и не заботится о видимости, в то время как innerText делает.

<p id="source">
    <style>#source { color: red; }</style>
    Text with breaking<br>point.
    <span style="display:none">HIDDEN TEXT</span>
</p>

Вывод textContent:

#source { color: red; } Text with breakingpoint. HIDDEN TEXT

Вывод innerText (обратите внимание, как innerText распознает теги, такие как <br>, и игнорирует скрытый элемент):

Text with breaking point.