[TIL] DOM (23.12.26 - 9일차)

학습내용

---

전역객체

DOM

DOM(Document Object Model)이란??
=> ★ JS를 통해 쿼리하거나 조작하기 위해 파싱된 HTML 및 CSS 콘텐츠의 표현

브라우저는 웹사이트를 불러오면 HTML 코드를 분석한다. (파싱)
모든 HTML element를, 자바스크립트 객체 묶음으로 해석해준다.

DOM이 필요한 이유

⇒ DOM을 통해 js코드는 화면에 표시되는 내용을 쿼리 및 조작하여 ★대화형 웹사이트를 구축할 수 있다.

DOM을 업데이트하지만 HTML 소스코드 문서의 내용을 변경하진 않는다.
⇒ DOM에 접근하여 HTML element 의 속성을 변경하거나 기타 기능을 구현할 수 있음. (document 속성을 사용해서 DOM에 접근할 수 있다.)

cf. defer 속성
전체문서가 분석되기까지 스크립트 실행이 지연되어야 한다고 브라우저에게 알리는 역할이다.

<script src="demo.js" defer></script>

DOM 트리

브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다.
=> 각 객체(요소, 어트리뷰트, 텍스트)들이 Tree형태로 구조화 되어있어 DOM Tree라 칭한다.

4종류의 노드로 구성된다.
1. 문서 노드 (엔트리 포인트)
2. 요소 노드
3. 어트리뷰트 노드
4. 텍스트 노드 (최종점)

DOM element에 접근하기 (DOM Query)

1. 요소를 파헤치는 방법 (drill)

   e.g. document.body.children[0].firstChild ⇒ 대신 정확한 구조를 파악해야함.

2. 유틸리티 함수로 특정요소를 쿼리

   (1) document.getElementById()
   id에 일치하는 요소노드 중 첫번째 요소를 반환.
   (2) document.querySelector();
   => CSS selector 사용하여 해당 엘리먼트 노드 중 첫번째 요소를 반환
   (3) document.querySelecorAll()
   => 마찬가지로 셀렉터 사용하여 해당 요소 노드를 '모두' 선택한다.

HTML 콘텐츠 조작하기

1. textContent
   => 요소의 텍스트 콘텐츠를 취득, 변경이 가능하다.

const ul = document.querySelector('ul');
console.log(ul.textContent);

2. innerText
   => 비표준이고, CSS에 순종적이라한다.(visibility: hidden; 지정되어있으면 텍스트가 반환X), 그리고 CSS 고려해야해서 textContent보다 느리다.

3. innerHTML
   => 모든 콘텐츠를 하나의 문자열(마크업 포함)로 취득할 수 있고, 새로운 요소를 DOM에 삽입할 수도 있다.

DOM 조작 - 추가

1. createElement()
   태그이름을 인자로 전달하여 element를 생성

const myLi = document.createElement(li);

2. createTextNode()
   텍스트를 전달하여 텍스트 노드를 생성

const newText = document.createTextNode('bae');

3. appendChild()
   인자로 전달한 노드를 마지막 자식요소로 DOM 트리에 추가

myLi.appendChild(newText);

cf. insertAdjacentHTML()
인자로 전달한 텍스트를 HTML로 파싱하고 생성된 노드를 DOM 트리의 지정된 위치에 삽입

• beforebegin
• afterbegin
• beforeend
• afterend

insertAdjacentHTML이나 innerHTML은 크로스 스크립팅 공격에 취약하다고 한다.

=> 따라서 텍스트를 추가하거나 변경할때는 textContent()를 사용하고,
새로운 element를 추가하거나 삭제할때는 DOM 조작 방식을 사용하도록 하자.