자식 엘리먼트 (element) 찾기
body엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요?
#nav, #news-contents, #footer 인 <div> 3개
HTML을 DOM으로 구현할 때
- DOM =>
document객체
body 찾기
document.body
- DOM 구조를 조회할 때 :
console.dir
document.body 객체의 키 중 children
document.body.children 바로 조회 가능
부모 엘리먼트 찾기
id가news-contents인div엘리먼트의 부모 엘리먼트는 무엇인가요?
<body>
id='news-contents' 엘리먼트
= document.body.children 두 번째 엘리먼트
![document.body.children[1]](https://velog.velcdn.com/images%2Falskfl%2Fpost%2F0ab06fc3-c7e3-46e6-8bdd-619786166c05%2FzpY53OF6J-1597038661217.png)
- 따로 변수를 선언해서 접근하기 편하게
부모 엘리먼트를 가리키는 속성 : parentElement
mdn which attribute of DOM is used to get a parent element
DOM 순회하기
id의 이름이nav인div엘리먼트를 포함해서, 모든 자식 엘리먼트의class이름을console.log를 사용하여 확인하는 방법을pseudocode로 작성하세요
- body가 가장 상위 (document?)
- 아래로 구성 요소들이 부모-자식 관계로 연결
트리 구조
- 부모 하나가 자식(들)을 가지고 그 자식이 또 다시 부모가 되어 자식(들)을 가질 수 있다
자식 엘리먼트를 조회하는 코드를 작성할 때
여러 번 반복해서 실행하는 코드가 필요
- 반복 코드 예시
pseudocode
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의 자식 엘리먼트가 있는지 검색합니다 (없음)
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
}그림 출처 : codestates
항상배우기