🔍 DOM
Document Object Model의 약자로, HTML요소를 JavaScript Object처럼 조작할 수 있는 Model이다.
HTML의 작은 부분까지 접근할 수 있는 구조로, DOM을 이용하여 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다.
DOM의 구조는 트리구조로, body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있다.
👀 DOM과 Javascript
JavaScript와 같은 스크립팅 언어를 사용해 DOM 수정이 가능하다. DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지, HTML 문서, SVG 문서 및 구성요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못한다.
결론적으로, DOM은 JavaScript 언어의 일부가 아니라 웹 사이트를 구축하는 데 사용되는 Web API이다
👀 DOM 구조 조회
✔ 예제1: body요소의 자식요소 조회
JavaScript에서 DOM은 document객체에 구현되어 있으며, 브라우저에서 작동되는 자바스크립트 코드에서는 어디에서나 document 객체를 조회할 수 있다.
//Example
<html>
<body>
<div id="nav">
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="profile-photo">photo</div>
</div>
</div>
<div id="news-contents">
<div class="news-content-wrapper">
<div class="news-picture">news-picture</div>
<div class="news-title">news-title</div>
<div class="news-description">news-description</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>위의 코드에서 body요소의 자식요소는 총 몇 개일까?
DOM구조를 조회할 때에는 console.dir이 유용하며 console.log와 다르게 DOM을 객체의 형태로 출력한다.
콘솔창에 console.dir(document.body)를 입력하여 속성들을 객체의 형태로 모두 확인할 수 있으며, 이중 children 키가 body요소의 자식요소이다.
console.dir(document.body.children)을 입력하면 바로 조회할 수 있다.
✔ 예제2: id의 이름이 news-contents 인 <div> 요소의 부모 요소 조회
id가 news-contents 인 엘리먼트를 조회하려면, document.body.children 의 첫 번째 요소를 조회해보면 된다. console.dir(document.body.children[1]) 을 콘솔창에 입력하여 조회할 수 있다.
그러나 매번 children을 조회할 때 마다 입력하기 번거롭기 때문에 따로 변수 선언을 하고 id가 new-contents인 요소를 할당하면 번거롭지 않게 접근할 수 있다.
let newsContents = document.body.children[1];
console.dir(newsContents)
Q: 그렇다면, newsContents의 부모 요소를 가리키는 속성을 찾기 위해서는 콘솔창에 무엇을 입력해야할까?
A: console.dir(newsContents.parentElement)
✔ 예제3: id의 이름이 nav인 div 엘리먼트를 포함해서, 모든 자식 엘리먼트의 class 이름을 console.log를 사용하여 확인하는 방법을 의사 코드
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의 자식 엘리먼트가 있는지 검색합니다 (없음)
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
}Reference:
코드스테이츠
MDN
