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에 대해 자세히 알고 싶으시다면 이곳을 방문하세요.
게시글 목록
| 번호 | 제목 |
|---|---|
| 11561 | |
| 11560 |
PHP
GPS정보 모바일에서 사용하기
|
| 11559 | |
| 11558 |
JavaScript
메뉴 네비 레이어 서서히 없어지는거
|
| 17729 | |
| 11556 | |
| 20266 | |
| 20263 | |
| 11554 |
JavaScript
제니퍼소프트, UI 소스 오픈 하여군요
1
|
| 11551 |
jQuery
좋은... swipe 스크롤
2
|
| 11550 | |
| 11549 | |
| 11548 |
jQuery
swipe 좌우스크롤
|
| 20259 | |
| 11547 |
MySQL
MYSQL 오늘 날짜 뽑아오기
|
| 11546 | |
| 11544 | |
| 11542 |
JavaScript
audio 음악이 끝났을때 이벤트를 넣을 수 있나요?
1
|
| 287 | |
| 11541 |
JavaScript
캔버스 ( html5 ) 그림 그리기3
|
| 11539 | |
| 11538 |
JavaScript
캔버스 ( html5 ) 그림 그리기2
|
| 11537 |
JavaScript
캔버스 ( html5 ) 그림 그리기
|
| 11536 |
jQuery
파일 첨부시심플하게 버튼으로만 되게..
|
| 20682 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기