JavaScript - innerText / innerHTML / textContent

DW J·2022년 8월 9일
0

develop_wis

목록 보기
3/9

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
profile
잘하는것보다 꾸준히하는게 더 중요하다

0개의 댓글