[JavaScript] 상대위치 요소 선택 정리

자바스크립트 상대위치 요소 선택

자바스크립트를 활용하면 CSS의 선택자로 할 수 없는, 부모 선택자로 거슬러 올라가거나 형제 선택자중 더 상위의 형제 선택자를 선택할 수 있습니다.

상대위치 요소 선택 정리
상대위치 요소선택	설명 및 특징
paraentNode	선택된 요소의 부모 노드를 선택합니다.
childNodes	선택된 요소의 자식 노드들(요소 노드, 텍스트 노드)을 선택합니다.
children	선택된 요소의 자식 노드들을 선택합니다.
nextSibling	선택된 요소의 다음 형제 노드를 선택합니다.
previousSibling	선택된 요소의 이전 형제 노드를 선택합니다.
firsChild	선택된 요소의 자식 노드 중 첫 번째 노드를 선택합니다.
lastChild	선택된 요소의 자식 노드 중 마지막 노드를 선택합니다.
tagname	선택된 요소의 태그명을 반환합니다.
nodevalue	선택된 노드의 value값을 반환합니다.
nodeType	선택된 노도의 타입을 반환합니다. 1:요소, 2:속성, 3:텍스트
id	선택된 요소의 id값을 반환합니다.
className	선택된 요소의 class값을 반환합니다.

 

상대위치 요소 선택 사용 방법

var temp = document.요소선택자.상대위치_요소_선택

위 코드는 상대위치 요소 선택을 사용하는 방법입니다.

 

예시 코드로써는 아래와 같습니다.

var temp = document.querySelector(".box").firstChild;

위의 코드는 처음으로 선택된 box 클래스를 가진 요소의 자식 노드 중 첫 번째 노드를 선택하는 코드입니다.