[JS]자바스크립트 선택자

DOM 제어를 위한 선택자에 대해 알아보자.

기본적으로 document.querySelector(All)을 통해 요소를 선택한다.

하지만 선택한 요소의 주변 요소를 선택하고 싶다면..?

1. 부모 요소 선택

• 노드 접근
  • element.parentNode
    
    
• 요소 접근
  • element.parentElement

평상시엔 둘 다 같은 값을 출력하므로 아무거나 사용해도 되겠지만,
부모가 없을 시(최상위 요소)에는 결과값이 다르다.


노드 접근시에는 공백이나 주석까지 인식이 되므로(text, comment) 사용에 주의해야 한다.

onsole.log("parentNode", html.parentNode); // #document라는 객체 출력
console.log("parentElement", html.parentElement); // null 출력

2. 자식 요소 선택

부모 요소 선택자와 같이 노드와 요소접근 두가지 방식이 있다.

• 노드 접근
  • element.childNodes
  • element.firstChild
  • element.lastChild
    
    
• 요소 접근
  • element.children
  • element.firstElementChild
  • element.lastElementChild

chileNodes와 children은 전체 자식을 배열로 가져오므로 css의 nth-child로 활용 가능하다.

기본적으로 html요소만 접근하는 요소 접근방식을 쓰면 되겠다.

3. 형제 요소 선택

같은 부모를 가진 형제에게 접근 방법이다.

• 노드 접근
  • element.nextSibling
  • element.previousSibling
    
    
• 요소 접근
  • element.nextElementSibling
  • element.previousElementSibling

마찬가지로 노드와 요소접근에 주의하여 상황에 맞게 사용하면 된다.

주의사항 업데이트.

element.children처럼 모든 요소를 가져오는 선택자를 사용해 변수에 담아 log를 찍어보면 아래와 같이 보인다.

HTMLCollection은 유사배열이다. 일반 반복문같은게 적용 안된다.
[ ]가 보여서 아무생각없이 일반배열인줄알고 '왜안되지?' 하고 혼자 고생했다 ㅠㅠ

아래와 같이 수정하여 작업을 이어갔다.

const eleArray = Array.from(element.children);

수정 결과

끝.