오늘의 학습내용 : DOM
◆ DOM
DOM(The Document Object Model, 문서 객체 모델)은 HTML, XML 문서의 프로그래밍 인터페이스이다. 문서를 구조화해 표현하고 프로그래밍 언어가 DOM의 구조에 접근할 수 있는 방법을 제공하는데, 우리는 이를 통해 문서의 구조와 스타일, 내용 등을 변경할 수 있다. 다시 말해 웹페이지의 객체 지향 표현이며, 자바스크립트와 같은 언어로 DOM을 수정할 수 있다. 1주차부터 4주차까지 자바스크립트의 다양한 문법들을 적용해 보면서 결과적으로 DOM을 수정하는 방법을 익히는 것이다. DOM을 사용하는 이유는 크게 ① 자바스크립트를 통해 HTML에서 데이터를 가져오기 위해서 ② 웹페이지 데이터를 동적으로 변경하기 위해서 정도로 생각해볼 수 있다.
TMDB 영화 검색 사이트 제작 과제를 수행할 때에도, HTML 문서를 작성하고 JS에서 다양한 이벤트를 추가할 때에도 주로 사용했던 DOM 인터페이스들이 있다. DOM의 Node 객체의 속성은 값을 가지고 있고, 메소드는 동작을 수행한다. 속성은 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는 데 쓰이고, 메소드는 객체가 수행하는 작업을 나타낸다.
- document.getElementById
- document.querySelector
자꾸 이것만 쓰게 되는데 - document.createElement
- parentNode.appendChild
- element.innerHTML / Style / getAttribute / addEventListener
◆ DOM 구조 조회해보기
<html>
<body>
<div id="nav">
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="profile-photo">photo</div>
</div>
</div>
<div id="news-contents">
<div class="news-content-wrapper">
<div class="news-picture">news-picture</div>
<div class="news-title">news-title</div>
<div class="news-description">news-description</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
위의 코드에서 body요소의 자식 요소를 알아보려면 어떻게 해야 할까? DOM구조를 조회할 때에는 console.dir이 유용하며 console.log와 다르게 DOM을 객체의 형태로 출력한다. 콘솔에 console.dir(document.body)를 입력하여 속성들을 객체의 형태로 모두 확인할 수 있으며, 이중 children 키가 body요소의 자식요소이다. console.dir(document.body.children)을 입력하면 조회할 수 있다. (출처: https://velog.io/@ko9612/JavaScript-DOM)
질문 & 더 알아보기
: 브라우저의 렌더링 과정? (참고: https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/)
- Parsing 브라우저는 우리가 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, IE 등을 지칭한다. 브라우저를 렌더링할 때는 가장 먼저 받아온 HTML 파일을 해석하는데, Parsing 단계에서 해석한 내용을 바탕으로 DOM 트리를 구성한다.
- Style 파싱을 통해 생성된 DOM 트리와 CSSOM 트리를 매칭시켜 Render 트리를 구성하는데, 이것이 실제로 화면에 그려지는 것이다.
- Layout 구성된 Render 트리는 정확한 위치와 크기를 계산하여 어떻게 화면에 배치될지 정한다.
- Paint 계산된 노드의 위치와 크기 값에 따라 실제 픽셀로 Render Tree의 각 노드를 변환해 준다.
- Composite 픽셀로 변환된 결과는 여러 개의 레이어로 관리되는데, 이를 합성해서 실제 화면에 표시한다. 이를 통해 사용자가 화면에서 웹페이지를 볼 수 있다.
'스파르타코딩클럽 > 내일배움캠프' 카테고리의 다른 글
| [React 입문] 1주차_React 소개 (1) | 2024.10.28 |
|---|---|
| [JS문법 종합반] 5주차_Class와 Instance (0) | 2024.10.25 |
| [JS문법 종합반] 4주차_this 바인딩 (1) | 2024.10.23 |
| [JS문법 종합반] 4주차_콜백 함수와 제어권 (1) | 2024.10.22 |
| [JS문법 종합반] DOM 조작 (2) | 2024.10.16 |