HTML DOM textContent 속성

HTML DOM Element 객체

textContent속성을 설정하거나 반환합니다

노드에 textContent을 설정하면 노드의 모든 자식 노드를 제거하고, 주어진 텍스트를 가진 단일 텍스트 노드로 대체합니다.

textContent 속성은innerText속성이 있지만, 몇 가지 차이가 있습니다：

• textContent은 반환모든요소의 텍스트 내용을 반환하며 innerText은를 제외하고 <script>과<style> 요소외의 모든 요소의 내용。

• innerText은 CSS에 숨겨진 요소의 텍스트를 반환하지 않습니다(textContent은 반환합니다)

요소의 HTML 내용을 설정하거나 반환하려면 사용하십시오innerHTML속성。

문법：

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

node.textContent

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

node.textContent = text

var x = document.getElementById("para").textContent;

브라우저 호환성

모든 브라우저가 textContent 속성을 완벽히 지원합니다：

속성 값

기술 세부 사항

더 많은 예제

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

var x = document.getElementById("para");
x.textContent = "HELLO WORLD";

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

var x = document.getElementById("container").textContent;

이 예제는 innerText, innerHTML 및 textContent 간의 차이를 설명합니다：

<p id="x">이 요소는 추가적인 간격을 가지고 있으며 <span>span 요소를 포함하고 있습니다</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("x").innerText);}
}
function　getInnerHTML()　{
alert(document.getElementById("x").innerHTML);
}
function　getTextContent()　{
alert(document.getElementById("x").textContent);
}
</script>

innerText 속성은 공백과 내부 요소 태그를 포함하지 않고 텍스트만 반환합니다.

innerHTML 속성은 공백과 내부 요소 태그가 포함된 텍스트를 반환합니다.

textContent 속성은 간격이 있는 텍스트를 반환하지만, 내부 요소 태그는 포함하지 않습니다.

관련 참조

HTML DOM 참조:HTMLElement.innerText 속성

HTML DOM 참조:element.innerHTML 속성

HTML DOM Element 객체