새소식
반응형
JavaScript/javascript
DOM(Document Object Model)
- -
반응형
Document(문서) Object(객체) Model(모델) - 문서객체모델
문서객체란 <html>, <body> 와 같은 html 문서의 태그들을 JavaScript가 이해하고 이용할 수 있는
객체(Object)로 만들면 그것을 문서 객체라고 합니다.
Model 은 문서 객체를 '인식하는 방식'이라고 해석할수 있다.
쉽게 말해서, DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다.
더 쉽게 말하면 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
결론은 DOM은 자바스크립트와 HTML을 이어주는 공간으로 내가 작성한 HTML 을 자바스크립트가
이해할 수 있도록 객체(Object)로 변환하는 것이다.
여기서 DOM은 Tree 형태의 노드 구조이다.
위 내용을 보면 HTML 코드로 트리구조를 생성한것이다.
웹브라우저의 렌더링 엔진에 의해 HTML 파일을 파싱하면 위 그림처럼 DOM을 구성하는 요소 노드 객체로 변환된다.
이러한 HTML 코드의 구조화된 노드 객체에 접근하여 HTML 구조를 조작하거나 내용을 수정한다.
1. 웹브라우저의 렌더링 엔진에 의해 HTML 파일을 파싱한다.
2. HTML 파일을 파싱하면 HTML 코드의 구조화된 Tree형 노드 객체로 생성된다.
3. DOM API를 통해 필요한 노드 객체로 접근하여 HTML 구조 및 정보를 수정한다.
- JavaScript로 문서객체를 생성한다는 말은?
문서 객체가 생성되는 방식은 두가지로 나누어 볼수있다.
1. 웹 브라우저가 HTML 페이지에 적혀 있는 그대로 태그들을 읽으면서 생성하는것
이러한 과정을 정적으로 문서 객체를 생성한다고 한다.
2. HTML 페이지에 없던 문서 객체를 JavaScript를 이용해서 생성할수 있다.
이러한 과정을 동적으로 문서 객체를 생성한다고 한다.
* JavaScript를 이용하여 동적으로 문서객체를 생성하는 예
<html>
<head>
<meta charset="UTF-8">
<title> 문서객체 모델(DOM)</title >
<script type= "text/javascript">
window.onload = function(){
var header = document.createElement('h2');
var textNode = document.createTextNode('Hello DOM');
header.appendChild(textNode);
document.body.appendChild(header);
}
</script>
</head>
<body>
<h1 id ="body_1" >Body-1</h1 >
<div > <h1 id = "body_2">Body-2</h1 > </div >
<hr > <h1 id = "clock"></h1>
</body>
</html>
위 script 내용을 추가하기전에 나타나는 화면은 아래와 같습니다
Body-1
Body-2
추가한 후 나타나는 화면
Body-1
Body-2
hELLO Dom
동적으로 JavaScript를 이용하여 body에 h2 태그 및 Hello DOM 텍스트의 문서객체를 생성했다.
반응형
'JavaScript > javascript' 카테고리의 다른 글
| Window.Open 과 Window.Opener (0) | 2021.11.09 |
|---|---|
| Blob(Binary Large Object) (0) | 2021.10.27 |
| Promise (0) | 2021.10.27 |
| 자바스크립트 ES6 문법 (0) | 2021.10.27 |
| javascript prototype (0) | 2021.10.27 |
Contents
소중한 공감 감사합니다