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

 

자바스크립트로 HTML 요소에 접근뒤 해당 요소의 콘텐츠 텍스트를 반환 하거나
수정하는 속성 중 하나는 innerText 이다.
지난 시간 살펴본 textContent 속성과 다른점은 화면에 보이는 텍스트 만 반환 한다는 점.
코드를 보자.

  <h1>Hi, Here is innerText test.

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

  </h1>

  <script>

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

    console.log(text);

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

  </script>

h1 요소의 구성은 textContent 포스팅 과 동일하다.

ㅇdocument.getElementByTagName() 반환값이 HTMLcollection 타입이므로

첫번째 인덱스의 h1 요소에 접근한뒤 innerText 속성을 불러본다.

결과 값은,

text is Hi, Here is innerText test. 

이다. 화면에 보이는 텍스트 콘텐츠 만 반환한다.

그리고, 해당 텍스트를 하기처럼 수정할 수도 있다.

 text[0].textContent = "innerText test";

innerText test

브라우저에 수정된 결과가 나온다.

innerText 속성은 화면에 보이는 텍스트 만 요소로 부터 반환 및 수정이 가능하다.