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

웹 요소의 내용 가져오기 (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@