HTML DOM textContent 속성이란?
HTML DOM의 textContent 속성은 해당 노드와 그 모든 자식 노드가 가진 텍스트(공백 문자 포함)에 해당하는 문자열을 반환하거나 설정하는 속성입니다. 요소 내부의 순수한 텍스트만 필요할 때 innerHTML 대신 안전하게 활용할 수 있는 대표적인 방법입니다.
문법(Syntax)
1. 문자열 값 반환하기
Node.textContent
반환값은 다음과 같습니다.
- document 노드인 경우 → null
- 그 외의 경우 → 지정된 노드와 모든 자식 노드의 텍스트
2. textContent에 문자열 값 설정하기
Node.textContent = string
참고: textContent 속성으로 값을 설정하면 노드와 자식 노드들의 기존 내용이 모두 사라지고 하나의 단일 텍스트 문자열로 대체됩니다.
예제(Example)
다음은 학생 명단에서 특정 학생('Bina')이 존재하는지 확인하고, 그 결과를 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM textContent</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ul{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-textContent</legend>
<h3>Students</h3>
<ul>
<li>Adam</li>
<li>Alex</li>
<li>Bina</li>
<li>Eden</li>
<li>Rajesh</li>
<li>Zampa</li>
</ul>
<input type="button" onclick="checkForBina()" value="Confirm for Bina">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var studentList = document.getElementsByTagName("li");
var status = 'not Present';
function checkForBina() {
for(var i=0; i<studentList.length; i++){
if(studentList[i].childNodes[0].textContent === 'Bina'){
status = 'Present';
break;
}
}
divDisplay.textContent = 'Bina is '+status;
}
</script>
</body>
</html>실행 결과(Output)
'Confirm for Bina' 버튼을 클릭하기 전 −
'Confirm for Bina' 버튼을 클릭한 후 −
버튼을 클릭하면 각 <li> 요소의 첫 번째 자식 노드에서 textContent 값을 읽어 'Bina'와 일치하는지 비교하고, 확인 결과를 div 영역에 출력합니다. 이처럼 textContent는 노드의 텍스트를 읽거나 새로 설정할 때 매우 유용하게 사용됩니다.