[JS] 속성 선택하기 - .value / .innerHTML / .textContent 비교

728x90

자바스크립트에서 어떤 태그나 속성을 선택해줄때에는

document에서 해당 태그에 접근할때 .value를 붙여주거나, .innerHTML을 붙여 불러오곤한다.

이 둘의 차이에 대해 정리해보자.

1. value vs. textContent & innerHTML

: 닫힘 태그의 유무

value는 뒤에 </> (닫히는태그)가 오는 태그에는 사용할 수 없다.

뒤에 닫힌태그가 없는 경우에는 value를 사용하여 값을 변경할 수 있으며,

만약 닫힌 태그가 있는 경우에는 textContent와 innerHTML을 사용해서 바꿀 수 있다.

위에 html 에서 .value로 불러온 부분은 <input>태그로, 닫힘 태그가 없는 것을 확인할 수 있다.

반면에, .innerHTML로 불러온 부분은 <div>태그로 닫힘 태그로 마무리되는 것을 확인할 수 있다.

2. textContent vs. innerHTML

그렇다면 textContent와 innerHTML의 차이는 뭘까?

이 둘의 차이점은 사용자에게 보여지는 텍스트값만 읽어오는가 아닌가의 차이 !

textContent	css속성 display:none; 을 하여 보여지지않게 설정해도, 그 값들을 모두 가져온다.
innerHTML	displat: none; 으로 설정하여 보여지지않게 설정한 값들은 가져오지 않는다.

또 띄어쓰기나 공백을 표현함에 있어 차이도 있다.

textContent	그대로 가져옴. (style태그들과 상관없이)
innerHTML	다수의 공백이라도 하나의 공백으로 가져옴.

틀린 부분이나 이상한 부분이 있으면 댓글로 지적해주세요!
감사합니다 :)

728x90

[JS] 자바스크립트 문자열 공백 제거하기 - trim() , replace() (0)	2025.01.04
[JS] querySelector(), querySelectorAll() (0)	2024.08.11
[JS] 자바스크립트 연산자 우선순위 (0)	2024.01.09
[JS] 자바스크립트 연산자 / 형변환 (0)	2024.01.09
[JS] 자바스크립트 자료형 정리 (0)	2024.01.09

Soony's House