DOM 제어를 위한 선택자에 대해 알아보자.
기본적으로 document.querySelector(All)을 통해 요소를 선택한다.
하지만 선택한 요소의 주변 요소를 선택하고 싶다면..?
평상시엔 둘 다 같은 값을 출력하므로 아무거나 사용해도 되겠지만,
부모가 없을 시(최상위 요소)에는 결과값이 다르다.
노드 접근시에는 공백이나 주석까지 인식이 되므로(text, comment) 사용에 주의해야 한다.
onsole.log("parentNode", html.parentNode); // #document라는 객체 출력
console.log("parentElement", html.parentElement); // null 출력
부모 요소 선택자와 같이 노드와 요소접근 두가지 방식이 있다.
chileNodes와 children은 전체 자식을 배열로 가져오므로 css의 nth-child로 활용 가능하다.
기본적으로 html요소만 접근하는 요소 접근방식을 쓰면 되겠다.
같은 부모를 가진 형제에게 접근 방법이다.
마찬가지로 노드와 요소접근에 주의하여 상황에 맞게 사용하면 된다.
element.children처럼 모든 요소를 가져오는 선택자를 사용해 변수에 담아 log를 찍어보면 아래와 같이 보인다.
HTMLCollection은 유사배열이다. 일반 반복문같은게 적용 안된다.
[ ]가 보여서 아무생각없이 일반배열인줄알고 '왜안되지?' 하고 혼자 고생했다 ㅠㅠ
아래와 같이 수정하여 작업을 이어갔다.
const eleArray = Array.from(element.children);
수정 결과
끝.