HTML DOM textContent 속성
예시
요소의 텍스트 콘텐츠를 가져옵니다.
var x =
document.getElementById("myBtn").textContent;
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
textContent 속성은 지정된 노드 와 해당 노드의 모든 하위 항목의 텍스트 콘텐츠를 설정하거나 반환합니다 .
textContent 속성 을 설정 하면 모든 자식 노드가 제거되고 지정된 문자열을 포함하는 단일 Text 노드로 대체됩니다.
참고: 이 속성은 innerText 속성과 유사하지만 몇 가지 차이점이 있습니다.
- textContent는 모든 요소의 텍스트 내용을 반환하고 innerText는 <script> 및 <style> 요소 를 제외한 모든 요소의 내용을 반환합니다.
- innerText는 CSS로 숨겨진 요소의 텍스트를 반환하지 않습니다(textContent는 반환).
팁: 때로는 이 속성을 nodeValue 속성 대신 사용할 수 있지만 이 속성은 모든 자식 노드의 텍스트도 반환한다는 점을 기억하십시오.
팁: 요소의 HTML 콘텐츠를 설정하거나 반환하려면 innerHTML 속성을 사용하세요.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
통사론
노드의 텍스트 내용을 반환합니다.
node.textContent
노드의 텍스트 내용을 설정합니다.
node.textContent = text
속성 값
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
기술적 세부 사항
반환 값: | 노드 및 모든 하위 항목의 텍스트를 나타내는 문자열입니다. 요소가 문서, 문서 유형 또는 표기법이면 null을 반환합니다. |
---|---|
DOM 버전 | 코어 레벨 3 노드 객체 |
더 많은 예
예시
id="demo"를 사용하여 <p> 요소의 텍스트 콘텐츠를 변경합니다.
document.getElementById("demo").textContent = "Paragraph changed!";
예시
id="myList"인 <ul> 요소의 모든 텍스트 콘텐츠를 가져옵니다.
var x = document.getElementById("myList").textContent;
x 의 값은 다음과 같습니다.
Coffee Tea
예시
이 예에서는 innerText, innerHTML 및 textContent 간의 몇 가지 차이점을 보여줍니다.
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
지정된 속성을 사용하여 위의 <p> 요소의 내용을 가져옵니다.
innerText 반환: "이 요소에는 추가 간격이 있고 스팬 요소가 포함되어 있습니다."
innerHTML 반환: " 이 요소에는 추가 간격이 있고 <span>스팬 요소</span>가 포함되어 있습니다."
textContent 는 다음을 반환합니다. " 이 요소에는 추가 간격이 있고 span 요소가 포함되어 있습니다."
innerText 속성은 공백 및 내부 요소 태그 없이 텍스트만 반환합니다.
innerHTML 속성은 모든 간격 및 내부 요소 태그를 포함하여 텍스트를 반환합니다.
textContent 속성은 간격이 있는 텍스트를 반환하지만 내부 요소 태그는 포함하지 않습니다.