DOM이란 ?
HTML 트리 구조를 통해 클라이언트 영역에서 재조합 기능을 제공하여 사용자와 상호 작용을 하는 구조적인 모델로 HTML 트리 구조 내에서 개별 객체에 접근이 제공되는 방법을 말합니다.
HTML은 트리 구조로 이루어져 있어 자신의 부모, 조상, 자식, 후손에 대해 쉽게 접근이 가능합니다.
HTML DOM의 구조
<html> <head> <title>DOM Tree</title> </head> <body> <div>Hello jQuery</div> <p>안녕하세요!<em>승연아빠</em>입니다.</p> </body> </html>
위와 같은 코드를 트리 형태로 표현 하자면 다음과 같습니다.
그림에서 중요하게 보실 부분은 "자신의 부모, 조상, 자식, 후손, 형제"에 대한 부분입니다.
HTML DOM은 그림 1과 같은 관계를 형성하고 있습니다.
HEAD, BODY는 HTML의 자식 요소이면서 서로 HTML 부모에 묶여있는 형제 요소이며, HEAD는 TITLE의 부모요소가 BODY는 P, DIV의 부모요소가 됩니다. 또한 BODY를 부모로 두고 있는 P, DIV는 형제요소이면서 HTML의 후손 요소가 되며, 반대로 HTML은 P, DIV, TITLE에 대해 조상 요소가 됩니다.
각각 요소에 대한 상하관계와 평행관계를 정확히 이해를 하셔야 다음에 진행될 강좌를 이해 할 수 있습니다.
(디자이너의 피가 흐른다고 생각하고 최대한 열심히 그렸습니다.)
마치 가족의 족보를 옮겨 놓았다고 생각하면 이해가 쉽습니다.
DOM에 대한 설명은 여기서 간단히 마치며, 다음 강좌에서는 jQuery에서 지원하는 DOM 계층에 접근하는 방법에 대해 자세히 알아 보도록 하겠습니다.
쉬어가는 페이지.....
웹 페이지의 DOM 구조를 이용해 그림을 그려주는 사이트입니다.
HTML DOM Tutorial
HTML DOM에 대해 자세히 알고 싶으시다면 이곳을 방문하세요.
게시글 목록
| 번호 | 제목 |
|---|---|
| 11534 | |
| 11533 |
JavaScript
자바스크립트로 이미지 롤링 관련 문의드립니다.
|
| 11530 | |
| 11517 | |
| 11515 | |
| 11512 | |
| 11511 | |
| 11506 |
JavaScript
위지윅 에디터 만들때 선택영역 풀리는 문제
4
|
| 20681 | |
| 11504 | |
| 11503 |
기타
IE 구분하기
|
| 11502 |
기타
js, css 캐싱 팁
|
| 11501 | |
| 20679 | |
| 11500 |
JavaScript
롤링 배너 이해하는데 도움이 될것 같아 올립니다
|
| 11499 | |
| 11498 |
PHP
게시판 페이지 관련 글입니다.
|
| 11494 | |
| 11492 |
JavaScript
멀티 체크박스입니다.
1
|
| 11490 | |
| 11488 | |
| 11487 |
MySQL
mysqldump시 한글 깨짐문제..
|
| 20254 | |
| 20247 | |
| 20243 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기