[Javascript/Web] DOM의 기초

코드스테이즈 41기 교육 내용을 정리하고 있습니다.  
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

DOM

Dom은 Document Object Model의 약자로, HTML 요소를 자바스크립트 Objedt 처럼 조작할 수 있는 Model입니다.
자바스크립트를 이용하면 HTML을 조작할수 있습니다.

학습 목표

DOM의 개념을 이해한다.
DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.
HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.
DOM과 JavaScript의 차이에 대해 이해할 수 있다.

HTML에서 JavaScript 적용하기

Html에서 자바스크립트를 적용하기 위해서는 script태그를 이용한다.

<script src = "myFile.js"></script>

다음은 HTML과 같은 디렉토리에 존재하는 myFile을 불러온다.

웹 브라우저가 작성된 코드를 해석하는 과정에서 script태그를 만나면 해석을 중지라고 script요소를 먼저 실행한다.

script요소를 header에 추가하는 방법과 body가 끝나기 전에 추가하는 방법이 있다.

각각을 비교하기 위해 myFile.js에 다음 코드를 넣었다

console.log("Hello");

let msgElement = document.querySelector("#msg");
console.log(msgElement.textContent);

header에 추가한 경우

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="myFile.js"></script>
  </head>
  <body>
      <div id="msg">World!</div>
  </body>
</html>

다음 경우 Hello와 null이 출력된다.

body에 추가한 경우

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">World!</div>
    <script src="myFile.js"></script>
  </body>
</html>

다음 경우 Hello와 World가 출력된다.

두 경우다 Hello는 정상적으로 출력하지만 첫번째 경우는 두번째 log를 null로 출력 하였다.
Html 요소를 이용하려면 body에 추가하는게 좋아보인다.

문제와 해설

 <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>

body 요소의 자식 요소는 총 몇개 인가?

body의 자식요소는 body 바로 밑에 존재하는 id가 nav, news-contents, news-description인 div들로 3개이다.

자바스크립트에서 dom은 document 객체에 구현 되어 있다.
console.dir을 활용하면 log를 사용할 때와 달리 dom이 객체형식으로 보여진다.
consloe.dir(document.body.children) 으로 body의 자손을 볼수 있다.

iid의 이름이 news-contents 인 `<div>` 요소의 부모 요소는 무엇인가요?

news-contents는 body의 자식이었기 때문에 news-contents의 부모요소는 body이다.

consloe.dir(document.body.children) 을 사용했을때 객체 형식으로 출력되었다.

0:div#nav 
1:div#news-contents 
2:div#footer
3:script

다음은 key가 0,1,2,3이고 value가 nav, news-contents, footer, script인 객체이다.
이 객체는 key값을 index처럼 사용하는 유사배열이다.

consloe.dir(document.body.children[0]) 처럼 사용하면 div#nav 을 얻을수 있다

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[JavaScript/Web] Dom에 대한 추가 공부 (0)	2022.09.13
[JavaScript/Web] Dom다루기 (0)	2022.09.13
[JavaScript] Javascript Koans (0)	2022.09.13
[JavaScript] ES6 주요 문법 (spread/rest, 구조 분해) (0)	2022.09.07
[JavaScript] 클로저 (0)	2022.09.07

DOM