브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면, HTML, CSS로도 충분하겠지만 그 이상의 인터렉티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야한다.
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의 일부분이 아니다.
window 객체
JavaScript에서 window 객체는 브라우저 창을 나타내며, 모든 전역 변수와 메서드를 포함한다. 즉, window 객체는 전역 스코프(Global Scope)를 나타내며, 브라우저의 전역 객체(Global Object)이다.
window 객체는 브라우저 창의 속성과 메서드를 제공한다. 예를 들어, window 객체를 사용하여 현재 창의 너비와 높이, URL, 브라우저 타이틀 등을 가져올 수 있다. 또한, window 객체는 타이머 함수와 이벤트 핸들러 등을 포함하여 다양한 내장 메서드를 제공한다.
또한, window 객체는 웹 페이지에서 사용할 수 있는 모든 전역 변수와 함수를 포함한다. 따라서, 전역 변수나 함수를 선언할 때, window 객체를 명시적으로 사용하지 않아도 된다.
예를 들어, var a = 10; 과 같이 전역 변수를 선언하면, 이 변수는 window 객체의 프로퍼티로 자동으로 등록된다. 따라서, window.a 와 a 는 동일한 변수를 참조한다.
★DOM에 집중
document 노드가 최상위 노드가 되고, 밑으로 element 노드가 오며, 이어 text 노드와 attribute 노드가 오는 계층적인 구조임을 알 수 있다. 이러한 노드 타입에는 총 12개가 있는데 가장 중요한 것은 위에서도 명시되어 있듯이 총 4가지의 노드가 있다.
위 구조는 트리 자료구조로 노드들의 계층으로 이루어져 있다. 계층 구조로 이루어져 있기 때문에 부모-자식 관계, 형제 관계를 표현하는 비선형 자료구조를 나타낸다. 여기서 비선형 자료 구조란 데이터 요소들 간에 계층적 또는 그래프 관계를 가지는 자료구조를 말한다. (트리 자료구조 데이터 간의 관계가 1:1 관계가 아닌 경우에 사용)
DOM의 정적 생성
HTML 파일에 적혀 있는 코드를 위에서부터 아래로 읽어내려가며 생성하는 과정
DOM의 동적 생성
자바스크립트를 이용해 있던 노드에 없는 노드를 만들어 이어 붙이는 것
document node (문서 노드)
DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킨다.
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 요소를 생성해 보자.(JavaScript)
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";
};
// 이벤트 리스너를 등록해보자.
changeBtn.addEventListener("click", function() {
// 직접 이벤트 핸들러 처리를 만들어 보자. (js언어)
});
</script>
</body>
</html>
DOM에 접근할 수 있는 5가지 방법
| 메서드 | 설명 |
| getElementById(id) | ID를 기반으로 엘리먼트를 선택합니다. |
| getElementsByClassName(className) | 클래스 이름을 기반으로 모든 엘리먼트를 선택합니다. |
| getElementsByTagName(tagName) | 태그 이름을 기반으로 모든 엘리먼트를 선택합니다. |
| querySelector(selector) | CSS 선택자를 기반으로 첫 번째 엘리먼트를 선택합니다. |
| querySelectorAll(selector) | CSS 선택자를 기반으로 일치하는 모든 엘리먼트를 선택합니다. |
시나리오 코드 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#myDiv -->
<div id="myDiv">아이디로 접근</div>
<!-- div.myClass*2 -->
<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 선택자와 일치하는 문서 내의 첫 번째 Element를 반환한다.
// 만약 일치하는 Element가 없다면, null 값을 반환한다.
let byQuerySelector = document.querySelector(".myClass");
console.log('-------------------------------');
console.log(byQuerySelector);
// 5. querySelectorAll 사용해보기
// CSS 선택자와 일치하는 모든 Element를 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.07.23 |
|---|---|
| Browser Object Model (0) | 2024.07.23 |
| 함수의 이해와 활용 (0) | 2024.07.19 |
| 객체와배열 (0) | 2024.07.19 |
| 데이터 타입 및 연산 (0) | 2024.07.18 |