[JavaScript] dacument.value, ineerHTML 차이

 

JSP 페이지는 서버에서 HTML 코드를 생성해 브라우저로 전달하고,
브라우저는 그 HTML 문서를 기반으로 document 객체를 만들어 자바스크립트로 조작할 수 있다.
이때 DOM(Document Object Model)에 접근할 때 자주 사용하는 속성이 .value와 .innerHTML이다.

어떤 값을 가져오냐에 따라 사용하는 게 달라 정리하고자 한다.

 

---

1. .value — 입력 요소의 값을 가져올때 사용

value는 주로 **입력 요소(form element)**에서 사용된다.
<input>, <textarea>, <select>와 같은 태그의 값을 가져오거나 변경할 때 쓰고,

.getElementById() 의 값을 가져올때 쓴다.

<input type="text" id="userName" value="홍길동"> 

<script> 
let name = document.getElementById("userName").value;
console.log(name); // "홍길동" 

// 값 변경 
document.getElementById("userName").value = "김철수"; 
</script>

 

2. .innerHTML — HTML 태그 안의 내용을 가져올때 사용

innerHTML은 <div>, <span>, <p> 등 일반 컨테이너 태그 내부의 내용을 가져오거나 변경할 때 쓴다.
태그 안에 들어있는 텍스트뿐 아니라 HTML 태그 구조 자체도 함께 다룰 수 있다.

<div id="greeting">안녕하세요</div> 
<script> 
let text = document.getElementById("greeting").innerHTML;
console.log(text); // "안녕하세요"

// 내용 변경 
document.getElementById("greeting").innerHTML = "<b>반갑습니다</b>";
</script>

 

 

** <input>에서는 사용 불가

input 태그는 닫는 태그 없이 속성으로 값이 지정되기 때문에

<input> 태그에 innerHTML을 사용하면 아무 값도 나오지 않는다.

<input type="text" id="test" value="1234">
<script>
console.log(document.getElementById("test").innerHTML); // 아무 것도 안 나옴 
console.log(document.getElementById("test").value); // 1234
</script>

 

 

 

- 정리표

.value	<input>, <textarea>, <select>	입력값 읽기/쓰기	document.getElementById("id").value
.innerHTML	<div>, <span>, <p> 등	태그 내부의 HTML 읽기/쓰기	document.getElementById("id").innerHTML
.textContent	<div>, <span> 등	순수 텍스트만 읽기/쓰기	document.getElementById("id").textContent