В чем разница между textContent и innerText в JavaScript?

Могу ли я использовать textContent следующим образом:

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

J K

Ответов: 10

Ответы (10)

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

Но в зависимости от того, что вы хотите, firstChild.nodeValue может быть достаточно.

innerHTML будет выполнять даже теги HTML, которые могут быть опасными, вызывая любые атаки на стороне клиента, такие как XSS на основе DOM. Вот фрагмент кода:



    
        
    

Если вы используете .textContent, он не будет оценивать HTML-теги и печатать их как String.



    
        
    

Ссылка: https://www.scip.ch/en/?labs.20171214

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

Text with breaking
point. HIDDEN TEXT

Вывод textContent:

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

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

Text with breaking point.

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

  1. innerText был нестандартным, textContent был стандартизован ранее.
  2. innerText возвращает visible текст, содержащийся в узле, а textContent возвращает полный текст. Например, в следующем HTML Hello World , innerText вернет 'Hello' , а textContent вернет «Hello World». Более полный список различий см. В таблице по адресу http://perfectionkills.com/the-poor-misunderstood-innerText/ (дополнительное чтение 'innerText' работает в IE, но не в Firefox).
  3. В результате innerText намного более требователен к производительности: для возврата результата требуется информация о макете.
  4. innerText определяется только для объектов HTMLElement, а textContent определяется для всех Узел объектов.

Обязательно ознакомьтесь с информативными комментариями под этим ответом.

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;
}

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

Хотя textContent работает с большинством браузеров, он не работает в IE8 или более ранних версиях. Используйте этот полифилл, чтобы он работал только в IE8. Этот полифилл не будет работать с 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

textContent - единственный доступный для текстовых узлов:

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

console.log (текст.innerText); //  неопределенный
console.log (text.textContent); // текст

В узлах элементов innerText оценивает элементы
, а textContent оценивает управляющие символы:

var span = document.querySelector ('span');
span.innerHTML = "1 
2
3
4 \ n5 \ n6 \ n7 \ n8"; console.log (span.innerText); // перерыв в первой половине console.log (span.textContent); // перерывы во второй половине
 

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 = "х \ ну";
console.log (div.textContent); // ху

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

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

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

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

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

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