HTML DOM Element textContent 속성

정의와 사용법

textContent 속성은 지정된 노드의 텍스트 내용을 설정하거나 반환하며, 그의 모든 자손도 포함합니다.

만약 다음과 같이 설정하면, textContent 속성은 모든 자식 노드를 제거하고, 주어진 문자열을 포함한 하나의 단일 텍스트 노드로 대체합니다.

ヒント:때때로 이 속성은 nodeValue 속성을 대체할 수 있지만, 모든 자식 노드의 텍스트도 반환할 것을 기억하세요.

다른 참조서:

innerText 속성

innerHTML 속성

예제

예제 1

요소의 텍스트 내용을 반환합니다：

let text = element.textContent;

본인이 직접 시도해 보세요

예제 2

id="demo"의 <p> 요소의 텍스트 내용을 변경합니다：

element.textContent = "I have changed!";

본인이 직접 시도해 보세요

예제 3

id="myList"의 <ul> 요소의 모든 텍스트 내용을 가져옵니다：

let text = document.getElementById("myList").textContent;

본인이 직접 시도해 보세요

문법

노드의 텍스트 내용을 반환합니다：

요소.textContent

또는

노드.textContent

노드의 텍스트 내용을 설정합니다：

요소.textContent = text
노드.textContent = text

속성 값

값 설명
text 요소나 노드의 텍스트 내용

반환 값

타입 설명
문자열

요소와 모든 자식 요소의 텍스트 내용

요소가 document, document type 또는 notation이면 null을 반환합니다.

innerHTML, innerText과 textContent의 차이

innerText 속성은 다음을 반환합니다：

요소와 모든 자식 요소의 텍스트 내용만 반환하고, CSS 숨겨진 텍스트 공간과 태그는 포함되지 않습니다. <script>와 <style> 요소를 제외하고.

innerHTML 속성은 다음을 반환합니다：

요소의 텍스트 내용, 모든 공백과 내부 HTML 태그가 포함됩니다.

textContent 속성은 다음을 반환합니다：

요소와 모든 자식 요소의 텍스트 내용, 공백과 CSS 숨겨진 텍스트가 포함되며, 태그는 없습니다.

HTML 예제

<p id="myP">   이 요소는 추가 공간이 있으며 <span>span 요소</span>를 포함하고 있습니다.</p>

JavaScript 예제

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

본인이 직접 시도해 보세요

위의 예제에서는：

innerText 속성은 다음을 반환합니다：

이 요소는 추가 공간이 있으며 span 요소를 포함하고 있습니다.

innerHTML 속성은 다음을 반환합니다：

   이 요소는 추가 공간이 있으며 <span>span 요소</span>를 포함하고 있습니다.

textContent 속성은 다음을 반환합니다：

   이 요소는 추가 공간이 있으며 span 요소를 포함하고 있습니다.

브라우저 지원

element.textContent DOM Level 3 (2004) 기능입니다。

모든 브라우저는 완전히 지원합니다：

Chrome IE 에지 파이어폭스 사파리 오페라
Chrome IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원