HTMLElement.innerText
innerText
속성은
랜더링된 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
해당 요소 내에 자손이 있다면 자손 태그는 무시하고 텍스트 콘텐츠만 처리합니다.
구문
값
innerText
속성은 랜더링된 HTML 요소의 텍스트 콘텐츠를 가져만 반환합니다.
다음의 경우에는 텍스트를 가져올 수 없습니다.
- 해당 요소 자체가 CSS의
visibility: hidden
으로 화면에 숨겨진 요소의 텍스트 - 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의
visibility: hidden
으로 화면에 숨겨진 요소의 텍스트, 또는hidden
속성으로 화면에 숨겨진 요소의 텍스트 - 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의
display: none
으로 화면에 숨겨진 요소의 텍스트
하지만, 해당 요소 자체가 랜더링되지 않은 상태(CSS의 display: none
, 또는 hidden
속성으로 화면에서 숨겨진 요소)는 텍스트를 가져올 수 있습니다.
요소에 hidden
속성이 지정되면 브라우저는 해당 요소를 display: none
으로 처리합니다.
잠시만!
innerText
는 textContent
와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다.
주의할 점을 참고하세요!
예제
innerText
속성으로 HTML 요소의 텍스트를 가져오거나 설정하는 예제입니다.
만약 해당 요소가 비어있으면, 빈 문자열(""
)을 반환합니다.
innerText
속성을 사용하면 해당 요소와 그 자손 요소들에 포함된 모든 텍스트 내용을 가져옵니다. 이때 자손 태그는 무시합니다.
해당 요소 자체가 CSS의 visibility: hidden
으로 화면에 숨겨진 요소의 텍스트는 가져오지 못합니다.
해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 visibility: hidden
으로 화면에 숨겨진 요소의 텍스트, 또는 hidden
속성으로 화면에 숨겨진 요소의 텍스트는 가져오지 못합니다.
또한, 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 display: none
으로 화면에 숨겨진 요소의 텍스트도 가져오지 못합니다.
텍스트 설정하기
innerText
속성을 사용하면 해당 요소의 텍스트 내용을 설정합니다.
새로운 텍스트로 설정할 경우, 요소의 기존 자식 요소나 텍스트는 모두 삭제되고 새 텍스트로 대체됩니다.
중요: 환영합니다!
공백 문자(Whitespace) 처리
공백 문자(Whitespace):
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.
innerText
속성은 요소 내의 모든 텍스트 콘텐츠를 있는 그대로 반환하거나 설정합니다. 따라서 공백 문자(Whitespace)도 중요한 부분으로 다루어지며, 공백이나 줄바꿈이 포함된 텍스트도 그대로 유지됩니다.
모든 공백 유지
innerText
속성은 요소 내의 텍스트에서 공백, 탭, 줄바꿈을 포함한 모든 공백 문자를 그대로 가져옵니다.
위 예시에서 보듯, HTML 요소에 포함된 여러 개의 공백이나 줄바꿈은 innerText
를 통해 그대로 가져옵니다.
설정 시 공백 포함
innerText
를 설정할 때 공백 문자를 포함해도 그대로 적용됩니다. 예를 들어, 여러 줄의 텍스트나 공백을 포함한 텍스트를 innerText
로 설정하면 HTML 요소에 그대로 반영됩니다.
주의할 점
innerText
속성은 다음과 같은 이유로 사용하지 않는 것이 좋습니다.
innerText
속성은 CSS에 따라 결과가 달리질 수 있습니다.innerText
속성은 랜더링된 요소의 텍스트만를 가져만 반환합니다. 랜더링이 되지 않은 요소의 텍스트는 가져올 수 없습니다.innerText
속성은 CSS를 고려하기 때문에 최신의 CSS 계산된 값을 반영하기 위해 느립니다.
참고로, innerText
속성과 유사한 기능을 가진 textContent
속성이 있습니다. 이 속성은 CSS를 고려하지 않아도 되는 장점이 있습니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
innerText
|
1 | 12 | 45 | 1 |
명세서
명세서 사양 | |
---|---|
innerText
|
DOM Standard #the-innertext-idl-attribute |