[JavaScript] 자바스크립트에서 텍스트 요소 다루기

145_자바스크립트에서 텍스트 요소 다루기

[적용]

• HTML 텍스트를 변경하고 싶을 때

---

[문법]

메소드	의미	타입
노드.textContent	노드 내 텍스트	문자열

---

[내용]

textContent는 요소 내 텍스트를 가져오거나 변경한다.

텍스트를 가져올 때 HTML 태그는 무시한다.

 

HTML                                                                                                                                                              index.html

<h1>오늘의 날씨</h1>
<p id="weather-information">흐림 <span class=temperature">(23도)</span></p>

JavaScript                                                                                                                                                          main.js

const weatherInformation = 
  document.querySelector('#weather-information');
  
// 다음의 문자열 출력
// 흐림(23도)
console.log(weatherInformation.textContent);

---

[예시]

화면 표시 3초후 #weather-information 요소 내 텍스트를 변경하는 예시를 확인해 보자./

 

HTML                                                                                                                                                              index.html

<p id="weather">내일은 맑음</p>

JavaScript                                                                                                                                                          main.js

const weatherElement = document.querySelector('#weather');

// 3초후 #weather 내용 변경
setTimeout(() =>
  weatherElement.textContent = '기온은 24도가 예상됩니다.';
}, 3000);

 

textContent에 HTML 태그를 포함해도 태그가 아닌 문자열로 인식된다.

// 3초후 #weather 내용 변경
setTimeout(() => {
  weatherElement.textContent = '기온은 <strong>24도</strong>가 예상됩니다.';
}, 3000);

 

[실행결과]

'기온은 <strong>24도</strong>가 예상됩니다.' 그대로 화면에 출력됨.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김