티스토리 뷰
DOM(Document Object Model)
*JS는 HTML 문서를 조작하기 위해 만들어진 언어이다. 그리고 HTML 만으로는 정적인 콘텐츠만을 만들 수 있지만 JS를 통해 동적인 콘텐츠를 만들 수 있게 되었다.
-먼저 브라우저가 HTML, CSS, JS의 코드를 받았을 때 이를 파싱, 렌더링을 하여 HTML의 경우 DOM을 생성하고, CSS의 경우 CSSOM을 생성하게 된다. 그 후 HTML, CSS, 정적인 JS 코드를 바탕으로 사용자에게 보여주게 된다.
(브라우저는 HTML을 DOM으로 형성한뒤 → 렌더링을 통해 사용자에게 보여준다.)
-이 때 브라우저가 HTML을 파싱, 렌더링을 해서 JS를 통해 접근이 가능하도록 HTML 요소(태그)들 하나하나를 '객체화' 시키는데 이걸 DOM이라고 하는 것이다.
(Document Object Model = ‘문서 객체 모델’로 이름이 지어진 이유이다.)
-DOM이 HTML 요소(태그)들을 전부 tree화 시키고 객체화 시키는데, JS가 접근해서 이를 제어(작성, 수정, 삭제 등)을 할 수 있도록 해준다.
-HTML을 DOM으로 만들었을 때 JS가 DOM을 사용하고 싶을 때 document 라는 도구를 사용해서 DOM의 요소들을 JS로 가져와서 (작성, 수정, 삭제 등)을 할 수 있게 된다.
-DOM이 어떤 형태로 이루어져 있는지를 본다면 더욱 이해가 쉬울 것이다. 아래의 코드를 보자.
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<p>Hi</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>-이런 HTML 코드가 있을 때 브라우저가 아래 사진과 같이 HTML 코드를 바탕으로 DOM 트리를 만들게 된다.
HTML의 상속 구조에 따라 각 요소(태그)들을 객체화 시켜서 위의 그림처럼 DOM 트리를 만들게 된다.
코드상에서는 html 태그가 상속 구조에서 최상위에 위치하게 되는데 DOM을 형성하면서 document 라는 최상위 객체를 만들어낸다.
(트리를 구성하는 요소 하나하나를 ‘Node’라고 부른다. body 안에 ul이 있고 ul 안에 li가 있을 때 이 요소들 하나하나를 Node 라고 부르는 것이다.)
document는 HTML 요소들을 제어할 수 있는 최상위 객체이다. 그렇기에 하위에 있는 모든 요소에 접근을 할 수 있다.
(HTML의 모든 태그들은 결국 document의 하위 노드에 위치하게 될테니 결국 전부 다 접근 가능하게 된다.)
그니깐 DOM 요소가 있을 때 요소들 중에 특정 요소를 JS를 통해 제어하고 싶을 때 document 라는 것을 사용해서 접근할 수 있는 것이다. 아래 코드를 통해 document를 사용하는 방식에 대해서 알아보자.
window.document.childNodes[1];
//이렇게 작성하면 HTML의 html 태그를 가져오게 된다.
//통상적으로 앞에 있는 window는 생략하고 사용한다.
document.childNodes[1].childNodes[2];
//이렇게 html 태그 아래에 놓인 다른 태그를 또 가져올 수 있는데 구조상 body 태그를 가져올 것이다.
document.childNodes[1].childNodes[2].childNodes[1].textContent = 'hi'
//만약 body 객체에 1번 자식 태그가 h1 태그이면 h1 태그의 text를 hi로 넣어줄 수도 있다.
//이렇게 브라우저가 JS를 위해 HTML을 파싱해서 그 안의 모든 태그들을 DOM 트리로 객체화 시켜서 만들어 주면
//JS는 document를 통해서 객체화된 요소(태그)들에 접근을 해서 원하는 코드를 작성할 수 있게 된다.
//일반적으로는 이렇게 document.childNodes로 계속 접근하기는 번거롭기 때문에 아래의 함수를 많이 사용한다.
document.getElementById
//HTML 요소에 ID가 있을 때 해당 ID에 속하는 요소를 가져올 때 사용
document.querySelector
//HTML 요소를 가져오고 싶을 때 사용한다. ID 또는 class가 부여된 태그도 가져올 수 있고, 부여되지 않은 태그도 가져올 수 있다.
//getElementById, querySelector는 DOM을 사용하기 위해 브라우저에서 제공하는 WEB API이다.
*JS에서 동적으로 작성한 코드가 실행 되었을 때 DOM에 그 결과가 반영되어 웹페이지 화면이 다시 렌더링 된다. 예를 들어 버튼을 click 했을 때 특정 함수가 실행되는 이벤트를 작성했다면, 사용자가 버튼을 클릭한 순간 실행된 함수에 맞게 DOM에 그 결과가 반영되고, 렌더링 되어 사용자에게 보여지게 된다.
*한줄 요약
=> DOM은 HTML의 요소(태그)들에 대해서 JS를 통해 접근하여 원하는 태그를 가져와서 작성하고 수정하고 삭제 등을 할 수 있게 해준다. 우리가 웹사이트 만들 때 HTML로 뼈대를 만들고 JS를 통해 살을 붙여주는데 DOM이 있기에 HTML과 JS를 연결해줄 수 있는 것이다.
WEB API
//BOM의 종류에 대해 간략한 예시를 들어보자면
window.location
window.navigator
window.alert
//BOM은 다른 웹페이지로 이동하거나 / 화면 관련 정보를 얻거나 / 브라우저에 알림창을 띄우거나 / AJAX 요청을 보내는 등의 기능들이 있다.
'기술 노트' 카테고리의 다른 글
| defer과 async를 통해 HTML과 JS를 연결하기. (0) | 2023.03.19 |
|---|---|
| 모듈을 Import 할 때 { }(중괄호)를 쓰는 경우와 아닌 경우(Node.js) (0) | 2023.03.15 |
| IP란? (0) | 2023.03.09 |
| JavaScript (Call by Value, Call by Reference, Call by Sharing) (0) | 2023.03.08 |
| CDN이란? (1) | 2023.03.07 |