[기본 문법] JavaScript DOM (Document Object Model) #1

🚀 Languege/JavaScript

[기본 문법] JavaScript DOM (Document Object Model) #1

mini_world 2021. 4. 15. 19:22

목차 접기

DOM ( Document Object Model) 이란?

문서 객체 모델이라고 하며 HTML XML 문서를 Javascript에서 접근할 수 있도록 Object화 해주는 기술을 말합니다.

웹페이지는 하나의 문서(Document)입니다.
웹페에지의 구조를 Object로 만들어 JavaScript에서 내용을 변경하고, 저장하는 등의 조작이 가능해집니다.
즉, DOM을 사용하게 되면, HTML 에 프로그래밍 방식으로 접근할 수 있게 되는거죠!

출처 : https://en.wikipedia.org/wiki/Document_Object_Model

우리의 웹 브라우저는 HTML페이지를 서버에서 받아온 후, HTML을 로드할때 DOM을 함께 생성합니다.
이렇게 되면, DOM이 HTML과 Javascript간의 인터페이스 (소통창구) 역할을 하게 되는거죠.

그래서 DOM 기술로 우리는 동적 웹페이지를 만들 수 있습니다.
- HTML 요소 및 속성을 추가, 변경, 제거 가능
- CSS 스타일 변경
- 새로운 이벤트 생성, 이벤트 반응

아래 예제를 확인해볼까요? (코드 출처)

<html>
  <head>
    <script> 
       // HTML이 로딩될때(DOM이 사옹 가능할때), windows.onload 함수야 시작되라!
       window.onload = function() {

         // 변수 선언 (h1 element 생성, elementdp 텍스트 추가)
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         
         // 문서 트리에 h1을 추가한다. <h1>bigHead!</h1>과 같은 결과 출력된다.
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    </script>
  </head>
  <body>
  </body>
</html>

완전 신기하죠!
이 DOM기술로 우리는 정말 많은것을 할 수 있습니다. Document의 객체 표기방법을 확인해봅니다.

먼저, index.html을 생성하고 웹브라우저에서 실행시켜봅니다.
실행 결과 평범한 html 페이지가 생성됩니다.

<DOCTYPE html>
  <html>
      <head>
          <title>hello!</title>
      </head>
      <body>
          <H1 id="title">This is Test Page!</H1>
          <p>This is test text!</p>
      </body>
  </html>

이제 DOM이 실행되고, HTML페이지가 어떻게 객체화 되었는지 확인해봅니다.
html에 코드를 추가합니다.

<DOCTYPE html>
  <html>
      <head>
          <title>hello!</title>
      </head>
      <body>
          <H1 id="title">This is Test Page!</H1>
          <p>This is test text!</p>
          <script>
            console.dir(document); // document 전체의 객체 목록을 확인해보자
          </script>
      </body>
  </html>

웹브라우저에서 도구 > Console탭을 확인합니다.
#document 아래의 목록이 바로 자바스크립트로 컨트롤 할 수 있는 객체 목록입니다!!

이렇게 나오는 객체 목록을 가지고 우리는 HTML을 수정할 수 있습니다.

먼저, 타이틀을 바꿔볼까요?
객체 목록에서 title을 확인할수 있네요!

코드를 변경해봅니다.

<DOCTYPE html>
  <html>
      <head>
          <title>hello!</title>
      </head>
      <body>
          <H1 id="title">This is Test Page!</H1>
          <p>This is test text!</p>
          <script>
            console.dir(document); // document 전체의 객체 목록을 확인해보자
            document.title = "change!" // title 내용을 변경해보자!
          </script>
      </body>
  </html>

그리고 웹브라우저에서 다시한번 로딩 해보면!!

네~~! 이렇게 title 이 변경되었습니다.

더 학습하기위해서 아래 Examples 을 확인하세요 👍🏻

developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Examples

Examples - Web API | MDN

Examples 이 장에서는 DOM을 사용한 웹, XML 개발의 긴 예제를 제공합니다. 예제는 문서의 object를 조작하기 위해 가능한 JavaScript의 일반적인 API, 트릭, 패턴을 사용합니다. 아래의 예제는 다양한 면

developer.mozilla.org

728x90

저작자표시

현재글[기본 문법] JavaScript DOM (Document Object Model) #1

python, amazon linux2, 쿠버네티스 구성, 도커삭제, Container, EC2, docker install, 도커 설치, 쿠버네티스, docker, 도커 입문, 도커 컨테이너삭제, install kubernetes, AWS, docker centos, docker basic, Django, 쿠버네티스 설치, 도커 기본, Kubenetes,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

i-mini