단순 정보 전달만이 목적인 정적인 웹을 개발하려면 HTML, CSS로 충분하겠지만
동적인 웹을 개발하기 위해서는 자바스크립트와 DOM은 필수이다.
• DOM이란?
Document Object Model의 약자로 해석하면 문서 객체 모델
(Document = 웹 페이지 자체)
HTML 요소에 접근할 수 있도록 API를 제공하는 일종의 인터페이스
DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있음
계층 구조로 표현됨 (트리 자료 구조로 구축)
HTML 문서는 하나의 최상위 노드(root 노드)에서 시작해서 자식 노드들을 가짐
(노드? -> root 노드를 포함한 하나하나 요소를 뜻함)
• JavaScript와 DOM의 관계
DOM = JavaScript 라고 오해할 수 있지만 아니다.
DOM은 어떤 프로그래밍 언에의 의존하지 않는 독립적인 인터페이스이다.
DOM은 JavaScript로 조작할 수 있는 것이다.(Java로도 조작 가능함)
이러한 오해가 생긴 이유는 웹 브라우저에서 DOM을 조작하는 언어가 현재는 자바스크립트뿐이기 때문이다!
• 브라우저의 렌더링 과정
DOM을 이해하기 위해서는 브라우저의 렌더링 과정을 이해해야 한다.
- 렌더링
HTML, CSS, JavaScript로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것
주소창에 url 입력 -> 서버에 렌더링을 하는데 필요한 리소스들 요청
-> 서버로부터 받은 리소스들을 이용해서 렌더링하는데,
HTML, CSS, JavaScript 소스들은 텍스트에 불과하기 때문에 파싱을 통해 브라우저가 이해할 수 있는 자료 구조로 만들어야 함
- 파싱
브라우저가 코드를 이해하고 사용할 수 있는 트리 구조로 변환하는 것
파싱 결과는 보통 노드 트리이며 파싱 트리라고 부름
이때!
HTML이 파싱을 거치면 DOM Tree,
CSS가 파싱을 거치면 CSSOM Tree,
JavaScript가 파싱을 거치면 AST(Abstract Syntax Tree)가 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Document </title>
</head>
<body>
<h2 style="color:blue"> DOM 문서 객체 모델</h2>
</body>
</html>이런 형태의 HTML 문서를 받았다고 하면
브라우저의 렌더링 엔진은 브라우저가 이해할 수 있는 Tree 자료구조 형태인 DOM을 사진과 같이 만들어줌
DOM과 CSSOM은 합쳐져 렌더트리를 형성하고, 렌더트리를 통해 렌더링이 실행됨
나머지 과정은 생략 ㅎ.ㅎ
• JavaScript DOM 접근하는 방법(메서드)
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.
DOM의 인터페이스를 이용하여 접근할 수 있음
많은 메소드들이 존재하지만,
자바스크립트가 DOM에 접근하여 동적으로 노드를 생성하고, 수정 및 삭제하는 예시를 살펴보자!
- 노드 생성
const div = document.createElement('div') // undefined
div // <div></div>div라는 변수에 document.createElement()를 이용하여 div 노드를 만들어 할당한 상태
div라는 변수를 호출하면, div 태그가 뜸
이 div 태그의 특징은 화면에 적용되지 않는다는 것
적용시키려면 append() 또는 appendChild() 메소드 사용하여 화면에 붙여야 함
- 노드 붙이기
div 태그를 붙이기 위해, 부모 노드에 접근 해야 함
여기서 부모 노드는 다른 태그가 존재하지 않는 한 body 태그임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Document </title>
</head>
<body>
</body>
</html>body 태그 안에 아무것도 입력되지 않은 상태
여기에 div 태그를 넣기 위해서는 부모 노드를 body로 설정하고, append() 또는 appendChild() 사용해야 함
document.body.append(div);
document.body.appendChild(div);두 가지 메소드 모두 사용 가능
- 노드 변경하기
노드 내부에 변경이 일어나면 DOM은 업데이트를 진행하고, 다시 렌더링함
아래는 요소 노드 내부에 textContent 프로퍼티를 사용하여 text를 집어넣는 예시임
div.textContent = 'codestates!';위의 코드는 'codestates!' 라는 텍스트를 화면에 바로 반영해줌
최종적으로
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Document </title>
</head>
<body>
<script>
let div = document.createElement('div');
document.body.append(div);
div.textContent = 'codestates!';
</script>
</body>
</html>이런 모양이 됨
body 태그 내부에는 정적으로 입력된 태그 존재X
브라우저는 script 태그 내의 코드를 차례대로 읽어 해석하며 노드를 동적으로 생성하여 업데이트함
- 노드 삭제
div.remove();
document.body.removeChild(div);노드를 삭제하는 방법 - remove(), removeChild()
remove()는 자식 태그에 접근해서 제거
removeChild()는 부모 태그에 접근해야만 자식 태그를 제거할 수 있음
결론!
현재 웹 브라우저에서 DOM을 조작하는 언어가 자바스크립트 뿐이기 때문에
DOM = 자바스크립트라고 오해할 수 있지만,
DOM은 어떤 프로그래밍 언어에도 의존하지 않는 독립적인 인터페이스임!!
'JavaScript' 카테고리의 다른 글
| JavaScript this (0) | 2023.05.28 |
|---|---|
| JavaScript 동작원리 (0) | 2023.05.27 |
| JavaScript Hoisting(호이스팅) (0) | 2023.05.15 |
| JavaScript 비동기 처리 방법(Promise, async, await) (0) | 2023.05.03 |
| JavaScript 동기/비동기(동작 원리) (0) | 2023.05.03 |