[JacaScript] 셀렉터

 

 

셀렉터의 종류

 

getElementById	ID를 기반으로 HTML 요소를 선택한다. 하나의 특정 요소만을 선택할 수 있다. (ID는 HTML 내에서 유일하기때문)
getElementsByClassName	클래스 이름을 기반으로 HTMl 요소들을 선택한다. 같은 클래시 이름을 가진 모든 요소를 선택
getElementsByClassName	태그 이름을 기반으로 HTML 요소들을 선택한다. 같은 태그 이름을 가진 모든 요소를 선택할 수 있다.

 

 

qeurySelector	CSS 셀렉터를 기반으로 선택. 선택 가능한 첫번 째 요소를 선택
qyertSelectorAll	CSS 셀렉터를 기반으로 선택 가능한 모든 요소를 선택한다. (배열로저장됨)

 

 

 

 

 

노드(Node)

: DOM(Document Object Modle)에서 HTML 요소, 속성, 텍스트 등 모든 부분을 노드라고 한다.

노드는 계층적인 트리 구조를 이루고 이 구조를 통해 문서의 모든 부분에 접근할 수 있다.

(텍스트 및 공백도 포함한다.)

 

 

노드 메서드

부모 노드	parentNode	부모노드 반환
자식 노드	childNodes	자식 노드목록을 Nodeslist 형태로 반환
	firstChild	자식 노드 중 첫번째 자식 노드 반환
	lastChild	자식 노드 중 마지막 자식 노드 반환
형제 노드	nextSibiling	같은 레벨의 노드 중 다음 노드를 반환
	prviousSibiling	같은 레벨의 노드 중 이전 노드를 반환

 

 

 

 

요소(Elemetn)

: 요소 노드는 HTMl 태그를 표현하는 노드이다.

태그 이름, 속성, 자식 노드 등을 가지고 있다.

요소 노드는 동적으로 수정할 수 잇고 이를 통해 웹 페이지의 내용이나 구조를 변경할 수 있다.

 

 

요소 메서드

부모 요소	parentElement	부모 요소 반환
자식 요소	firstElementChild	자식 요소중 첫번째 요소를 반환
	lastElementChild	자식 요소 중 마지막 요소를 반환
	childern	자식 요소 목록을 HTMLCollection 형태로 반환
형제 요소	previousElementSibiling	같은 레벨의 요소 중 이전 요소 반환
	nextElementSibilng	같은 레벨의 요소 중 다음 요소 반환