Маленькие большие различия между innerText, innerHTML и textContent.

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

Я начну с того, что покажу вам код HTML, который я написал, как вы увидите, он содержит тег стиля и скрипта.

<div id="text">
    This are the <strong>differences</strong> between <em>innerText</em>, innertHtml and <strong>textContent</strong>
 <style>
        #text {
            text-transform: uppercase;
          }
          </style>
    <script>
            var text = document.getElementById('text');
            console.log(text.innerText);
            console.log(text.innerHTML);
            console.log(text.textContent);
          </script>
</div>

Посмотрим, что получит innerText:

var text = document.querySelector('#text');
text.innerText 
// => "THIS ARE THE DIFFERENCES BETWEEN INNERTEXT, INNERHTML AND TEXTCONTENT"

Свойство innerText извлекает текст так, как его видит пользователь, оно не извлекает какие-либо скрытые свойства внутри нашего кода, такие как стиль и скрипт. Это наименее используемый из всех трех свойств, поскольку он гораздо более требователен к производительности, ему требуется информация о макете для возврата результата, поэтому он используется не так, как два других свойства.

Теперь давайте посмотрим, что получит textContent :

text.textContent 
// =>        This are the differences between innerText, innerHtml and textContent
//        
//        #text {
//            text-transform: uppercase;
//          }
//           
//          
//            var text = document.getElementById('text');
//            console.log(text.innerText);
//            console.log(text.innerHTML);
//            console.log(text.textContent);

Как видите, textContent извлекает все содержимое внутри элемента, включая все его дочерние элементы, при отображении текстового содержимого он не принимает во внимание CSS или форматирование.

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

Наконец, innerHTML:

text.innerHTML 
//         This are the <strong>differences</strong> between <em>innerText</em>, innerHtml and <strong>textContent</strong>
//        <style>
//       #text {
//            text-transform: uppercase;
//          }
//          </style> 
//          <script>
//            var text = document.getElementById('text');
//            console.log(text.innerText);
//            console.log(text.innerHTML);
//            console.log(text.textContent);
//          </script>

Опять же, innerHTML будет получать ту же информацию, что и textContent, а также все форматирование, которое вы добавили в свой HTML. Его можно использовать для изменения всего выбранного HTML-элемента и добавления некоторого HTML-кода прямо из вашего JavaScript, но вы всегда должны задавать себе этот вопрос перед его использованием:

Будет ли это изменение жестко закодировано в моем javascript, и я могу ему доверять, или оно будет предоставлено пользователем?

Например, когда вы хотите добавить на свою веб-страницу то, что пользователь ввел в форму, в этом случае вам лучше использовать textContent.

Я надеюсь, что вы смогли немного лучше понять эти три свойства JavaScript и их небольшие отличия!

Пожалуйста, оставьте мне комментарий, если я что-то упустил из этого блога, так как я всего лишь студент и всегда буду рад узнать больше!

Маленькие большие различия между innerText, innerHTML и textContent.

Вопросы по теме