[JAVASCRIPT/JQUERY] 자바스크립트(&제이쿼리) 선택자

1. 클래스 선택자

document.getElementsByClassName("클래스명");

$(".클래스명");

//해당클래스명을 가진 전체 요소를 배열로 반환합니다. 

배열로 반환되므로 

document.getElementsByClassName("클래스명")[0]

document.getElementsByClassName("클래스명")[3]

과 같이 특정요소 선택이 가능합니다. 

제이쿼리에서는

$(".클래스명").eq(0)

$(".클래스명").eq(3)

과 같이 사용 가능합니다.

 

2. 아이디 선택자

document.getElementById("아이디");

$("#아이디");

//해당 아이디를 가진 요소를 반환합니다.(아이디값은 html내에서 1개만 존재함 -중복허용 X)

 

3. 태그 선택자

document.getElementsByTagName("태그명");

$("태그명");

//해당 태그명의 엘리먼트 전체를 배열로 반환합니다.

 

4. querySelector()

.클래스명, #아이디, 태그명 등의 다양한 선택자를 이용해서 선택할 수 있습니다.

다만 여러개가 존재하더라도 배열이 아닌 첫번째 요소 하나만을 반환합니다. 

전체를 반환받고 싶다면 위에 특정선택자를 반환하는 함수를 사용하거나 querySelectorAll()를 사용합니다.

 

 

 

---

 

 

 

 

5. 부모나 자식 노드 찾기 

 

1) 부모노드 찾기 

document.getElementsByClassName("클래스명")[3].parentNode ==> 해당요소의 부모노드반환 

$(".클래스명").eq(3).parent(); ==>부모노드 반환

$(".클래스명").eq(3).parents(); ==>현재 노드의 상위요소 전체 

 

 

2)자식노드 

-첫번째 자식노드

document.getElementsByClassName("클래스명")[3].firstChild 

$(".클래스명").eq(3).children().first() 

 

-마지막자식노드

document.getElementsByClassName("클래스명")[3].lastChild

$(".클래스명").eq(3).children().last() 

 

-자식노드전체 

document.getElementsByClassName("클래스명")[3].childNodes 

$(".클래스명").eq(3).children() 

 

$(".클래스명").eq(3).find('선택자') ==> 현재요소의 하위요소 중 선택자에 해당하는 모든 요소 

 

3)형재노드

-바로 앞에있는 형제노드 

document.getElementsByClassName("클래스명")[3].prevSibling ==> 형재노드중 바로 이전 노드 반환 

$(".클래스명").eq(3).prev() ==> 바로 이전에 있는 형제 노드

$(".클래스명").eq(3).prevAll() ==> 현재요소 앞에있는 형제노드 전체  

 

-바로 뒤에있는 형제노드 

document.getElementsByClassName("클래스명")[3].nextSibling ==>형재노드중 바로 다음 노드 반환 

$(".클래스명").eq(3).next() ==> 바로 다음에 오는 형제 노드

$(".클래스명").eq(3).nextAll() ==> 현재요소 뒤에있는 형제노드 전체

 

-형제노드 전체 찾기 

$(".클래스명").eq(3).siblings();

document.getElementsByClassName("클래스명")[3].parentNode.childNodes;