innerHTML / innerText / textContent / value
- Element의 값을 변경할 때 사용하는 속성(property)
- 각 속성별로 특징과 사용 방법에 대해 알아보자
1. innerHTML
- 요소(element)내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정
특수문자를 자동으로 HTML 엔티티로 대체
ex) "&" => "&\amp"
- 해당 속성을 사용하면 기존의 내용을 쉽게 변경 할 수 있음
- 내부에 포함 된 HTML 또는 XML을 설정할 수 있기 때문에 보안 위험이 높음
- 일반적으로 값(텍스트)를 입력할 때는 사용하지 않는것이 좋음
소스 코드
>> 값 설정 - HTML, XML등 태그도 설정 가능
const element = document.querySelector(".element");
const value = "가나다라<div>innerHTML은 <span>태그<span>도 설정할 수 있다</div>";
element.innerHTML = value;
>> 값 반환 - element 내부의 모든 요소를 문자열로 반환
const result = element.innerHTML;
>> 값 삭제 - element내 모든 요소 삭제
document.body.innerHTML = "";
>> 보안 관련
let name = "test";
...
..
name = "<script>공격용 코드...</script>";
...
el.innerHTML = name;
2. innerText
- 해당 요소(element)와 하위 자식의 "렌더링 된" 텍스트 콘텐츠를 나타냄
- 사용자가 커서를 이용해 요소를 선택하고 클립보드에 복사했을 때 얻을 수 있는 근사값 제공
- 요소자체가 "렌더링 중"이 아니라면 textContent속성의 값과 동일
- 숨겨진 요소는 무시하고 br태그는 인식
- 스타일링 인식으로 인해 최신 계산값을 반영하고 그로인해 리플로우가 발생
※ 리플로우는 비용이 많이 들어가기 때문에 가능한 피해야함
- IE기준으로 innerText를 수정하면 모든 자식 노드를 제거, 자손노드 파괴함
이후 다른 노드는 물론 같은 노드에 추가하는것도 불가능함
소스코드
>> 값 설정
const element = document.querySelector(".element");
const value = "가나다라";
element.innerText = value;
>> 값 삭제
element.innerText = "";
>> 값 반환 - 렌더링 중이 아니면 textContent와 동일한 값
- html
<div class="test">
<span>text<br /> br text</span>
<span style="display: none">hide text</span>
</div>
- js
const element = document.querySelector("test");
const result = element.innerText;
console.log(result);
- 출력
text
br text
3. textContent
- innerText와 거의 동일하게 동작
- 숨겨진요소 뿐만아니라 script, style요소를 포함한 모든 컨텐츠를 가져옴
- 노드자체에 들어있는 내용을 텍스트로 반환하기 때문에 프로퍼티 중 속도가 가장 빠름
(CSS에 대한 정보, 브라우저에 어떻게 보여질지에 대한 확인이 필요없기때문에)
- 요소에 포함 된 코드를 텍스트로 인식하기때문에 보안 위험이 없음
소스 코드
>> 값 설정
const element = document.querySelector(".element");
const value = "가나다라"
element.textContent = value;
>> 값 삭제
element.textContent = "";
>> 값 반환
- html
<div class="test">
<span>text<br /> br text</span>
<span style="display: none">hide text</span>
</div>
- js
const element = document.querySelector("test");
const result = element.innerText;
console.log(result);
- 출력
text br text
hide text