[DOM_Element] JS - textContent 속성 ★ - 지정노드 및 그 자손노드의 텍스트내용 설정/반환 (= textContent속성 = 텍스트콘텐트속성) (IE9 이상) ※ 텍스트 입력값 바로바로 표시

1. textContent 예제 - 해당노드 및 자손노드의 텍스트내용 반환
2. textContent 정의
3. textContent 구문
4. textContent 예제 - <a>요소와 <h2>요소의 텍스트내용 동일 여부 체크
5. textContent 예제 - 텍스트 입력값 바로바로 표시
6. textContent 예제 - 텍스트 복사값 바로바로 표시
7. 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.

• innerText 속성
• innerHTML 속성

 

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>

 

결과보기