유블로그

[jQuery] DOM 계층구조 탐색 선택자 본문

JavaScript & jQuery

[jQuery] DOM 계층구조 탐색 선택자

yujeong kang 2020. 9. 10. 17:26

HTML DOM 구조

 

- child selector : 부모 요소의 바로 아래 있는 모든 자식 요소를 찾는다.

$(document).ready(function() {
	$("div > ul").css("background", "#cc66ff");
	$("ul.site > li").css("border", "1px solid blue");
});

 

- descendant selector : 조상 요소의 모든 후손 요소를 찾는다.

$(document).ready(function() {
		$("ul.site2 li").css("color", "pink");
});

 

- next Adjacent selector : $("prev + next") 일 때 prev 다음으로 나오는 형제 요소 한 개 찾는다.

$(document).ready(function() {
		$("label + input").css("border", "2px solid steelblue");
});

 

- next siblings selector : $("prev ~ siblings") 일 때 prev 다음으로 나오는 모든 형제 요소 중 모든 siblings 찾는다.

$(document).ready(function() {
		// chaining 으로 접근 횟수 줄인다.
		$("#prev ~ div").css("color", "magenta").css("font-weight", "bold");
		// 하지만 아래가 더 권장됨. color 에는 "" 안줘도 인식하지만 font-weight는 '-' 포함하므로 "" 필수!
		$("#prev ~ div").css({color : "magenta", "font-weight" : "bold"});
});

<body>
	<h3>jQuery DOM Hierarchy Selector</h3>
	<p id="center">#prev ~ div</p>
	<div>div 1</div>
	<span id="prev">span1 #prev</span>
	<div>div 2</div>
	<div>
		div 3 <div id="small">div3 #small</div>
	</div>
	<span>span 2</span>
	<div>div 4</div>
</body>

위 예시에서는 div2, div3, div4 에 css 적용된다.

'JavaScript & jQuery' 카테고리의 다른 글

[jQuery] DOM 요소 필터링 - 필터선택자  (0) 2020.09.11
[jQuery] DOM 속성 탐색 - 속성선택자  (0) 2020.09.10
[jQuery] DOM 요소 탐색 - 요소선택자  (0) 2020.09.10
[jQuery] DOM 탐색  (0) 2020.09.10
[JavaScript] DOM 탐색  (0) 2020.09.10
'JavaScript & jQuery' Related Articles more