[JAVASCRIPT] JQUERY를 이용한 요소 찾기와 부모, 자식 요소 접근방법

이번 포스팅에서는 document 객체가 아닌 Jquery를 통한 요소 접근방법에 대해 설명합니다.

document 객체에서의 접근법은 여기를 참고해주세요.

1. 예제 설명

먼저 "탐색 대상"인 contents-title이란 Id값을 갖는 요소에 접근합니다.

1) 자식요소인 <h2>태그에 접근하여 HTML값 "본문 타이틀" 정보를 가져옵니다.

2) 부모요소 <div>태그에 접근하여 height 값을 가져옵니다.

2. ID값을 이용한 요소 접근

$('#contents-title')

[문법]

$("#태그ID")

"$" 는 Jquery 임을 뜻합니다. 
ID 앞에는 "#" 기호를 붙여 ID임을 인식합니다.

[결과 Console]

3. 부모요소 접근 (.parent())

$('#contents-title').parent()

[문법]

$("#태그ID").parent()


[접근 예제]

1) 부모요소 접근 확인
2) 부모요소.style.height : 부모요소의 style에 접근, height값 추출

4. 자식요소 접근 (.children())

$('#contents-title').children()

[문법]

$("#태그ID").children()

.children()의 경우 하위 태그 항목들을 배열로 반환합니다.


[접근 예제]

1) 자식요소 접근 확인
2) 자식요소 중 <h2>태그의 HTML값 추출