Javascript 부모, 자식 요소 찾기 및 DOM 탐색하기

 

    <div class="parent">
        <div class="child1">
            <div class="child2">
            </div>
        </div>
    </div>

위와 같이 부모 요소에, 두개의 자식요소가 있다고 하자.

 

vanilla javascript 에서 요소를 찾으려면,

parent = document.querySelector('.parent');

이런식으로 document.querySelector()으로 찾거나, 

 

document.getElementsByClassName('parent')[0];

document.getElementsByClassName()[0] 으로 가져올 수도 있다. (index값을 주지 않으면 배열 객체로 가져온다.)

 

자식을 찾을때도 마찬가지이다.

children = document.querySelector('.parent .child1');
children = document.querySelectorAll('.parent .child1');

그렇다면 위의 두 코드의 차이점은 무엇일까?

 

querySelector은 요소가 여러개 있어도 첫번째 요소만 반환하고, querySelectorAll은 요소가 여러개면 배열에 담아서 반환한다.

 

parent.querySelector('.child1');
parent.querySelectorAll('.child1');

이렇게 원하는 요소에 들어있는 것만 찾을 수도 있다.(직속 자식 찾기)

 

document.querySelectorAll('.parent > .child1');

이런식으로 '>'를 사용해도 직속 자식만 찾을 수 있다.

 

 

children.parentElement;
children.parentNode;

그리고 parentElement, parentNode로 자식에서 부모 요소를 찾을수도 있다.