Node.textContent

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

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

일러두기!
편의상 textContent를 설명할 때 Node 대신 "요소"라고 표현한 것입니다. 사실 textContent는 모든 DOM(Document Object Model) 노드(Node 객체)에서 사용할 수 있는 속성입니다. 여기서 "요소"라고 표현한 것은 더 직관적이고 쉽게 이해할 수 있도록 설명한 것입니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.

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

구문

JavaScript 
/* 가져오기 */
const text = someNode.textContent;

/* 설정하기 */
someOtherNode.textContent = string;

값

문자열 또는 null

다음의 경우에는 null을 반환합니다.

JavaScript 
let doc = document;
console.log(doc.textContent); // null

let doctype = document.doctype;
console.log(doctype.textContent); // null

textContent와 innerHTML 차이

textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정하지만,
innerHTML 속성은 HTML 요소의 내부 텍스트를 포함한 HTML 콘텐츠를 가져오거나 설정합니다.

textContent 속성을 사용해서 HTML 태그가 있는 텍스트를 설정하면 HTML 태그는 이스케이프 처리를 해서 사람이 볼 수 있는 텍스트로 바뀝니다. 이것은 HTML 요소의 내부 텍스트를 포함한 HTML 콘텐츠를 가져오거나 설정하는 innerHTML 속성과 가장 큰 차이점입니다. 관련 예제를 참고하세요!

HTML 태그를 이스케이프 처리한다는 것은 예를 들어, < 기호는 HTML의 시작 태그로 인식되기 때문에, <라는 기호만을 그대로 기재하면 브라우저에서의 표시에 문제가 생기거나 표시되지 않거나 합니다. 이것을 이스케이프 처리하면 HTML의 특수 문자로 해당하는 기호로 변환해서 사람이 볼 수 있게 한다는 것을 의미합니다.
HTML 특수 문자 사용법과 의의 – 예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기를 참고하세요!

예제

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

텍스트 가져오기

textContent 속성을 사용하면 해당 요소의 텍스트 내용을 가져옵니다.

HTML 
<p id="a">환영합니다!</p>
JavaScript 
const ele = document.getElementById("a");
console.log(ele.textContent); // "환영합니다!"

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

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

HTML 
<p id="a"></p>
JavaScript 만약 해당 요소가 비어있으면, 빈 문자열("")을 반환합니다. 
const ele = document.getElementById("a");
console.log(ele.textContent); // ""

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

HTML 
<div id="container"><p>반갑습니다!</p></div>
JavaScript 
const container = document.getElementById("container");
console.log(container.textContent); // "반갑습니다!"

텍스트 설정하기

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

HTML 
<p id="a"><strong>중요:</strong> 환영합니다!</p>
<button type="button" id="btn">텍스트 내용을 설정</button>
JavaScript 
const ele = document.getElementById("a");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    ele.textContent = "반갑습니다!";
});
실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

다음은 textContent 속성을 사용해서 HTML 태그가 있는 텍스트를 설정하면 HTML 태그는 이스케이프 처리를 해서 사람이 볼 수 있는 텍스트로 바뀌는 예제입니다.

HTML 
<p id="a"><strong>중요:</strong> 환영합니다!</p>
<button type="button" id="btn">텍스트 내용을 설정</button>
JavaScript 
const ele = document.getElementById("a");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    ele.textContent = "<p>반갑습니다!</p>";
});
실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

공백 문자(Whitespace) 처리

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

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

모든 공백 유지

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

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

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

브라우저 렌더링과 다름

브라우저는 렌더링할 때 여러 개의 연속된 공백을 하나의 공백으로 표시하거나, 줄바꿈을 무시할 수 있지만, textContent는 해당 공백을 모두 반영합니다. 따라서, textContent로 가져온 텍스트와 실제 브라우저에서 보이는 텍스트가 차이가 있을 수 있습니다.

설정 시 공백 포함

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

JavaScript 
let element = document.getElementById("example");
element.textContent = `
    Hello,    world!
    This is a test.
`; // 공백과 줄바꿈 포함

textContent와 유사한 innerText 속성은 다음과 같은 이유로 사용하지 않는 것이 좋습니다.

  • textContent 속성은 해당 요소 내부의 원시 텍스트(raw text)를 가져오기 때문에 CSS에 따라 결과가 달라지지 않고 빠릅니다.
  • innerText 속성은 CSS에 따라 결과가 달리질 수 있습니다. innerText 속성은 렌더링된 HTML 요소의 텍스트를 가져만 반환합니다. 화면에 숨겨진 해당 요소(CSS의 display: none, 또는 hidden 속성으로 화면에서 숨겨진 요소)의 텍스트는 가져올 수 없습니다.
  • innerText 속성은 CSS를 고려하기 때문에 최신의 CSS 계산된 값을 반영하기 위해 느립니다.

브라우저 호환성

textContent 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
textContent 1 12 1 3

명세서

textContent 속성의 명세서 사양
명세서 사양
textContent DOM Standard
#dom-node-textcontent

참고문헌

같이 보기