브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야 합니다.
1. DOM 이란 무엇일까? (문서 객체 모델)
문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2>HTML 웹 페이지 문서 입니다</h2>
</body>
</html>
위의 HTML 코드를 기반으로 웹 페이지가 로드되면, 브라우저는 다음과 같이 여러 객체들을 생성이 됩니다
window
└── document
├── head
│ ├── meta (charset="UTF-8")
│ ├── meta (name="viewport", content="width=device-width, initial-scale=1.0")
│ └── title
│ └── #text ("Document")
└── body
└── h2
└── #text ("HTML 웹 페이지 문서 입니다")주의 : window 객체는 브라우저의 창이나 프레임을 추상화한 것으로, DOM의 일부분이 아닙니다.
⭐ 이번 과정은 DOM에 집중 합니다
document 노드가 최상위 노드가 되고, 밑으로 element 노드가 오며, 이어 text 노드와 attribute 노드가 오는 계층적인 구조임을 알 수 있습니다. 이러한 노드 타입에는 총 12개가 있는데 가장 중요한 것은 위에서도 명시가 되어 있듯 총 4가지의 노드가 있습니다
위 구조는 트리 자료구조로 노드들의 계층 이루어져 있습니다. 계층 구조로 이루어져 있기 때문에 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조를 나타냅니다. 여기서 비선형 자료 구조란 데이터 요소들 간에 계층적 또는 그래프 관계를 가지는 자료구조를 말합니다. (트리 자료구조 데이터 간의 관계가 1:1 관계가 아닌 경우에 사용)
document node (문서 노드)
DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킵니다.
element node (요소 노드)
모든 HTML 요소 (body, h2, div 등)는 이 요소 노드입니다. 속성 노드를 가질 수 있는 유일한 노드로서, 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있게 됩니다.
attribute node (속성 노드)
모든 HTML 요소의 속성은 이 속성 노드입니다. 요소 노드에 대한 정보를 가지고 있습니다. 그렇기 때문에 부모 노드가 아닌 해당 노드와 연결(바인딩)이 되어 있습니다.
text node (텍스트 노드)
HTML 문서의 모든 텍스트는 이 텍스트 노드라 해도 과언이 아닙니다. 텍스트 노드는 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 잎사귀를 닮았다 해 리프 노드라고 불리기도 합니다.
이 4가지 노드들이 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있게 됩니다. 특히 데이터 검색하기가 빠른 트리 구조로 이뤄져 있기 때문에 이 접근하고 조작하여 업데이트를 하는 속도는 빠른 편입니다.
시나리오 코드 1 - DOM 조작해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index9.html 파일 입니다.</h2>
<!-- DOM 정적 생성 -->
<script>
// div 요소를 생성해 보자. (JS)
let div = document.createElement("div");
console.log(div);
document.body.append(div);
div.textContent = "div 노드를 js를 통해 만들어 보자";
div.style.backgroundColor = "yellow";
</script>
</body>
</html>
시나리오 코드 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index10.html 파일 입니다.</h2>
<h1 id="title">Hello, World!</h1>
<button id="changeButton"> Change Text </button>
<script>
// 자바스크립틀 사용하여 DOM을 조작해보자.
// button 요소 id값인 changeButton 노드에 접근해 보기
let changeBtn = document.getElementById("changeButton");
console.log(typeof changeBtn);
console.log(changeBtn);
// 함수 표현식 - 함수를 변수안에 저장하는 법
let clickEvent = function() {
let titleElement = document.getElementById("title");
titleElement.textContent = "안녕 스크립트야~";
titleElement.style.color = "blue";
};
// clickEvent 실행 확인 후 직접 기능을 추가해 보자.
// 이번트 리스너를 등록해 보자.
changeBtn.addEventListener("click", function() {
// 직접 이벤트 핸들러 처리를 만들어 보자. (js언어)
});
</script>
</body>
</html>3. DOM에 접근할 수 있는 5가지 방법
시나리오 코드 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index11.html 파일 입니다.</h2>
<div id="myDiv">아이디로 접근</div>
<div class="myClass">정적 렌더링 1</div>
<div class="myClass">정적 렌더링 2</div>
<p>태그 이름으로 접근 1</p>
<p>태그 이름으로 접근 2</p>
<script>
// 1. 요소에 id 값을 접근하기
let byMyDiv = document.getElementById("myDiv");
console.log(byMyDiv.textContent);
// 2. 요소 class 속성을 사용해서 접근하기
let byClassNameElements = document.getElementsByClassName("myClass");
console.log(typeof byClassNameElements);
byClassNameElements[0].textContent = "동적 렌더링 1";
byClassNameElements[1].textContent = "동적 렌더링 2";
// 3. 요소 태그 이름으로 접근해 보기
let byTagName = document.getElementsByTagName("p");
console.log(byTagName[1].textContent);
// 4. querySelector 사용해 보기
// 제공된 CSS 선택자와 일치하는 문서 내의 첫번째 엘리먼트를 반환 합니다. !!
// 만약 일치하는 엘리먼트가 없다면 null값을 반환 합니다.
let byQuerySelector = document.querySelector(".myClass");
console.log('-------------------')
console.log(byQuerySelector);
// 5. querySelectorAll 사용해 보기
// CSS 선택자와 일치하는 모든 엘리먼트를 NodeList로 반환 합니다.
let byQuerySelectorAll = document.querySelectorAll(".myClass");
console.log('===================');
console.log(typeof byQuerySelectorAll);
console.log(byQuerySelectorAll);
byQuerySelectorAll[1].textContent = "안녕 querySelectorAll "
byQuerySelectorAll[1].style.color = "blue";
</script>
</body>
</html>
요약
DOM은 JavaScript 언어를 사용해서 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 문서 객체 모델이다.
'JS' 카테고리의 다른 글
| 웹 페이지 렌더링 과정 (0) | 2024.09.25 |
|---|---|
| Browser Object Model (0) | 2024.09.25 |
| 함수에 이해와 활용 (0) | 2024.09.25 |
| 객체와 배열 (3) | 2024.09.25 |
| 데이터 타입 및 연산 (0) | 2024.09.25 |
