목차
- textContent 예제 - 해당노드 및 자손노드의 텍스트내용 반환
- textContent 정의
- textContent 구문
- textContent 예제 - <a>요소와 <h2>요소의 텍스트내용 동일 여부 체크
- textContent 예제 - 텍스트 입력값 바로바로 표시
- textContent 예제 - 텍스트 복사값 바로바로 표시
- textContent 예제 - 요소 내용에 따라 다른 글자색 지정
textContent 예제 - 해당노드 및 자손노드의 텍스트내용 반환
<p id="hz">홈짱닷컴 Homzzang.com <span class='open'><b>2012</b></span></p>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").textContent;
document.getElementById("demo").innerHTML = x;
}
</script>
결과값: 홈짱닷컴 Homzzang.com 2012
textContent 정의
지정노드 및 그 자손노드의 텍스트내용을 설정/반환.
1.
textContent 속성을 설정하면 모든 하위 노드가 제거되고 하나의 새 텍스트 노드로 대체됨.
2. cf.
3.
IE11 이상 주요 최신브라우저 모두 지원.
textContent 구문
반환
- element.textContent
- node.textContent
설정
- element.textContent = text
- node.textContent = text
[속성값]
text
element나 node의 텍스트 내용.
[반환값]
- 요소와 모든 하위 항목의 텍스트내용 반환. (※ string 타입)
- 요소가 document(문서), document type (문서타입), notation(표기법)인 경우 null 반환.
textContent 예제 - <a>요소와 <h2>요소의 텍스트내용 동일 여부 체크
<a href="#"><i>홈짱</i>닷컴</a>
<h2><i>홈짱</i>닷컴</h2>
<script>
// <a> 요소와 <h2> 요소의 텍스트 내용 얻기
const aText = document.querySelector('a').textContent;
const h2Text = document.querySelector('h2').textContent;
// 텍스트 내용을 비교하고 결과 출력
if (aText === h2Text) {
console.log("텍스트 내용 동일 O");
} else {
console.log("텍스트 내용 동일 X");
}
</script>
결과값: 텍스트 내용 동일 O
textContent 예제 - 텍스트 입력값 바로바로 표시
(예) a요소에 텍스트 입력 시, b요소에 입력값 바로 표시
<input type="text" id="a">
<div id="b"></div>
<script>
var a = document.getElementById('a');
var b = document.getElementById('b');
a.addEventListener('input', function() {
var av = a.value;
b.textContent = av;
});
</script>
결과보기
textContent 예제 - 텍스트 복사값 바로바로 표시
(예) a요소에 텍스트 붙여넣기 시, b요소에 붙여넣은 값 바로 표시
<input type="text" id="a">
<div id='b'></b>
<script>
var a = document.getElementById('a');
a.addEventListener('paste', function(event) {
var pastedText = (event.clipboardData || window.clipboardData).getData('text');
a.value = pastedText;
b.textContent = a.value;
});
</script>
결과보기
textContent 예제 - 요소 내용에 따라 다른 글자색 지정
<span id="apply">신청</span>
<script>
document.addEventListener("DOMContentLoaded", function() {
var apply = document.getElementById("apply");
var applytxt = apply.textContent.trim();
if (applytxt === "신청") {
apply.style.color = "red";
} else if (applytxt === "미신청") {
applytxt.style.color = "black";
}
});
</script>
결과보기
