자바스크립트 innerText 속성 – 올바른 이해와 사용 방법

`HTMLElement.innerText`

innerText 속성은
렌더링된 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

해당 요소 내에 자손이 있다면 자손 태그는 무시하고 텍스트 콘텐츠만 처리합니다.

구문

값

innerText 속성은 렌더링된 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정할 수 있는데, 이 속성의 값은 렌더링된 HTML 요소의 텍스트 콘텐츠를 가져올때 사용합니다. 렌더링된 HTML 요소의 텍스트 콘텐츠를 가져와 반환합니다.

값 사용 시 주의할 점

다음의 경우에는 텍스트를 가져올 수 없습니다.

해당 요소 자체가 CSS의 visibility: hidden으로 화면에 숨겨진 요소의 텍스트
해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 visibility: hidden으로 화면에 숨겨진 요소의 텍스트, 또는 hidden 속성으로 화면에 숨겨진 요소의 텍스트
해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 display: none으로 화면에 숨겨진 요소의 텍스트

하지만, 해당 요소 자체가 렌더링되지 않은 상태(CSS의 display: none, 또는 hidden 속성으로 화면에서 숨겨진 요소)는 텍스트를 가져올 수 있습니다.

요소에 hidden 속성이 지정되면 브라우저는 해당 요소를 CSS의 display 값을 none으로 처리합니다.

잠시만!
innerText는 textContent 속성과 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 참고사항을 고려하세요!

예제

innerText 속성으로 HTML 요소의 텍스트를 가져오거나 설정하는 예제입니다.

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

만약 해당 요소가 비어있으면, 빈 문자열("")을 반환합니다.

JavaScript 만약 해당 요소가 비어있으면, 빈 문자열("")을 반환합니다.

const ele = document.getElementById("a");
console.log(ele.innerText); // ""

innerText 속성을 사용하면 해당 요소와 그 자손 요소들에 포함된 모든 텍스트 내용을 가져옵니다. 이때 자손 태그는 무시합니다.

해당 요소 자체가 CSS의 visibility: hidden으로 화면에 숨겨진 요소의 텍스트는 가져오지 못합니다.

해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 visibility: hidden으로 화면에 숨겨진 요소의 텍스트, 또는 hidden 속성으로 화면에 숨겨진 요소의 텍스트는 가져오지 못합니다.

또한, 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 display: none으로 화면에 숨겨진 요소의 텍스트도 가져오지 못합니다.

HTML

<div id="hidden-element">
    div 텍스트
    <span style="display: none;">숨겨진 텍스트</span>
    <span style="visibility: hidden;">숨겨진 텍스트</span>
    <span hidden>숨겨진 텍스트</span>
</div>

텍스트 설정하기

innerText 속성을 사용하면 해당 요소의 텍스트 내용을 설정합니다.
새로운 텍스트로 설정할 경우, 요소의 기존 자식 요소나 텍스트는 모두 삭제되고 새 텍스트로 대체됩니다.

JavaScript

const ele = document.getElementById("a");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    ele.innerText = "반갑습니다!";
});

공백 문자(Whitespace) 처리

공백 문자(Whitespace):
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.

innerText 속성은 요소 내의 모든 텍스트 콘텐츠를 있는 그대로 반환하거나 설정합니다. 따라서 공백 문자(Whitespace)도 중요한 부분으로 다루어지며, 공백이나 줄바꿈이 포함된 텍스트도 그대로 유지됩니다.

모든 공백 유지

innerText 속성은 요소 내의 텍스트에서 공백, 탭, 줄바꿈을 포함한 모든 공백 문자를 그대로 가져옵니다.

HTML

<div id="example">
    Hello,    world!
    This is a test.
</div>
<script>
    let text = document.getElementById("example").innerText;
    console.log(text);
    /* 출력:
            Hello,    world!
            This is a test.   
    */
</script>

위 예시에서 보듯, HTML 요소에 포함된 여러 개의 공백이나 줄바꿈은 innerText를 통해 그대로 가져옵니다.

설정 시 공백 포함

innerText를 설정할 때 공백 문자를 포함해도 그대로 적용됩니다. 예를 들어, 여러 줄의 텍스트나 공백을 포함한 텍스트를 innerText로 설정하면 HTML 요소에 그대로 반영됩니다.

참고사항

innerText 속성은 다음과 같은 상황에서는 사용하지 않는 것을 고려해 보세요.

innerText 속성은 CSS에 따라 결과가 달리질 수 있습니다. innerText 속성은 렌더링된 요소의 텍스트만를 가져만 반환합니다. 렌더링이 되지 않은 요소의 텍스트는 가져올 수 없습니다.
innerText 속성은 CSS를 고려하기 때문에 최신의 CSS 계산된 값을 반영하기 위해 느립니다.

참고로, innerText 속성과 유사한 기능을 가진 textContent 속성이 있습니다. 이 속성은 CSS를 고려하지 않아도 되는 장점이 있습니다.