Dom 순회

DOM 구조에서도 회사의 조직도와 유사한 모습을 발견할 수 있습니다. body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있습니다. 이 관계를 그려보면 아래와 비슷한 구조가 만들어집니다.

[그림] DOM의 관계도

이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 합니다. 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점입니다. 즉, 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요합니다.

function consoleLogAllElement(element){

// nav의 class 이름을 console.log 합니다.

// nav의 자식 엘리먼트가 있는지 검색합니다. (logo, menu-wrapper)

//logo의 class 이름을 console.log 합니다.

//logo의 자식 엘리먼트가 있는지 검색합니다. (없음)

//menu-wrapper의 class 이름을 console.log 합니다.

//menu-wrapper의 자식 엘리먼트가 있는지 검색합니다. (menu, menu, menu, profile-photo)

//첫 번째 menu의 class 이름을 console.log 합니다.

//첫 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

//두 번째 menu의 class 이름을 console.log 합니다.

//두 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

//세 번째 menu의 class 이름을 console.log 합니다.

//세 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

//profile-photo의 class 이름을 console.log 합니다.

//profile-photo의 자식 엘리먼트가 있는지 검색합니다 (없음)

//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.

//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.

}

[코드] 엘리먼트를 조회하는 코드를 작성하기 위한 수도코드