[기초 자바스크립트] DOM(아직 작성중)

Javascript/Javascript

[기초 자바스크립트] DOM(아직 작성중)

Rainbow🌈Coder 2022. 3. 21. 14:50

728x90

* 해당 포스팅은 1분 코딩님의 유튜브 무료 강의를 참고하여 학습, 작성하였습니다*

part1,2 내용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <script>
      //생성자(constructor)
      function Person(username, age) {
        this.username = username;
        this.age = age;
        this.introduce = function () {
          console.log(
            "안녕하세요. 제 이름은 " +
              this.username +
              "이고, 제 나이는 " +
              this.age +
              "입니다"
          );
        };
      }

      //인스턴스(instance)
      const 철수 = new Person("철수", 6);
      const 짱구 = new Person("짱구", 6);

      철수.introduce();
      짱구.introduce();
    </script>
  </body>
</html>

DOM과 Event까지 하면 동적인 페이지를 구성하는 것이 가능해진다!

웹 HTML 태그들을 짜다보면 트리구조가 형성이 되고,

이 트리구조를 이루는 요소 각각 하나하나가 전부 자바스크립트 객체이다.

(태그 뿐만 아니라 텍스트도 마찬가지 취급... 심지어 클래스나 ID, 또는 하이퍼링크나 img src 같은 속성 그런 애들도.. DOM 객체에 속한다 결국 DOM 스크립트는 html element를 자바스크립트로 조작하는 것을 말한다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script>
      const title = document.getElementById("main-title");
      console.log(title);
    </script>
  </head>
  <body>
    <h1 id="main-title">DOM(Document Object Model)</h1>
    <p>DOM이란, 문서에 있는 객체들을 바라보는 모델</p>
    <article>
      <header>header</header>
      <section>
        <header>s header</header>
        section 1
      </section>
      <section>
        <header>s header</header>
        section 2
      </section>
    </article>
  </body>
</html>

위와 같이 작성하면 콘솔에 title은 null이 될 것이다. 왜냐하면 html 요소들을 아직 읽지도 않았기 때문이다.(위에서 아래로 법칙에 의거하여)

특징

1. head 안에 DOM스크립트를 작성할 때는 html 문서가 다 읽힐 때까지 기다렸다가 실행해주어야 한다.

따라서 window.onload = function(){} 의 도움을 받아야 한다!

- window는 자바스크립트의 전역 객체

- onload는 이벤트(좀.. 구식.. 옛날 스타일^^;)

- window.onload = function(){아무 함수}뜻 : "전체 문서가 로드가 되면 괄호안에 들어간 아무 함수를 실행해주세요."

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script>
      window.onload = function () {
        const title = document.getElementById("main-title");
        console.log(title);
      };
    </script>
  </head>
  <body>
    <h1 id="main-title">DOM(Document Object Model)</h1>
    <p>DOM이란, 문서에 있는 객체들을 바라보는 모델</p>
    <article>
      <header>header</header>
      <section>
        <header>s header</header>
        section 1
      </section>
      <section>
        <header>s header</header>
        section 2
      </section>
    </article>
  </body>
</html>

window.onload = function(){아무 함수} //속성에 값 할당

대신에 요즘 서타일로 작성해보자.

window.addEventListener("load", function () {

const title = document.getElementById("main-title");

console.log(title);

});

</script>

동작은 똑같다~(객체의 속성 중에 값이 함수안 애들을 특별히 '메서드'로 부르기로 했다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script>
      window.addEventListener("load", function () {
        const title = document.getElementById("main-title");
        console.log(title);
      });
    </script>
  </head>
  <body>
    <h1 id="main-title">DOM(Document Object Model)</h1>
    <p>DOM이란, 문서에 있는 객체들을 바라보는 모델</p>
    <article>
      <header>header</header>
      <section>
        <header>s header</header>
        section 1
      </section>
      <section>
        <header>s header</header>
        section 2
      </section>
    </article>
  </body>
</html>

window.addEventListener("DOMContentLoaded", function () {

const title = document.getElementById("main-title");

console.log(title);

});

사실 얘도 위와 같은 콘솔창 상태인데 차이가 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script>
      /*window.addEventListener("load", function () {
        const title = document.getElementById("main-title");
        console.log(title);
      });*/
      window.addEventListener("DOMContentLoaded", function () {
        const title = document.getElementById("main-title");
        console.log(title);
      });
    </script>
  </head>
  <body>
    <h1 id="main-title">DOM(Document Object Model)</h1>
    <p>DOM이란, 문서에 있는 객체들을 바라보는 모델</p>
    <article>
      <header>header</header>
      <section>
        <header>s header</header>
        section 1
      </section>
      <section>
        <header>s header</header>
        section 2
      </section>
    </article>
  </body>
</html>

차이점을 알아보자

      /*window.addEventListener("load", function () {
        const title = document.getElementById("main-title");
        console.log(title);
      });*/
      window.addEventListener("DOMContentLoaded", function () {
        const title = document.getElementById("main-title");
        console.log(title);
      });

load는 전체내용이 다~ 로드될 때까지 기다린다.(문서 내용인나 이미지가 무겁고 많으면 시간이 걸린다. src 속의 세세한 이미지 데이터가 다 로드되어야 한다는 뜻.)

DOMContentLoaded는 DOM의 Content만 로드될 때까지 기다린다. (즉 앵간한 html 구조 태그만 다 로드되면 되니까 속도가 빠르다. src가 있다는 것만 읽히면, 즉 src 링크 데이터 로딩을 굳이 기다리지 않는다는 뜻.)

script를 head가 아니라 body 닫기 직전에 하면 위의 작업이 굳이 필요 없어진다.

이미 html 코드를 다 읽고 왔기 때문에 기다릴 필요가 없는 것.

그래서 사실상 추세가 스크립트 태그를 head가 아니라 body 닫긴 직전에 넣는 것으로 바뀌었다.

유저 입장에서는 텍스트 하나라도 더 빨리 뜨는 것이 느리지 않게 느껴지니까...

물론 SPA, 자바스크립트로 화면을 다 그려내는 웹 어플리케이션은 해당되는 내용 아님

728x90