목차
Javascript HTML DOM textContent Property
- description : Javascript HTML DOM textContent Property
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-07
The source of the article
Example
요소의 내부 텍스트(inner text)를 가져옵니다.
<body> <p>Click the button to get the text content of the button element.</p> <button onclick="myFunction()" id="myBtn">Try it</button> <p><strong>Note:</strong> The textContent property is not supported in Internet Explorer 8 and earlier.</p> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById('myBtn').textContent; /* id="myBtn"의 텍스트 Try it을 변수 x 에 대입 */ document.getElementById('demo').innerHTML = x; /* 버튼 클릭 시 id="myBtn"의 텍스트 Try it을 가진 변수 x를 id="demo"에 표시 */ } </script> </body>
Definition and Usage
textContent 속성은 지정된 노드 및 모든 하위 항목의 텍스트 콘텐츠를 설정하거나 반환합니다.
textContent 속성을 설정하면, 모든 자식 노드가 제거되고 지정된 문자열을 포함하는 단일 텍스트 노드로 대체됩니다.
Note: 이 속성은 innerText 속성과 비슷하지만 몇 가지 차이점이 있습니다.
- textContent는 모든 요소의 텍스트 콘텐츠를 반환하는 반면, innerText는 <script> 및 <style> 요소를 제외한 모든 요소의 콘텐츠를 반환합니다.
- innerText는 CSS로 숨겨진 요소의 텍스트를 반환하지 않습니다 (textContent는 반환).
Tip: 때때로 nodeValue 속성 대신 사용할 수 있지만, 이 속성(textContent)은 모든 자식 노드의 텍스트도 반환한다는 점을 기억하십시오.
Tip: 요소의 HTML 콘텐츠를 설정하거나 반환하려면 innerHTML 속성을 사용하세요.
Syntax
노드의 텍스트 콘텐츠를 반환합니다.
node.textContent
노드의 텍스트 콘텐츠를 설정합니다.
node.textContent = text
Property Values
| Value | Type | Description |
|---|---|---|
| text | String | 특정 노드의 텍스트 콘텐츠를 지정합니다. |
More Examples
Example
id="demo"를 가진 <p> 요소의 텍스트 콘텐츠를 변경합니다.
<body> <p id="demo" onclick="myFunction()">Click me to change my textual content.</p> <script> function myFunction() { document.getElementById('demo').textContent = 'Paragrahp changed!'; } /* 버튼 클릭 시 id="demo" 의 텍스트를 Paragrahp changed!로 변경함 */ </script>
Example
id="myList"를 가진 <ul> 요소의 모든 텍스트 콘텐츠를 가져옵니다.
<body> <ul id="myList"> <li>Coffee</li> <li>Tea</li> </ul> <p>Click the button to get the text content of the ul element.</p> <button onclick="myFunction()">Try it</button> <p><strong>Note:</strong> Textual content includes the text of all child nodes as well.</p> <p><strong>Note:</strong> The textContent property is not supported in Internet Explorer 8 and earlier.</p> <p id="demo"></p> <!-- 버튼 클릭 시 Coffee Tea가 표시됨 --> <script> function myFunction() { var x = document.getElementById('myList').textContent; document.getElementById('demo').innerHTML = x; } </script> </body>
Example
다음의 예제는 innerText, innerHTML, 그리고 textContent 사이의 일부 차이점을 보여줍니다.
<body> <h3>Differnece between innerText, innerHTML, and textContent</h3> <p id="demo"> This element has extra spacing, and contains <span>a span element</span>.</p> <button onclick="getInnerText()">Get innerText</button> <button onclick="getHTML()">Get innerHTML</button> <button onclick="getTextContent()">Get textContent</button> <p><strong>Note:</strong> The textContent property is not supported in Internet Explorer 8 and earlier, and the innerText property is not supportedin IE9 and earlier.</p> <p id="demo"></p> <script> function getInnerText() { alert(document.getElementById('demo').innerText); } /* This element has extra spacing, and contains a span element. */ function getHTML() { alert(document.getElementById('demo').innerHTML); } /* This element has extra spacing, and contains <span>a span element</span>. */ function getTextContent() { alert(document.getElementById('demo').textContent); } /* This element has extra spacing, and contains a span element. */ </script> </body>
지정된 속성을 사용하여 위의 <p> 요소의 콘텐츠를 가져옵니다.
innerText 반환 : “This element has extra spacing, and contains a span element.”
innerHTML 반환 : “ This element has extra spacing, and contains a span element.”
textContent 반환 : “ This element has extra spacing, and contains a span element.”
innerText 속성은 공백 및 내부 요소 태그 없이 텍스트만 반환합니다.
innerHTML 속성은 모든 공백 및 내부 요소 태그를 포함하여 텍스트를 반환합니다.
textContent 속성은 간격은 있지만 내부 요소 태그는 없는 텍스트를 반환합니다.
