728x90
728x90

웹 요소의 내용 가져오기 (innerText, innerHTML, textContent)

들어가며

  • 자바스크립트로 웹 요소의 내용을 가져오고 수정하는 방법을 알아보자.

 

웹 요소의 내용 가져오기

innerText 프로퍼티

웹요소.innerText
  • 웹 브라우저에서 보이는 내용만 가져온다.
  • display: none을 사용해서 화면에서 감춘 요소의 내용을 가져오지 않는다.
  • 소스 코드에 공백이 여러 개 입력되어 있어도 웹 브라우저 창에 보이는 대로 공백 1칸만 가져온다.

 

innerHTML 프로퍼티

웹요소.innerHTML
  • 웹 브라우저 창에 어떻게 보이는지와는 상관 없이, 요소 안에 있는 태그(Tag)와 함께 소스 코드에 있는 그대로 가져온다.

 

textContent 프로퍼티

웹요소.textContent
  • 요소의 내용을 가져오되, 웹 브라우저 창에 보이는 대로가 아니라 소스 코드에 있는 대로 가져온다.
  • display: none을 사용해서 화면에서 감춘 요소의 내용을 가져온다.
  • 소스 코드에 공백이 여러 개 입력되어 있으면 공백을 모두 가져온다.

 

웹 요소의 내용을 가져올 경우에는 innerText, textContent 프로퍼티를 사용하고, 웹 브라우저 창에 표시되지 않은 내용까지 모두 가져오려면 textContent 프로퍼티를 사용한다. 그리고 요소 안에 있는 태그(Tag)까지 함께 가져오려면 innerHTML 프로퍼티를 사용한다.

 

예제

<div id="desc">
<p class="user">이름 : devastra</p>
<p class="user" style="display: none">주소 : korea</p>
<p class="user" style="display: none">연락처 : 123-4567</p>
</div>

 

innerText 프로퍼티

document.querySelector("#desc").innerText
  • 결과
이름 : devastra

 

innerHTML 프로퍼티

document.querySelector("#desc").innerHTML
  • 결과
\n    <p class="user">이름 : devastra</p>\n    <p class="user" style="display: none">주소 : korea</p>\n    <p class="user" style="display: none">연락처 : 123-4567</p>

 

textContent 프로퍼티

document.querySelector("#desc").textContent
  • 결과
\n    이름 : devastra\n    주소 : korea\n    연락처 : 123-4567

 

728x90
728x90

웹 요소의 내용 가져오기 (innerText, innerHTML, textContent)들어가며웹 요소의 내용 가져오기① innerText 프로퍼티② innerHTML 프로퍼티③ textContent 프로퍼티예제① innerText 프로퍼티② innerHTML 프로퍼티③ textContent 프로퍼티