TIL 210228

DOM 이란 무엇인가?

Document Object Model의 약자로 HTML에 접근하여 JS Object 처럼 HTML을 조작할 수 있는 model이라는 의미 즉, 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작 할 수 있다는 의미. 우리가 배웠던 반복문과 조건문, 배열, 객체를 활용하여 생성되는 트윗을 저장하고 분류하는 작업을 할 수 있다.

<html>
  <body>
    <div id="nav">
      <div class="logo"></div>
      <div class="menu-wrapper">
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="profile-photo"></div>
      </div>
    </div>
    <div id="news-contents">
      <div class="news-content-wrapper">
        <div class="news-picture"></div>
        <div class="news-title"></div>
        <div class="news-description"></div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
</html>
Q1. body 엘리먼트의 자식 엘리먼트는 총 몇 개인가?

A: id 가 nav, news-contents, footer인 3가지 엘리먼트

자바스크립트에서 dom은 document객체에 구현 되어 있다. DOM 구조를 조회하기 위해서는 console.dir가 유용하다. DOM의 객체의 모습을 보여준다. 아래 두가지 방법으로 body의 children을 조회할 수 있다.

 console.dir(document.body)
 document.body.children
Q2. id가 new-contetns 인 div 엘리먼트의 부모 엘리먼트는 무엇인가 ?

A : body 이다. js에서 확인하려면, document.body.children의 첫번째 엘리먼트를 조회해보자. 매번 document.body로부터 찾아가지않고 변수 선언을 해서 정보를 저장할 수 도 있다.

let newContents=document.body.children[1]
console.dir(newContents)

🧐 많고 많은 속성 중 아래 속성이 부모 엘리먼트를 가리킨다. Node.parentElement

Updated: