javascript / 자바스크립트 / textContent innerHTML value 차이

 

안녕하세요 이번에는 자바스크립트에서 글자를 바꾸는 세 가지 차이점을

알아보고자 합니다.

textContent와 innerHTMl은 따로 포스팅을 했으나 아직 value는 포스팅을 하지 않았는데요,

일단 간단히 value 역시 값을 가져와서 넣을 수 있습니다.

나중에 따로 포스팅 할 기회가 있을 텐데 그때 간단히 설명드리겠습니다.

 

 

 

value와 textContent or innerHTML 

 

value 같은 경우 역시 값을 변경하긴 하나, input으로 닫히는 태그가 없는 경우에

값을 변경할 수 있습니다.

닫힌 태그 즉,

<h1></h1> 이런 식으로 뒤에 </>이렇게 오는 태그에는 사용할 수 없습니다.

사용해도 먹히지를 않습니다.

 

 

<input type="text" id="input-test" value="안녕">

 

var btn = document.getElementById("btn");

btn.addEventListener("click",function(){
    document.getElementById("input-test").value = "반갑습니다.";
})

 

이렇게 있을 경우

 

 

 

 

버튼을 클릭하면 아래와 같이 바뀝니다.

 

 

이렇게 value와 textContent or innerHTML은 차이는 닫힌 태그가 없을 경우는

전자인 value를 사용해 값을 변경할 수 있고,

닫힌 태그가 있을 경우 후자인 textContent와 innerHTML을 사용해서 바꿀 수 있습니다.

 

 

 

 

textContent와 innerHTML

 

이 둘 역시 글자를 변경 할 수 있는데요, 다만

둘의 차이점은 사용자에게 보여지는 텍스트 값만 읽어오느냐 아니냐의 차이입니다.

 

아직 포스팅을 하지 않았으나 css에서 

display:none을 이용할 경우 브라우저에서 사용자에게 보이지 않도록 할 수 있는데요.

이때 textContents는 보여지지 않는다 하더라도 그 값들을 다 가져오지만

innerHTML은 보여지지 않는 값을 가져오지 않습니다.

display:none으로 설정된 것은 사용자에게 보이지 않기 때문에

가져오지 않는것이지요.

간단히 alert() 함수를 이용해서 보면 확인하실 수 있습니다.

 

var btn = document.getElementById("btn");

btn.addEventListener("click",function(){
    alert(document.getElementById("test").textContent);
   
})

 

혹시나 해보 실 분이 있으시다면 이렇게 간단하게 확인 하실 수 있습니다.

 

 

다른 차이점은

예를 들어 사용자가

 

("하나    두울~")  

이런 간단한 예제가 있을 경우

textContent는 그대로 가져오게 됩니다.

 

하나    두울~

 

이렇게 띄어쓰기(공백) 그대로 가져오게 됩니다.

또한 style태그와도 상관없이 텍스트 값을 그대로 가져오는 것이죠.

 

 

 

하지만

innerHTML 같은 경우는 사용자에게 보이는 그대로에 텍스트 값을 가져오게 되죠

또한 공백 같은 경우도 하나로 가져오게 되는데요.

위 예제 같은 경우 

 

하나 두울~

 

이렇게 다수의 공백이라도 하나의 공백으로 가져오게 됩니다.