Node.textContent
textContent
속성은
HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
해당 요소 내에 자손이 있다면 자손 태그는 무시하고 텍스트 콘텐츠만 처리합니다.
일러두기!
편의상 textContent
를 설명할 때 Node
대신 "요소"라고 표현한 것입니다. 사실 textContent
는 모든 DOM(Document Object Model) 노드(Node
객체)에서 사용할 수 있는 속성입니다. 여기서 "요소"라고 표현한 것은 더 직관적이고 쉽게 이해할 수 있도록 설명한 것입니다.
노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
구문
값
문자열 또는 null
다음의 경우에는 null
을 반환합니다.
document
객체- Doctype
textContent
와 innerHTML
차이
textContent
속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정하지만,
innerHTML
속성은
HTML 요소의 내부 텍스트를 포함한 HTML 콘텐츠를 가져오거나 설정합니다.
HTML 태그를 이스케이프 처리한다는 것은 예를 들어, <
기호는 HTML의 시작 태그로 인식되기 때문에, <
라는 기호만을 그대로 기재하면 브라우저에서의 표시에 문제가 생기거나 표시되지 않거나 합니다. 이것을 이스케이프 처리하면 HTML의 특수 문자로 해당하는 기호로 변환해서 사람이 볼 수 있게 한다는 것을 의미합니다.
HTML 특수 문자 사용법과 의의 – 예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기를 참고하세요!
예제
textContent
속성으로 HTML 요소의 텍스트를 가져오거나 설정하는 예제입니다.
텍스트 가져오기
textContent
속성을 사용하면 해당 요소의 텍스트 내용을 가져옵니다.
만약 해당 요소가 비어있으면, 빈 문자열(""
)을 반환합니다.
textContent
속성을 사용하면 해당 요소와 그 자손 요소들에 포함된 모든 텍스트 내용을 가져옵니다. 이때 자손 태그는 무시합니다.
텍스트 설정하기
textContent
속성을 사용하면 해당 요소의 텍스트 내용을 설정합니다.
새로운 텍스트로 설정할 경우, 요소의 기존 자식 요소나 텍스트는 모두 삭제되고 새 텍스트로 대체됩니다.
중요: 환영합니다!
다음은 textContent
속성을 사용해서 HTML 태그가 있는 텍스트를 설정하면 HTML 태그는 이스케이프 처리를 해서 사람이 볼 수 있는 텍스트로 바뀌는 예제입니다.
중요: 환영합니다!
공백 문자(Whitespace) 처리
공백 문자(Whitespace):
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.
textContent
속성은 요소 내의 모든 텍스트 콘텐츠를 있는 그대로 반환하거나 설정합니다. 따라서 공백 문자(Whitespace)도 중요한 부분으로 다루어지며, 공백이나 줄바꿈이 포함된 텍스트도 그대로 유지됩니다.
모든 공백 유지
textContent
속성은 요소 내의 텍스트에서 공백, 탭, 줄바꿈을 포함한 모든 공백 문자를 그대로 가져옵니다.
위 예시에서 보듯, HTML 요소에 포함된 여러 개의 공백이나 줄바꿈은 textContent
를 통해 그대로 가져옵니다.
브라우저 렌더링과 다름
브라우저는 렌더링할 때 여러 개의 연속된 공백을 하나의 공백으로 표시하거나, 줄바꿈을 무시할 수 있지만, textContent
는 해당 공백을 모두 반영합니다. 따라서, textContent
로 가져온 텍스트와 실제 브라우저에서 보이는 텍스트가 차이가 있을 수 있습니다.
설정 시 공백 포함
textContent
를 설정할 때 공백 문자를 포함해도 그대로 적용됩니다. 예를 들어, 여러 줄의 텍스트나 공백을 포함한 텍스트를 textContent
로 설정하면 HTML 요소에 그대로 반영됩니다.
주의할 점
textContent
와 유사한 innerText
속성은 다음과 같은 이유로 사용하지 않는 것이 좋습니다.
textContent
속성은 해당 요소 내부의 원시 텍스트(raw text)를 가져오기 때문에 CSS에 따라 결과가 달라지지 않고 빠릅니다.innerText
속성은 CSS에 따라 결과가 달리질 수 있습니다.innerText
속성은 랜더링된 HTML 요소의 텍스트를 가져만 반환합니다. 화면에 숨겨진 해당 요소(CSS의display: none
, 또는hidden
속성으로 화면에서 숨겨진 요소)의 텍스트는 가져올 수 없습니다.innerText
속성은 CSS를 고려하기 때문에 최신의 CSS 계산된 값을 반영하기 위해 느립니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
textContent
|
1 | 12 | 1 | 3 |
명세서
명세서 사양 | |
---|---|
textContent
|
DOM Standard #dom-node-textcontent |