Javascript: value vs textContent, innerHTML, innerText

🙋🏻‍♀️ DOMstring 안에 있는 텍스트 값을 가져와서 변경하고 싶을 땐?

input 과 같은 form 요소의 값을 가져오고 싶으면 .value 를 쓰고, 그 외 div 나 span 등의 요소 안에 있는 텍스트를 읽고 싶으면 .textContent 등의 메소드를 쓴다.

let inputId = document.querySelector('#id');
let inputPassword = document.querySelector('#password');
let newUser = {}; 

// 유저가 입력한 값을 데이터베이스에 저장하고, 화면에 보이는 입력된 값은 clear 해 봅니다.  
newUser.id = inputId.value; 
newUser.password = inputPassword.value; 
inputId.value = ""; 
inputPassword.value = ""; 

🙋🏻‍♀️ textContent 하고 innerHTML, innerText 는 뭐가 다를까?

마크업 언어를 가져와 변경할 수 있다는 점에서 같다. 다른 점은,

💡 innerHTML 은 마크업 태그를 핸들링할 수 있다. <div>여름 바다</div> 입력이 가능. 물론 <img>, <script> 태그 등도 삽입 가능하다. (그 말인 즉슨, XSS 공격의 대상이 된다. 👀 )

// Element.innerHTML; 
// HTMLElement.innerText;
// Node.textContent; 

// innerHTML 예제
let currentTime = document.querySelector('.time-text');
let time = new Date(); 

currentTime.innerHTML = `<span> Current local time: ${time} </span>`
currentTime.innerHTML = `<script>alert('I can even add infinite while loop!')</script>` // screwed. 

💡 innerText 는 style 등 마크업 언어가 적용(render)된 형태로 읽어온다. 그래서 HTML 의 요소가 제거된 텍스트만 읽고 싶다면 innerText 로 읽을 수 있다. 단, 스타일링 등이 적용된 상태이기 때문에 최종 유저에게 보이는, "human-readable" 한 글자만 읽어온다는 점 주의.

// HTML 이 다음과 같다고 가정할 때, 
<div id="mood">
	Good morning, sunshine! 
	<span style="display:none">You cannot read me!</span>
</div>

// innerText 예제
document.querySelector('#mood').innerText; // "Good morning, sunshine!"

💡 textContent 는 마크업 태그를 제외한 모든 문자열을 읽고, 변경할 수 있다. 위와 같은 예제에 textContent 를 적용해보면 결과가 다음과 같다.

// innerContent 예제
document.querySelector('#mood').textContent; // "Good morning, sunshine!You cannot read me!"

// HTML 이 다음과 같다고 가정할 때, 
<div id="statement">
	Keep Calm and          Drink <strong>Coffee</strong>
	<span style="display:none">Sometimes, Tea</span>
</div>

// JavaScript
const statement = document.querySelector('#statement');

statement.innerHTML; // <div id="statement">Keep Calm and          Drink <strong>Coffee</strong><span style="display:none">Sometimes, Tea</span></div>

statement.innerText; // Keep Calm and Drink Coffee

statement.textContent; // Keep Calm and          Drink CofeeSometimes, Tea

• innerHTML 은 앞서 설명했듯, 는 매번 스타일링까지 적용한 상태로 읽기 때문에 textContent에 비해 상대적으로 헤비한 메소드이다. textContent 로 텍스트 값을 읽으면, innerHTML 과 달리 마크업 언어를 parse 해 올 필요가 없으므로 더 나은 퍼포먼스를 보인다. 그래서 보통의 경우, textContent 사용을 권장하고 있다. 😎 👉🏼 read more