자바스크립트로 HTML요소 콘텐츠 텍스트 수정하기 (textContent 속성)

 

자바스크립트로 HTML 요소의 콘텐츠 영역을 수정할 수 있다.
코드를 먼저 보자.

 <h1>Hi, Here is TextContent test.

    <span style="display:none">테스트 입니다.</span>

 </h1>

  <script>

    let text = document.getElementsByTagName("h1");

    console.log(text);

    console.log(`text is ${text[0].textContent}`);

  </script>

document.getElementsByTagName() 메서드로 h1 요소에 접근한다.
h1요소의 콘텐츠 부분의 텍스트를 수정하기 위함이다.
document.getElementsByTagName() 메서드 의 반환값은 

HTMLCollection [h1]

이므로, 바로 text.textContent 로 접근을 하면 undefined 가 나온다.

HTMLCollection의 첫번째 요소값의 textContent에 접근해야 한다.

그 코드가 바로, text[0].textContent 이다.

결과는 

text is Hi, Here is TextContent test. 테스트 입니다

로 나온다.

span 태그의 style 속성에서 화면에 보이지 않도록 display:none 으로 설정했지만

여기서는 요소의 텍스트가 다 나온다.

바로 textContent 의 성질은 요소가 가지고 있는 모든 텍스트를 반환한다는 것 이다.

추가로, 

 text[0].textContent = "수정함";

코드를 삽입하면, 브라우저 화면에는 

수정함

수정한 텍스트가 출력이 된다.

요소.textContent 속성은 요소가 가진 모든 텍스트를 반환 및 수정이 가능하다.