DOM(Document Object Model : 문서 객체 모델)
- 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리 덩어리
- 웹 브라우저가 HTML 페이지에 접근하는 방법을 정의한 API
- DOM에서 제공하는 일반적인 기능은 여러 개의 DOM 객체로 나눠 구성되어 있다.
DOM은 정의부분(명세서)와 구현부분으로 나누어져 있다.
정의부분인 명세서에는 웹 페이지 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일뿐,
실제 동작하는 구현 소스코드는 전혀 존재하지 않다.
그리고 이 명세서를 만드는 곳이 바로 웹 관련 표준을 정의하는 협회인 W3C이다.
구현부분은 바로 브라우저 내부에 존재한다.
브라우저 제작사(IE, Chrome, Firefox, Safari)는
DOM에 명시되어 있는 인터페이스에 맞춰 자신들만의 특화된 고유 기술을 이용해 독자적으로 기능을 구현한다.
눈에 보이진 않지만 사실 브라우저에 출력된 웹 페이지는 온통 DOM 객체로 구성되어 있다.
DOM 객체는 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 엘리먼트를 나타낸다.
자바스크립트 코드에서는 동적인 HTML을 만들어내기 위해 DOM 객체에 접근하여 조작할 수 있다.
문서 객체 : 자바스크립트에서 이용할 수 있는 객체
객체에는 노드, 스타일, 속성, 이벤트, 위치 및 크기들을 다룰 수 있는 다양한 기능이 포함되어 있다.
* 노드 : - HTML 웹 페이지 구성 요소의 가장 작은 단위를 말함
- 문서를 이루는 모든 요소를 통합해서 부르는 용어.
- 즉, HTML 페이지의 각 요소(태그)들. 주석도 노드에 속함
- 브라우저는 이런 노드로 가득찬 웹 페이지를 읽어들여 해석한 후, 각 노드에 접근해 제어할 수 있는 DOM 객체를 생성함.
* 요소(element) : <시작태그>텍스트</끝태그>
* 텍스트 노드 : 요소 안에 있는 글자. innerHTML과 관계가 있음
DOM 객체가 생성되는 순서를 자세히 살펴 보면,
웹브라우저는 가정 먼저 최상위에 해당하는 HTMLDocument 클래스의 객체를 생성한다.
이후에 생성되는 모든 DOM 객체는 HTMLDocument 객체의 자식 객체로 만들어 진다.
브라우저가 웹 페이지를 처리하는 과정
1. 웹 페이지 읽기
먼저 브라우저는 HTML 페이지를 읽음.
2. 파싱 단계
- 이어서 파싱(parsing) 단계를 거쳐서 웹 페이지 내용을 해석하게 됨.
- 작성한 마크업 태그와 1:1 매칭이 되는 DOM 클래스 객체를 생성하게 됨.
- 생성된 객체는 저마다 고유한 기능을 하게 됨.
3. 출력
- 마지막으로 웹 브라우저는 생성한 DOM 객체를 가지고 우리가 보고 있는 웹 페이지 화면을 만들게 됨
보통 DOM 방식은 트리 구조
브라우저가 웹 페이지를 처리하는 과정을 살펴보면, 먼저 브라우저는 문서 정보에 쉽게 접근하고 조작하고자
HTML 웹 페이지를 읽은 후 파싱 단계를 거친 후,
DOM 객체로 변환(트리구조) 후 화면에 출력한다.
예를 들어 웹 페이지에 <img src="test.jpg">태그 노드가 있다면
브라우저에 의해 HTMLImageElement라는 DOM 객체가 생성이 된다.
이 객체는 다른 DOM 객체와는 다르게 이미지를 읽어들이는 특별한 기능이 있어서
실행 시에 "test.jpg" 라는 외부 이미지 파일을 읽어 들이게 된다.
즉, 문서 상의 노드는 "브라우저이군. 이 노드를 보고 알맞은 DOM 객체를 생성해 주세요" 라는 의미일 뿐,
모든 작업은 브라우저에서 만들어낸 DOM 객체로 처리를 하게 된다.
좀 더 자세하게 설명을 한다면 웹 브라우저가 HTML 페이지를 읽은 후
파싱 단계에서 <div> 태그를 만나게 되면 HTMLDivElement 라는 클래스의 인스턴스(객체)를 생성하게 되고,
<img> 태그를 만나면 HTMLImageElement 라는 클래스의 인스턴스를 생성하게 된다.
정리를 한다면 HTML 페이지에 작성하는 마크업은 웹브라우저에게 알려주는 일종의 DOM 클래스의 메타 정보이며,
브라우저는 이 마크업 태그와 1:1로 매칭되는 DOM 클래스의 객체를 생성해서 보관을 하고 있게 된다.
DOM을 공부하면서 알아야 할 내용
1. 노드 다루기
- 문서에서 특정 태그 이름을 지닌 노드 찾기
- 특정 노드의 자식 노드에서 특정 태그 이름을 지닌 노드 찾기
- 문서에서 특정 클래스가 적용된 노드 찾기
- 문서에서 특정 id를 가진 노드 찾기
- 자식 노드 찾기
- 부모 노드 찾기
- 형제 노드 찾기
- document.createElement() 메서드를 사용해서 노드 생성 및 추가하기
- HTMLElement.innerHTML 프로퍼티를 사용해서 노드 생성 및 추가하기
- Node.cloneNode() 메서드를 사용해서 노드 생성 및 추가하기
- 노드 삭제하기
- 노드 이동시키기
- 텍스트 노드 생성 및 추가하기
- 텍스트 노드 내용 변경하기
2. 스타일 다루기
- 스타일 속성값 구하기
- 스타일 속성값 설정하기
- 스타일 속성 제거하기
3. 속성 다루기
- 속성값 구하기
- 속성값 설정하기
- 속성 제거하기
4. 이벤트 다루기
- 이벤트 리스너 추가하기
- 이벤트 리스너 삭제하기
- 이벤트 발생시키기
- 사용자 정의 이벤트 만들기
기본 요소(태그) 생성 방법 예제
// 요소(태그)를 생성하는 방법
형식) createElement(tagName);
형식) createTextNode(text) : 텍스트 노드를 생성하는 메서드appendChild() 메서드 : 한번에 오직 하나의 노드 객체만 추가할 수 있는 DOM 메서드
<body>
<script type="text/javascript">
// 현재 문서의 body 부분을 읽고 난 후에 자바스크립트를 실행하라는 의미.
window.onload = function() {
// 요소(태그)를 생성
let h1_element = document.createElement("h1");
let textNode = document.createTextNode("Hello... DOM");
// 텍스트 노드를 h1태그에 자식노드로 추가
// appendChild() 메서드 : 한번에 오직 하나의 노드 객체만 추가할 수 있는 DOM 메서드
h1_element.appendChild(textNode);
document.body.appendChild(h1_element);
}
</script>
</body>
이미지 태그 생성 방법1 예제_createElement 응용
<body>
<script type="text/javascript">
window.onload = function() {
// 이미지 태그 생성
let img_element = document.createElement("img");
// 이미지 태그에 이미지를 넣기 위해서는 src 속성이 지정되어야 함.
img_element.src = "../images/mango.jpg";
img_element.width = "200";
img_element.height = "200";
// 해당 이미지 노드를 문서의 본문(body)에 추가
document.body.appendChild(img_element);
}
</script>
</body>
이미지 태그 생성 방법2 예제_setAttribute(name, value) 사용
<body>
<script type="text/javascript">
onload = function() {
let img_element = document.createElement("img");
// 속성을 지정하는 방법
// setAttribute(name, value) : 속성을 지정하는 메서드.
img_element.setAttribute("src", "../images/apple.jpg");
img_element.setAttribute("width", "200");
img_element.setAttribute("height", "200");
// 해당 이미지 노드를 문서의 본문(body)에 추가
document.body.appendChild(img_element);
}
</script>
</body>
문서의 요소를 가져오는 방법 - 3가지
1. getElementById(id) 를 이용하는 방법
<body>
<script type="text/javascript">
onload = function() {
// 문서의 요소를 찾는 방법 - 3가지
// 1. getEelmentById(id이름) : 문서에서 특정 id를 가진 노드 찾기
let header1 = document.getElementById("header_1");
let header2 = document.getElementById("header_2");
// 문서 객체의 속성을 변경해 보자.
header1.innerHTML = "header_1 id를 가진 요소";
header2.innerHTML = "header_2 id를 가진 요소";
}
</script>
<h1 id="header_1">Header1</h1>
<h1 id="header_2">Header2</h1>
</body>
2. getElementsByTagName(tagName)을 이용하는 방법
<body>
<script type="text/javascript">
onload = function() {
// 문서의 요소를 찾는 방법 - 3가지
// 2. getElementsByTagName(tagName)을 이용하는 방법
// ==> tagName과 일치하는 요소를 배열로 가져오는 메서드.
let headers = document.getElementsByTagName("h1");
// headers[0].innerHTML = "getElementsByTagName()";
// headers[1].innerHTML = "getElementsByTagName()";
for(let i=0; i<headers.length; i++) {
headers[i].innerHTML = "getElementsByTagName()";
}
}
</script>
<h1>Header1</h1>
<p>header1 내용</p>
<hr>
<h1>Header2</h1>
<p>header2 내용</p>
</body>
3. querySelector(선택자) 를 이용하는 방법
<body>
<script type="text/javascript">
onload = function() {
// querySelector(선택자)
// ==> 가장 처음 선택되는 문서의 선택자 요소를 가져오는 메서드.
// querySelectorAll(선택자)
// ==> 문서의 선택자 요소 전체를 배열로 가져오는 메서드.
let header1 = document.querySelector("#header_1");
let header2 = document.querySelector("#header_2");
header1.innerHTML = "header_1 id를 가진 요소";
header2.innerHTML = "header_2 id를 가진 요소";
}
</script>
<h1 id="header_1">Header1</h1>
<h1 id="header_2">Header2</h1>
</body>
댓글