[JavaScript DOM] textContent innerText 차이

 

 

이번 포스팅에서는 HTML 요소 공통 속성인 textContent와 innerText의 차이에 대해서 정리해보려고 합니다. 

그놈이 그놈같아 늘 헷갈리지만, 그 차이에 대해 생각하려 하기 보다는 외면하고 넘어가는 경우가 많은 속성이 바로 이 두 속성인데, 사실 그 차이를 알아보려고 열심히 구글링을 해 보아도 시원하게 '이거다!'하고 차이를 알려주는 자료를 찾기가 쉽지 않은 것 같습니다(개인적인 생각이지만). 저 또한 마찬가지 였지만, 스택오버플로우를 뒤지다가 나름대로 시원한(정말?) 글을 보게 된 것 같아 반가운 마음에 정리를 해보게 되었습니다. 

저 자신이 편하게 두고두고 볼 수 있도록 짧게 리스트업 하는 형식으로 정리해두려 합니다. 또한 새로운 사실을 알게 되면 계속적으로 업데이트하도록 하겠습니다. 

 

textContent와 innerText의 차이

 

1. 일단 가장 눈에 띄는 차이. innerText는 개행문자(엔터)를 반환하지 않지만, textContent는 반환합니다. 

 

 

 

2. innerText 는 웹페이지 사용자가 볼 수 있는 텍스트 노드만을 반환하지만, textContent는 모든 텍스트 노드를 반환합니다. 

 

 

 

3. 위 결과를 통해 미루어보았을 때, innerText는 브라우저를 통해 렌더링된 이후의 DOM 트리에 대한 정보가 종합적으로 요구되는 속성입니다. 반면 textContent는 텍스트 정보만 있으면 되기 때문에 innerText가 좀더 heavy한 속성입니다.

 

4. innerText는 HTMLlement 개체에 대해서만 정의되고 textContent는 모든 노드 개체에 대해 정의됩니다.

 

 

이상입니다. 이 포스팅은 계속적으로 업데이트하면서 관리하도록 하겠습니다.

감사합니다.