Element

Purple·2021년 9월 13일

TIL

목록 보기

18/73

innerText는 실제로 화면에 보여지는 '사람이 읽을 수 있는' 요소만 처리한다. 즉, 스타일링을 고려하며, '숨겨진' 요소의 텍스트는 반환하지 않는다. innerText는 내용을 바꿀수 없다. 만약 내용을 바꾸고 싶어서 tag+내용을 쓰면 tag를 포함한 모든 내용이 text로 나온다.
innerHTML은 element내에 포함된 HTML태그까지 포함해서 보여진다. innerHTML 값을 설정하면 요소의 기존 내용(content)을 새 내용으로 쉽게 변경할 수 있다. tag+내용을 쓰면 링크 등 바꾸고자 하는 내용이 새로 변경된다. 그러나 일반 텍스트를 삽입할 때는 잠재적인 보안 위험이 발생할 수도 있어서 textContent를 사용하는 것이 좋다.
textContent는 script와 style요소, 공백을 포함한 모든 요소의 컨텐츠를 가져온다. 값 할당이 가능하므로, element 내용을 바꾸고 싶을 때 사용할 수 있다. innerHTML과 비교했을 때, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다. 그리고 XSS(cross-site scripting) 공격의 위험이 없다.

Node는 트리를 이루는 element들이다. 즉, DOM 계층에서 모든 유형의 객체에 대한 일반 이름이다. 일부 node객체는 텍스트 node이며 element객체는 아니다. DOM은 각 node가 부모, 자식 node 목록, 형제 등 node 계층으로 구성된다.
Element는 하나의 특정 node이다. 쉽게 말해 node가 element의 상위개념이다. HTML에서 tag로 적은 node들을 지칭한다. 예를들어, <html>, <div>, <title>과 같은 tag로 나타낸 것들은 전부 element인 것이다. 그리고, HTML tag로 표현되지 않은 주석이나 text node는 element가 아니다.
만약,아래와 같은 HTML이 있다면,

<body>
	<div id='practice' class='highlight red'>
  		엘리먼트가 있다.
  		<span> 자식이 있다. </span>
  		<span> 자식이 또 있다. </span>
  	</div>
</body>

div의 자식 element는 span,span을 의미하고
div의 자식 node는 text,span,text,span,text를 의미한다.

Document Object Model로, HTML 문서의 구조와 관계를 객체(object)로 표현한 모델이다. DOM은 HTML 문서,JavaScript의 객체처럼 트리구조이다. 그리고 document라는 전역변수로 접근이 가능하다. DOM은 JavaScript는 아니다!
즉, HTML을 조작할 수 있도록 마련된 객체 형태의 구조나 모델이라고 할 수 있다.
DOM조작 시 메소드를 이용한 element생성은, 생성과 동시에 이벤트 핸들러 등록이 가능하다는 장점이 있다.