[Web] 간단한 DOM 정리

🎈 DOM Document Object Model)

• HTML 문서의 구조적 표현 방법
• HTML 문서의 요소들을 Tree 구조로 표현한다.
• 웹브라우저가 HTML 문서를 읽고, DOM Tree를 생성한다.

🎈 DOM을 통해 할 수있는 일

1. 원하는 HTML 요소의 값 읽기가 가능
2. 원하는 HTML 요소의 값 수정이 가능

• 사용자의 입력에 따라 화면 변경 가능
• 특정 조건에 따라 문서 변경 가능
• HTML의 사용자 입력을 JavaScript로 읽을 수 있음

🎈 (추가) Script의 위치에 따른 영향

1. Head에 삽입되는 경우

• Script를 모두 로딩 후 브라우저 렌더링을 시작
• 페이지가 뜨는 속도가 느려짐
• 문서를 초기화하거나, 설정하는 가벼운 스크립트를 넣음

2. Body에 삽입되는 경우

• DOM Tree가 완성된 상태에서 Script가 실행 (스크립트 로드 후 실행)
• 브라우저가 화면에 노출된 상태에서 Script가 실행

※ defer

• HTMl 파싱과 동시에 스크립트를 로드, HTML 파싱이 끝난 후 바로 로드 된 스크립트 실행
• head 태그 안에 script 코드를 넣고 defer 사용

🎈 QuerySelector

QuerySelector는 DOM으로 특정 노드를 선택하는 방법 중 최고이다!

• QuerySelector : CSS Selector을 이용하여 특정 DOM 영역 1개 선택
• QuerySelectorAll : CSS Selector을 이용하여 해당하는 모든 DOM 영역 Array로 가져오기

🎈 element 다루기

• document.createElement('Tag이름') : Element Node를 생성
• document.createTextNode('들어갈 Text') : Text Node를 생성
• 객체.append(Target 노드) : 객체 밑으로 자식 노드를 추가 (가장 마지막에 추가)
• 객체.setAttribute(속성이름, 속성값) : 간단하게 속성을 부여