[Js] innerHTML, textContent

기본적으로 텍스트값을 읽어오고 설정할 수 있다는 공통점이 있음.

innerHTML

Element의 속성. element 내에 포함된 전체 HTML 또는 XML마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다.
innerHTML을 사용해 HTML코드를 Javascript 코드에서 변경 가능하다.
예를 들어

<div class='box'>
 이건 보이는 글자
 <span style='display:none'>보이지 않는 글자</span>
</div>

코드의 box 클래스를 가진 div의 innerHTML을 가져올 경우, 출력값은

이건 보이는 글자
 <span style='display:none'>보이지 않는 글자</span>

이 된다.

textContent

Node의 속성, <script>나 <style>태그 등에 상관없이 해당 노드가 가지고 있는 모든 텍스트값을 가져온다.
위와 같은 코드의 textContent를 가져올 경우 출력값은

이건 보이는 글자
보이지 않는 글자

가 된다.

innerText

Element의 속성. element 내에서 사용자에게 보여지는 text값을 가져오거나 설정할 수 있다.
위와 같은 코드의 innerText를 가져올 경우 출력값은

이건 보이는 글자

가 되며, display:none으로 설정된 span 태그 안에 있는 텍스트값은 읽어내지 못한다. 같은 맥락으로 줄바꿈, 컬러값 등의 스타일 적용 역시 그대로 반영된다.

value : input과 같은 form의 요소를 값으로 가져오고 싶을 때 사용.

• HTML : 웹 페이지 및 웹 응용 프로그램의 구조를 만들기 위한 표준 마크업 언어. 웹 브라우저가 이미지, 텍스트, 하이퍼 링크 등과 같은 페이지 요소를 표시하는 방법을 정의

• XML : 사람과 기계가 읽을 수 있는 형식으로 문서를 인코딩하기 위한 규칙 집합을 정의하는 마크업 언어. 플랫폼 독립적이며 다른 플랫폼간에 데이터를 교환하기 위해 사용.

• node : DOM을 이루는 요소. DOM은 Node의 계층 구조로 이루어져 있음.

• element : node의 유형 중 한 타입. HTML에서 태그로 적은 노드들을 지칭. 주석 등은 HTML 태그로 표현된 것이 아니므로 element가 아님.