문서 객체 모델 [0514]

왕감자·2024년 5월 14일

KB IT's Your Life

목록 보기

12/177

1. 문서 객체 모델

💡 문서 객체 모델 (DOM, Document Object Model)
: 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식

문서 객체
- 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것
- HTML에서 요소라고 하는 것

문서 객체 조작 = 태그 조작

↳ DOM Tree

- 요소 노드 (element node) : 요소를 생성하는 노드 (ex. h1, script 태그 등)
- 텍스트 노드 (text node) : 화면에 출력되는 문자열

정적 생성: 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것
동적 생성: 웹 페이지 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것

1) 웹 페이지 실행 순서

HTML 코드를 위→아래 실행
<script> 태그의 위치 때문에 에러~

  <head>
    <title>Document</title>
    <script>
      document.querySelector('h1').style.backgroundColor = 'red';
      document.querySelector('h2').style.color = 'red';
    </script>
  </head>
  <body>
    <h1>Process - 1</h1>
    <h2>Process - 2</h2>
  </body>

해결 1 : <script> 태그 위치 변경

  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Process - 1</h1>
    <h2>Process - 2</h2>
    <script>
      document.querySelector('h1').style.backgroundColor = 'red';
      document.querySelector('h2').style.color = 'red';
    </script>
  </body>

해결 2 : 이벤트 활용

  <head>
    <title>Document</title>
    <script>
      window.onload = function () {
        document.querySelector('h1').style.backgroundColor = 'red';
        document.querySelector('h2').style.color = 'red';
      };
    </script>
  </head>
  <body>
    <h1>Process - 1</h1>
    <h2>Process - 2</h2>
  </body>

2. 문서 객체 선택

문서 객체 선택: 이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것

문서 객체를 선택하는 메서드
- 1개 선택
- document.getElementById(아이디) : 아이디로 1개 선택
- document.querySelector(선택자) : 선택자로 1개 선택
- 여러 개 선택
- document.getElementsByName(이름) : name 속성으로 여러 개 선택
- document.getElementsByClassName(클래스) : class 속성으로 여러 개 선택
- document.querySelectorAll(선택자) : 선택자로 여러 개 선택

1) getElementById( ) ★

: id 속성을 사용해 문서 객체를 선택하고 스타일과 내부 글자를 조작

  <head>
    <title>Document</title>
    <script>
      window.onload = function () {
        let header = document.getElementById('header');

        header.style.color = 'orange';
        header.style.background = 'red';
        header.innerHTML = 'From JavaScript';
      };
    </script>
  </head>
  <body>
    <h1 id="header">Header</h1>
  </body>