[JavaScript] textContent / innerText / innerHTML

JavaScript에서 HTML문서의 요소를 가져오는 방법에는 textContent, innerText, innerHTML가 있다. 각각의 차이점을 알아보고  특정 상황에서 어떤 방법이 가장 좋을지 알아보자.

 

결론부터 말하자면, 오늘날에는 textContent를 사용하는 것이 더 현명한 방법이다. 그 이유를 알아보자.

 

<span>

  Hello <span style="display: none;">World</span>

</span>

위 코드에서 innerText로 반환되는 값은 "Hello"이고 textContent로 반환되는 값은 "Hello World"이다.

 

 

<div id='blog-test'>
  This element is <strong>strong</strong> and     has some super fun <code>code</code>!
</div>

이제 자바스크립트에서 id값 blog-test를 이용해 요소를 불러왔을 때 어떤 차이점이 있는지 비교해보자.

 

 

1. innerHTML

document.getElementById("blog-test").innerHTML;

반환되는 값

- Element의 속성인 innerHTML은 요소 안에 있는 HTML 마크업을 가져온다.

 

<div>안에 있는 모든 문자열과 그 안에 있는 모든 HTML 마크업이 반환되었다.

 

띄어쓰기와 개행도 포함되어있다.

 

* HTML마크업과 요소 안에 실제로 어떤 값이 들어있는지 알아야 할 때는  innerHTML을 사용해야한다.

 

* <div>나 <span>태그의 텍스트에 &, <, >와 같은 텍스트가 포함되어있을 때, innerHTML은 해당 텍스트를 &amp;, &lt;, &g;로 바꾸어서 반환한다. 

 

2. innerText

document.getElementById("blog-test").innerText;

 

반환되는 값

 

Element의 속성인 innerText는 <div>안에 있는 텍스트 중 사용자에게 보여지는 텍스트 내용만 가져온다.

 

렌더링되지 않은 값은 보여지지 않는다.

 

이것은 Node의 렌더링된 텍스트 내용과 거의 유사하며 CSS의 스타일도 반영된다.

 

즉, 사용자에게 보여지는 내용만을 가져온다.

 

innerText에 의해 반환되는 값은 웹페이지에 출력된 결과물을 사용자가 복사해서 붙여넣은 값과 동일하다.

 

* 단순히 요소 안에 어떤 값이 들어있는지 알아야할 때 innerText를 사용한다.

 

3. textContent

document.getElementById("blog-test").textContent;

 

 

반환되는 값

 - Node.textContent를 사용하면 해당 텍스트 노드 컨텐츠의 원문(raw text)을 그대로 가져올 수 있다.

 

node 내에 있는 모든 요소들의 내용은 <script>와 <style>을 포함하고있다.

 

띄어쓰기와 개행등의 구조가 인식되어 반환된다.

 

 node가 document이거나 Doctype이면, textContent는 null을 반환한다. 

 

모든 텍스트를 가져오고싶다면 document.documentElement.textContent 명령을 사용한다.

 

* textContent는 요소 안의 값에 그 스타일 요소도 함께 가져와야할 때 사용한다.

 

 

innerText는 textContent와 매우 유사하지만, 아주 중요한 차이점이 있다. 

 

innerText는 렌더링되어 보여지는 텍스트를 반환하지만 textContent는 그렇지 않다.

 

또한 innerText가 반환될 때는 페이지의 레이아웃에 대한 정보 등 많은 정보가 필요하지만 textContent는 그렇지 않다.

 

그래서 innerText로 반환되는 결과값의 속도는 느리고 textContent는 빠르다.

 

 

 

 

 

textContent vs. innerText vs. innerHTML

세 요소는 모두 HTML 문서에서 텍스트를 가져와 변경할 수 있다는 공통점이 있다. 

 

innerHTML은 HTML요소가 포함되어있는 텍스트를 반환하기때문에 마크업 태그를 핸들링할 수 있다.

 

그리고 textContent와 innerText는 모두 HTML요소가 제거된 텍스트를 가져올 수 있지만 textContent는 스크립트와 스타일요소를 모두 포함한 텍스트가 반환되고 innerText는 스크립트나 스타일이 이미 적용된, 사용자에게 보여지는 텍스트가 반환된다는 점에서 다르다.

 

textContent가 가져오는 내용은 노드 안에 있는 원문이고, innerText가 가져오는 내용은 사용자에게 보여지는 텍스트이다.

 

Node.textContent	HTMLElement.innerText
<script>와 <style>요소를 포함한 모든 요소의 콘텐츠를 반환	렌더링되어 페이지에 나타나는 텍스트 -> 사람이 읽을 수 있는 요소만 반환
노드의 모든 요소를 반환	style등 마크업 언어가 적용(rendering)된 형태로 읽어온다. CSS의 설정 따라 숨겨진 요소는 반환하지 않는다. (display:none; 으로 정의된 요소는 반환X)
속도가 빠르다	사용자에게 어떻게 보여질지에 대한 정보를 수집한 후 출력되기 때문에 오래걸린다.
모든 Node 객체를 정의한다.	HTMLElement 객체를 정의한다.
표준	비표준

 

What is the raw textual content inside of these Nodes? == textContent

Or, what is the text being presented to the user? == innerText

 

 

# textContect가 innerText보다 나은 이유

 

1. innerText가 출력되기 위해서는 텍스트가 사용자에게 어떻게 보여질지에 대한 레이아웃에 대한 정보가 필요하다. 이로인해 성능면에서 차이가 생긴다.

 

브라우저에 따라서는 꽤 큰 성능의 차이를 보이기도 한다.

 

특별히 스타일이 적용된 문자열을 사용하는 경우가 아니라면 textConten를 사용하는 것이 성능면에서 적합하다.

 

2. 널리 사용되고있기는 하지만, innerText는 표준이 아니다.

 

3. textContent와는 다르게, 인터넷 익스플로러에서 innerText는 요소의 모든 자식 노드를 제거하고 하위의 텍스트노드를 영구적으로 파괴시킨다. 그 이후에는 해당 요소와 다른 요소에도 노드를 추가하지 못하게 된다.

 

4. innerHTML은 HTML parsing이 필요한 경우에만 사용하는 것이 좋다. 보안에 취약하고 성능면에서도 좋지 않다.