자식 엘리먼트 찾기

body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요?

body 엘리먼트의 자식 엘리먼트는 총 3개입니다. id가 nav, news-contents, footer 인 3가지 엘리먼트입니다.

[그림] body 요소의 자식 요소는 3개입니다.

그림으로 표현하면, 쉽게 이해할 수 있습니다. 그러나 컴퓨터에게는 이 사실을 어떻게 전달할까요? 자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있습니다. 한번, body를 찾아보겠습니다.

[그림] 크롬 개발자도구에서 document.body를 조회합니다.

DOM 구조를 조회할 때에는 console.dir 이 유용합니다. console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력합니다. 앞으로 console.log 와 console.dir 의 차이를 구분해서 사용할 일이 계속 있습니다. 🙂

console.dir 을 이용해 document.body를 조회해보니, 너무나 많은 속성이 나타납니다. 앞서 학습한 내용을 상기해보면, HTML 엘리먼트에 지정할 수 있었던 다양한 속성이 이미 객채 내에 존재한다고 생각하면 됩니다.

문제에 대한 답을 찾기 위해, 찾고자 하는 자식 엘리먼트를 찾아보세요. 이번에는 힌트가 있습니다. document.body 객체의 키 중에서 children을 찾아볼까요?

[그림] document.body에서 children을 찾습니다.

console.dir(document.body) 를 통해 출력된 객체에서, children 속성을 찾을 수 있습니다. children 속성에 nav, news-contents, footer 가 자식으로 있는 것을 확인할 수 있습니다. 물론 document.body.children 으로 바로 조회할 수도 있습니다.

[그림] document.body.children을 조회합니다.