jQuery DOM

DOM(Document Object Model; 문서 객체 모델)

• DOM : HTML과 XML 문서에 대한 구조적 정보를 제공하는 양식
• 즉, DOM이 HTML과 XML 문서의 뼈대
• DOM은 문서구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수있는 방법을 제공하는 인터페이스
• DOM은 프로퍼티와 메소드를 가지는 객체와 노드의 트리형 구조로 표현되는데, 이 구조는 스크립트나 다른 언어에서 웹페이지에 접근할 때 필수적이다

 

 

 

DOM 의 구성요소

• Element : (= HTML 태그) 하나의 태그 요소
• Attribute : (= HTML 태그 속성) 하나의 Element에 속해 있는 속성들
• Node : 하나의 Element에서 시작되는 트리 구조, 하나의 노드 안에는 여러 개의 노드가 포함되어 있을 수 있다

 

 

 

DOM 트리 구조

 

트리구조 탐색 (Tree Traversal)

메서드	설명
.children()	선택한 요소의 바로 아래 자식 요소만 선택합니다.
.closest()	선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.
.find()	선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.
.next()	선택한 요소의 다음 요소를 선택합니다.
.nextAll()	선택한 요소의 다음 모든 요소를 선택합니다.
.nextUntil()	선택한 요소의 다음 요소 중 조건에 맞을 때까지 찾습니다.
.parent()	선택한 요소의 부모 요소를 선택합니다.
.parents()	선택한 요소의 모든 부모 요소를 선택합니다.
.parentsUntil()	선택한 요소의 부모 요소 중 조건에 맞을 때까지 찾습니다.
.prev()	선택한 요소의 이전 요소를 선택합니다.
.prevAll()	선택한 요소의 이전 모든 요소를 선택합니다.
.prevUntil()	선택한 요소의 이전 요소 중 조건에 맞을 때까지 찾습니다.
.siblings()	선택한 요소의 형제 요소를 모두 찾습니다.

 

 

 

DOM 객체의 제어

• 다이나믹한 대화형 웹페이지 제작에서 DOM을 제어하는 것은 중요하다
• jQuery의 기능들도 모두 DOM을 제어했기 때문에 가능한 것이다
• jQuery가 제공하는 5개 함수를 통해, 하나의 요소를 기준으로 상대적으로 탐색할 수 있다
  • next() : 현재 요소를 기준으로 다음 요소 리턴
  • prev() : 현재 요소를 기준으로 이전 요소 리턴
  • parent() : 현재 요소를 기준으로 상위 요소 리턴
  • children() : 현재 요소를 기준으로 하위 요소를 배열로 리턴
  • eq(n) : 현재 요소를 기준으로 하위 요소 중 n번째 요소를 선택한다. n은 0부터 시작한다

 

 

조상과 자손의 검색

• 직계 자손이나 항렬이 같은 친척 찾기
  • next(), prev(), parent(), childrun(), eq(n) 함수 : 특정 요소와 인접해 있는 다른 요소들을 탐색
  • 즉, 이 함수들은 HTML 태그의 Node를 타고 다니는 것과 같은 효과를 갖는다
• 가까운 조상 찾기
  • parents() : HTML 요소가 인접해 있지 않더라도, 현재 객체 요소의 상위 태그 중에서 파라미터로 전달된 셀렉터가 가리키는 가장 가까운 요소를 찾는다
  • 사용법$("CSS셀렉터").parents("CSS셀렉터");
• 가까운 자식 찾기
  • find() : HTML 요소가 인접해 있지 않더라도, 현재 객체 요소의 하위 태그 중에서 파라미터로 전달된 셀렉터가 가리키는 가장 가까운 요소를 검색한다
  • 사용법$("CSS셀렉터").find("CSS셀렉터")

 

 

부모 요소 선택 또는 찾는 방법

• parent()
• parents()
  • 선택한 요소의 상위(조상) 요소를 모두 선택한다
  • parents("CSS셀렉터") - 선택자에 해당하는 상위 요소만을 선택할 수도 있다

• closest("CSS셀렉터")
  • 자신을 포함한 상위 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택한다
  • .parents() 메소드와 비슷하지만, 해당 요소의 상위 요소뿐만 아니라 해당 요소 자신까지도 포함하여 탐색한다는 점이 다르다

 

⚒️ 예제

// jQuery\webapp\06_jQueryDOM
exam01.html	DOM 객체 제어
exam02.html	DOM 객체 제어
exam03.html	서브메뉴 스스륵
exam04.html	메뉴 'selected'

 

---

 

A.append(B) & B.appendTo(A)

A.append(B)	A에 B를 추가
B.appendTo(A)	B에 A를 추가

 

 

⚒️ 예제

// jQuery\webapp\06_jQueryDOM
exam05.html	append(), empty()

 

---

 

bind()

$("요소").bind("이벤트", function() { 
	... 이벤트 처리 ... 
});

$("요소").bind( "이벤트1 이벤트2 이벤트3", function() { // 이벤트 이름을 공백으로 구분하여 여러 개 지정 
	... 이벤트 처리 ... 
});

$("요소").bind({ 
	"이벤트1" : function() { ... 이벤트 처리 ...}, 
	"이벤트2" : function() { ... 이벤트 처리 ...}, 
	"이벤트3" : function() { ... 이벤트 처리 ...} 
});

 

 

⚒️ 예제

// jQuery\webapp\06_jQueryDOM
exam06.html	bind()
exam07.html	bind()

 

---

on()

• bind 가 deprecated 되었으므로 비추천
• bind 를 대신해서 on 으로 사용

 

• bind 로 연결된 이벤트는 unbind 로 제거
• on 으로 연결된 이벤트는 off() 로 제거

 

$(선택자).on( events [,selector] [,data], handler( eventObject ) ) 
$(선택자).on(이벤트타입 [,자손선택자] [,데이터], 핸들러())

 

events	공백으로 구분된 하나 이상의 이벤트 타입과 옵션인 네임스페이스
selector	이벤트가 발생할 요소들의 자손을 찾는 선택자 선택자가 null 이거나 생략됐다면 이벤트는 선택된 요소에 한해서 반응
data	이벤트가 발생할 때 핸들러에 전달할 데이터
handler(eventObject)	이벤트가 발생되면 실행될 기능. false를 반환하는 함수라면 간단하게 false를 직접 인자로 하면 된다

 

 

⚒️ 예제

// jQuery\webapp\06_jQueryDOM
exam08.html	on()
exam09.html	댓글, on()

 

---

 

load()

• 읽어오고자 하는 대상의 내용이 단순한 text나 html 태그를 표현
• 읽어온 내용을 특정 요소에 출력하는 것만을 목적으로 할 경우 load() 함수를 사용해 코드를 축약 가능

 

$("CSS셀렉터").load(

"읽어올 대상의 URL"

[, function() { ...읽기에 성공한 후 실행될 함수...}]

);

 

예) "readme.html" 파일의 전체 내용 중에서 "#my"라는 id값을 갖는 요소만을 읽어올 경우

$("출력할 대상의 셀렉터").load("readme.html #my");

 

 

 

⚒️ 예제

// jQuery\webapp\06_jQueryDOM
exam10.html	load(), 동적 드롭다운