Одним из преимуществ использования Javascript является его гибкость: вы можете использовать множество различных методов и подходов для выполнения одной и той же задачи. Конечно, у этой гибкости есть и свои недостатки. Как новичок в Javascript, я склонен видеть очень похожие методы, которые практически делают одно и то же в одних контекстах, но что-то другое в других контекстах. Первый пример, который приходит на ум, — это использование методов Javascript innerText, innerHTML и textContent. Имея небольшой опыт работы с Javascript, я смог использовать первые два практически взаимозаменяемо, хотя мне еще предстоит много возиться с textContent. Они не могли создать три разных метода для выполнения одной и той же задачи, так что мне стало интересно, в чем на самом деле разница между этими тремя? В этом посте мы собираемся более подробно рассмотреть, что отличает их друг от друга.

Давайте воспользуемся примером, чтобы применить их на практике. Допустим, у нас есть файл index.html, содержащий форму, которая выглядит следующим образом:

Если мы внимательно посмотрим на этот код, то увидим, что внутри формы находятся другие элементы HTML, такие как кнопки, элементы div и метки, а также поля ввода внутри элементов div. Эти узлы HTML имеют такие атрибуты, как имена, классы, идентификаторы и заполнители. В этом много индивидуальности!

Давайте продолжим и захватим форму с помощью селектора запросов, чтобы получить ее по идентификатору: «new-quote-form»

Теперь мы можем перейти к console.log form.innerText, form.innerHTML и form.textContent, чтобы увидеть различия в консоли в нашем браузере. Во-первых, давайте посмотрим, что нам напечатает form.innerText:

Что!? Как это могло быть? Весь этот код в нашей форме и все, что возвращается с помощью form.innerText, является простым текстом внутри кода! HTML-элементы и код игнорируются или декодируются, возвращается только текст внутри кода.

Далее мы рассмотрим наш console.log из form.innerHTML:

Хм… это сильно отличается от нашего последнего console.log! С помощью form.innerHTML нам показывают обычный текст внутри кода, а такжев окружающем его HTML-коде. Это включает в себя все остальные элементы и их атрибуты, которые мы видели, когда смотрели на исходный HTML-код! Фактически, этот журнал консоли идентичен коду, который мы видели в форме, когда смотрели на исходный код! Мы видим, что в этом отношении innerHTML немного более информативен, чем innerText. Итак, очевидно, что между этими двумя методами существует довольно большая разница! Наконец, давайте взглянем на console.log для form.textContent:

Хм… довольно странно. Это выглядит очень похоже на то, что мы видели, когда использовали innerText, но с гораздо большим интервалом. Что дает? После более глубокого изучения документации MDN обнаружились некоторые существенные различия. textContent получает содержимое всех элементов, включая такие теги, как ‹script› и ‹style›. С другой стороны, innerText будет отображать только «удобочитаемые» элементы. Так что в данном случае только обычный текст.

Еще одно существенное отличие заключается в том, что innerText требует больших вычислительных ресурсов. Это связано с тем, что innerText учитывает стили CSS, вызывая перекомпоновку страницы, чтобы убедиться, что все стили обновлены. Стоит отметить, что MDN говорит, что перекомпоновок следует избегать, насколько это возможно.

Третье отличие, которое более интересно, чем практично (из-за устаревания Internet Explorer), заключается в том, что изменение innerText в Internet Explorer (версия 11 или ниже) удаляет дочерние узлы из элемента безвозвратно уничтожает весь дочерний текст. узлы . После этого невозможно снова вставить узлы в любой другой элемент или в тот же элемент. Это заставляет меня думать, что использование innerText опасно!

Теперь, когда мы кратко рассмотрели все три метода, возникает вопрос: когда мне следует использовать innerText, innerHTML или textContent?

Одним из недостатков использования innerHTML является его угроза безопасности. Судя по всему, его использование может привести к межсайтовым атакам безопасности. Поэтому, если вы просто хотите добавить текст, вам следует избегать innerHTML и вместо этого использовать textContent, так как он более безопасен.

Как мы уже говорили ранее, использование innerText может быть дорогостоящим для вашего компьютера, так как требует некоторой информации о системе макета и может быть относительно медленной для загрузки. Кроме того, вы не можете вставить HTML-код с помощью innerText!

Итак, если вам нужно добавить простой текст в узлы HTML, лучше всего использовать textContent, потому что он прост в использовании и наиболее безопасен, поскольку не анализирует HTML, как это делает innerHTML. Кажется, что лучше всего использовать надежный метод захвата, создания и добавления элементов и использования textContent, когда вам нужно добавить текст. Я надеюсь, что этот пост в блоге был полезен для понимания различий между этими тремя методами, и у вас есть некоторый контекст, чтобы знать, когда какой использовать!