jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근

jinmuk

· 12년 전 · 조회 2032 2032

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 계층에 접근하는 방법에 대해 자세히 알아 보도록 하겠습니다.

쉬어가는 페이지.....

Webpages as Graphs

웹 페이지의 DOM 구조를 이용해 그림을 그려주는 사이트입니다.

이미지 1.jpg

HTML DOM Tutorial

HTML DOM에 대해 자세히 알고 싶으시다면 이곳을 방문하세요.

W3School

이미지 2.jpg

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
27182	그누보드하고 워드프레스하고 어떤것을 사용하는게 좋을지 궁금합니다. 2	gender	1,073	12년 전
27176	웹접근성을고려한신기술콘텐츠제작기법-javascript,flex,flash를중심으로 5	지운아빠	1,308	12년 전
18634	OS 작지만 강한 우분투 기반 서버솔루션 zentyal 1	미스티아이드	3,454	12년 전
5442	쉘 오류 ?? ㅠㅠ	견해	689	12년 전
18632	PHP getcwd 를 이용한 디렉토리명 가져오기 1	미스티아이드	2,195	12년 전
18629	JavaScript 주민번호, 외국인번호 검사 스크립트 2	라이브러리	4,873	12년 전
5435	간단한 진단지 공개소스가 있을까요? 6	대근	648	12년 전
18627	Mobile Base64.java 파일입니다. 1	누메40	3,836	12년 전
18626	기타 원의방정식을 이용한 거리 구하는 함수	누메40	1,016	12년 전
18623	Mobile [안드로이드] 이미지뷰에 url줘서 링크 걸어주기 2	누메40	3,746	12년 전
5409	일부 환경에서만 제 사이트가 심각하게 느립니다.;;; 25	견해	899	12년 전
18621	MySQL Mysql Text필드 1	맑은별2	1,764	12년 전
18617	PHP 어떤 스마트폰에서 접속했는지 코드 3	맑은별2	919	12년 전
18615	Mobile [안드로이드] 프리퍼런스 사용 방법 1	누메40	2,143	12년 전
18614	Mobile [안드로이드] assets 폴더안에 db 파일 자신 앱에 복사하기	누메40	7,929	12년 전
18608	웹서버 Apache 속도 향상을 위한 mod_pagespeed 모듈 5	흥힝힝	1,913	12년 전
27162	background-position 에 어떻에 대응하십니까?? 13	Faceissue	1,699	12년 전
18607	Mobile [ios]사진촬영후 이미지 편집 샘플입니다.	누메40	1,519	12년 전
5405	궁금한게 있는데요.. 서버에 질문 합니다. 3	누메40	583	12년 전
18606	JavaScript Html , javascript , css 강좌 사이트 입니다.	누메40	2,100	12년 전
18605	JavaScript 주민번호 자바스크립트 체크	프로맘보	1,837	12년 전
5401	서버 호스팅샀는데요~~ 셋팅어떻게해야할까요?? 3	데브타워	626	12년 전
27152	div의 목적이 뭘까요? 9	모노폴리	1,191	12년 전
5397	게시판을 개발하려고 합니다... 고수님들 질문드릴게요 3	벌스	608	12년 전
18603	jQuery 안녕하세요 jquery에 대해 물어볼게있습니다 1	웹boy	897	12년 전
27144	웹접근성 세미나 몰래 다녀왔어요~ 7	퍼블리	1,183	12년 전
20667	정규표현식 정규표현식 의 핵심. 의미있는 메타 문자들 마지막 16	유창화	3,567	12년 전
20666	정규표현식 설문조사 진행 중입니다. ~1월 28일까지	지운아빠	2,108	12년 전
24485	기획의 중요성 5	이천이지	2,296	12년 전
20651	정규표현식 쉬어가는 페이지 > 정규표현식은 왜 알아야 하고 필요한가? 14	유창화	3,662	12년 전
20632	정규표현식 정규표현식 의 핵심. 의미있는 메타 문자들 3 18	유창화	3,471	12년 전
20620	정규표현식 정규표현식 의 핵심. 의미있는 메타 문자들 2 11	유창화	3,133	12년 전
20607	정규표현식 정규표현식 의 핵심. 의미있는 메타 문자들 1 12	유창화	4,002	12년 전
18602	PHP UTF-8에서 문자열을 문자 단위로 나눠서 배열로 저장하기	편리	1,007	12년 전
30749	기타 크로스브라우징? 이제 크롬에서 하나로 확인하자 17	지운아빠	5,971	12년 전
5396	네임서버 설치 도중에 에러가 뜨는데... 뭐가 문제일까요?	쿠로리	1,359	12년 전
18601	Mobile [안드로이드] 자신의 폰에 깔려있는 앱들 검색하기	누메40	1,212	12년 전
18599	Mobile [안드로이드] 이미지 사진 카메라 촬영후 자르고 회전하기. 1	누메40	3,393	12년 전
18596	Mobile [IOS]아이폰 4 , 5 해상도 자동 맞추는 샘플 입니다. 2	누메40	3,027	12년 전
20590	정규표현식 정규표현식 관련 내장함수 preg_match 16	유창화	5,183	12년 전
18589	PHP 방문자의 실제 IP 알아내기 6	흥힝힝	2,691	12년 전
18587	PHP Facebook Page 정보 알아내기 1	흥힝힝	3,321	12년 전
18586	PHP 간단하게 트위터 팔로워 수 구하기	흥힝힝	1,008	12년 전
18585	기타 .htaccess 를 이용하여 쿠키 사용못하게 하기	흥힝힝	839	12년 전
18584	PHP request 가 ajax 인지 확인하는 코드	흥힝힝	2,011	12년 전
5387	하이브리드앱 솔류션을 만들었는데... 8	늘푸른등불	803	12년 전
27106	div 마진 값이 않먹는데요 좀 알려주세요 13	웹디자인되고파	2,209	12년 전
18583	Mobile [ios] 자신의 어플리케이션 폴더안에 파일들 검색! 하기	누메40	1,502	12년 전
18580	MySQL phpMyAdmin 에서 icon 과 text 중 icon 만 보이게 하기 2	관리자	1,100	12년 전
18579	Mobile [iOS]아이폰 DOCUMETN 안에 파일들 Icloud 맊기..(안맊음 리젝 당함)	누메40	2,093	12년 전
27120	utf8, Euc-kr 어떤걸 선호하시나요? 9	Stiven	2,308	12년 전
18574	PHP php 정규식 매뉴얼입니다. 4	프로프리랜서	1,307	12년 전
18570	PHP ereg_replace 정규식입니다. 3	프로프리랜서	782	12년 전
18566	JavaScript 자바스크립트에서 새창 띄우기입니다. 3	프로프리랜서	1,326	12년 전
18562	PHP 문자열자르기소스입니다. 3	프로프리랜서	818	12년 전
18558	PHP 숫자금액을한글로바꾸기입니다. 3	프로프리랜서	1,208	12년 전
26490	기타 웹기획자의 역할과 정의, 업무범위는 어디까지 인가요? 5	구래구래	3,848	12년 전
30733	웹접근성 자바스크립트를 끈 로그인 폼 15	지운아빠	3,941	12년 전
18554	JavaScript 에디터 글양식 변경 기능 문의 3	보충수업	1,361	12년 전
20572	정규표현식 정규표현식의 기본구조 17	유창화	6,973	12년 전
20541	정규표현식 정규표현식 강좌를 시작하며..... 30	유창화	7,551	12년 전
5377	결국 안드로이드 웹뷰로 앱을 다시 만들었네요 9	진서기	2,309	12년 전
18553	OS 리눅스 MySQL DB 백업 스크립트	리아s	3,858	12년 전
5373	이게 개발자영역인지 디자이너 영역인지 잘몰라서 여기서 좀 여쭤보려고하는데요요 좀도와주세요..ㅠㅠ. 3	smwkd	627	12년 전
20534	썸네일 언샵마스크효과 추가 6	유창화	3,649	12년 전
20531	썸네일 원격이미지 썸네일 기능 추가 2	유창화	3,475	12년 전
20527	썸네일 워터마크 함수 기능 보강 및 종합 썸네일함수 버그 수정 3	유창화	2,711	12년 전
20525	썸네일 종합 썸네일 함수 만들기 1	유창화	2,814	12년 전
20519	썸네일 이미지에 워터마크 처리하기 추가 및 워터마크 처리함수 만들기 5	유창화	2,352	12년 전
20513	썸네일 정의한 함수 수정 및 내용 정리 5	유창화	2,262	12년 전
20507	썸네일 이미지에 워터마크 처리하기 5	유창화	5,164	12년 전
20503	썸네일 기준점에 따른 이미지 크롭(이미지의 특정 부분만 복사) 처리하기2 3	유창화	2,796	12년 전
20496	썸네일 기준점에 따른 이미지 크롭(이미지의 특정 부분만 복사) 처리하기1 6	유창화	3,122	12년 전
20490	썸네일 이미지 리사이즈 처리를 위한 함수 만들기 5	유창화	2,247	12년 전
20483	썸네일 원본이미지를 정비율로 리사이즈 처리하기 6	유창화	6,829	12년 전
20471	썸네일 이미지 처리에 필요한 기본함수 만들기 11	유창화	2,566	12년 전
20464	썸네일 이미지 복사하기 6	유창화	3,417	12년 전
20447	썸네일 이미지관련 내장함수 image_type_to_extension, image_type_to_mime_type 16	유창화	2,313	12년 전
20419	썸네일 이미지관련 내장함수 getimagesize 27	유창화	4,809	12년 전
20405	썸네일 이전에 썸네일 관련으로 연재 했던 강좌를 새로 올립니다. 13	유창화	3,680	12년 전
30729	기타 HTML5 기반 에니메이션 제작을 위한 Adobe Edge 3	흥힝힝	2,546	12년 전
18549	Mobile 유투브 api 실행 결과를 담는 방법요? 3	지러유	2,220	12년 전
18544	MySQL 테이블에서 원하는 글(양이 많을때)들을 한번에 삭제하는방법이 있을까요? 4	Rockg	1,277	12년 전
32084	센스리더 센스리더 문제해결 1	지운아빠	3,419	12년 전
32083	센스리더 센스리더 Windows 설정하기	지운아빠	4,079	12년 전
32082	센스리더 센스리더 기능키 리스트	지운아빠	3,446	12년 전
32081	센스리더 센스리더 인터넷의 활용 (가상커서)	지운아빠	5,322	12년 전
30728	CSS IE6/7 img px 버그	daro	1,644	12년 전
27097	html5 작업하실 때 outliner도 돌려보시나요? 8	지운아빠	1,264	12년 전
18537	jQuery JQUERY로 제작된 슬라이드 메뉴입니다. 6	port	5,159	12년 전
27092	아.. 스크립트+jquery...ㅠㅠ 4	조박사님	928	12년 전
32080	센스리더 센스리더의 점자정보단말기 지원 기능 - 3. 씽크 브레일	지운아빠	3,396	12년 전
32079	센스리더 센스리더의 점자정보단말기 지원 기능 - 2. 한소네 브레일	지운아빠	3,400	12년 전
32078	센스리더 센스리더의 점자정보단말기 지원 기능 - 1. Braillenote	지운아빠	2,983	12년 전
32077	센스리더 센스리더의 기능과 기능키 - 19. 기타 기능	지운아빠	3,338	12년 전
32076	센스리더 센스리더의 기능과 기능키 - 18. 위치 정보 관련 기능	지운아빠	2,860	12년 전
32075	센스리더 센스리더의 기능과 기능키 - 17. 숫자 입력 관련 기능	지운아빠	2,837	12년 전
32074	센스리더 센스리더의 기능과 기능키 - 16. 블럭 관련 기능	지운아빠	2,857	12년 전
32073	센스리더 센스리더의 기능과 기능키 - 15. 찾기 관련 기능	지운아빠	2,851	12년 전
32072	센스리더 센스리더의 기능과 기능키 - 14. 객체 레이블 관련 기능	지운아빠	2,873	12년 전

이전 다음

20 21 22 23 24

전체 목록