[10분 테코톡] 🕶 곤이의 DOM&BOM

 [ 웹 구성 요소 ]

 

html	- 웹 페이지의 제목 이미지 표 등 구조와 의미를 부여하는 정적 언어 전체적인 구조 담당
css	- html 의 실제 표시되는  방법 색상 레이아웃 폰드 등을 지정하여 콘텐츠를 꾸미는 정적언어이며 시각적인 표면을 담당
js	- html 의 정적이고 단조로운 한계를 극복하기위해 만들어진 언어 - 웹 문서를 더웃 동적으로 처리할 수 있도록 도와줌

 

 

---

Q. 자바스크립트는 어떻게 확장자가 다른 html과 css 파일의 내용을 읽고 수정할 수 있을까?

A. dom ( Document Obiect Model )을 사용!

 

dom

-문서에 대한 모든 내용을 담고 있는 객체 - 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것 - HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 구조로 구성한 것 - HTML, XML 문서의 프로그래밍 Iterpace - 문서의 구조화된 표현 ( Structured representation ) 을 제공하며, 프로그래밍 언어가 dom 구조에 접근할 수 있는 방법을 제송하여 문서 구조, 스타일, 내용등을 변경할 수 있게 도움

 

 

 

문서 노드 ( Document node )

 

- DOM 트리의 최상위에 존재하는 루트 노드로서 Document 객체를 가리킨다. - HTML  문서당 Document 객체는 유일하다. - DOM 트리의 루트 노드이므로, DOM 트리의 노드들에 접근하기 위한 진입점 역할을 한다. - 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.

요소 노드 ( Element node )

 

- HTML 요소를 가리키는 객체다. - HTML 요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다. - 즉, 요소 노드는 문서의 구조를 표현한다.

어트리뷰트 노드 ( Attribute node )

 

- HTML 요소와 어트리뷰트를 가리키는 객체다. - 어트리뷰트 노드는 지정된 HTML 요소의 요소 노드와 형제 괸계를 갖는다 ( 부모 노드와는 연결 X ) - 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 형제 노드인 요소 노드에 접근해야 한다.

텍스트 노드 ( Text node )

- HTML 요소의 텍스트를 가리키는 객체다. - 문서의 정보를 표현한다. - 텍스트 노드는 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드이다. - 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.

 

 

 모든 노드 객체는 오브젝트, 이벤트 타겟, 노드 인터페이스 상속을 받는다.

 

 

---

[ Input 요소 노드 객체의 특성 ]

 

객체의 특성	프로토타입을 제공하는 객체
객체	Object
이벤트를 발생시키는 객체	Event Target
트리 자료 구조의 노드 객체	Node
브라우저가 렌더링할 수 잇는 웹 문서의 요소 ( HTML, XML, SVG )를 표현하는 객체	Element
웹 문서의 요소 중에서 HTML 요소를 표현하는 객체	HTML Element
HTML 요소 중에서 Input 요소를 표현하는 객체	HTML Input Element

 

---

DOM은 브라우저에서 제공하는 API중 하나이며, 

DOM API를 이용해 자바스크립트로 웹 페이지를 동적으로 조작할 수 있다.

 

대표적인 DOM API

- document.querySelector() - Node.appendChild() - Node.removeChild()

 

 

HTML Collection	NodeList
DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체
유사 배열 객체이면서 이터러블
배열로 변환 후 사용이 권장됨
getElementByTagName getElementByClassName	querySelectorAll
Live 객체	대부분 Non-live 객체
forEach 사용 불가	forEach 사용 가능

 

---

[ 노드 삽입 ]

 

 

 

Inner HTML

장점	단점
쉽고 간단하게 새로운 요소를 추가할 수 있다.	- 기존 요소 노드의 모든 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경한다. - 요소와 요소 사이에 새로운 요소를 삽입하기 어렵다. - 크로스 사이트 스크립팅 공격에 취약하다.

Insert Adiacent HTML

 

장점	단점
- 기존 요소를 제거하지 않으면서  위치를 지정해 추가 가능하다. - 기존 자식을 모두 제거하고,  자식을 새로 생성하는 Inner HTML보다 빠르다.	- 크로스 사이트 스크립팅 공격에 취약하다.

appendChild

 

장점	단점
- 기존 요소를 제거하지 않으면서  위치를 지정해 추가 가능하다. -  Inner HTML과 Insert Adiacent HTML과 비교하여 보안 이슈가 없다.	- 자식 노드를 생성해야한다

---

css  태그를 상단에 위치 시키는 이유

- 사용자가 흰 화면을 응시하는 시간을 줄이기 위해 ( css 렌더링 차단 리소스로 취급 됨  ) - Link를 이용하여 스타일 시트를 다운 받는 경우 최대한 빠르게 다운 받기 위해 브라우저는 모든 외부 스타일 시트가 다운로드 후 CSSOM 트리가 구성될 때까지 웹 페이지 렌더링을 차단

 

 

 

Script 태그를 하단에 위치시키는 이유

- HTML 파서는 Script 태그를 만나면 파싱을 멈추고 스크립트를 읽기 때문에 웹 페이지의 로딩이 그만큼 늦어질 수 있다. - 생성되지 않은 DOM 노드를 읽거나 조작하는 것이 불가능하기 때문에 예상치 못한 오류가 발생할 수 있다.

 

---

< 영상 >

 

https://youtu.be/q1fQnGG1bgU