DOM(Document Object Model) 소개 (비디오 버전)

앞으로 여러분은 제게서
어떤 줄임말을 많이 듣게될 거에요

바로
'DOM'이에요

돔 도돔돔돔~

DOM은
Document Object Model을 뜻해요

이걸로 브라우저가
개발자들에게

자바스크립트를 이용해
웹을 수정할 수 있게 해줘요

브라우저가
웹페이지를 로드할 때

HTML과 CSS를
분석해서

내용을 DOM형태로
만들어줘요

DOM은 아주 커다란
자바스크립트 객체에요

페이지에 대해 알고 싶거나
바꾸고 싶은 모든 부분을 갖고 있죠

각각의 태그들이나
태그의 속성과 스타일 같은 걸요

웹에서 자바스크립트를 통해
DOM에 접근하려면

전역변수인 'document'를
이용해야 해요

이 객체에 대한 속성이나
함수들을 사용할 수 있어요

DOM 편집의 기본 방법은
두 단계로 되어있어요

여기 목록을
작성해 볼게요

시작해볼까요
여기 두 단계가 있어요

각각의 단계를
알아보기로 해요

첫번째 단계는 접근을 통해
DOM 노드를 찾는 거에요

만약 태그를 찾는다면
정말 쉽게 접근할 수 있어요

'document.body'라고
쓰면 돼요

두번째 단계는 찾은
DOM노드를 편집하는 거에요

속성이나 스타일
innerHTML등을 바꾸는 걸로요

옆에 새로운
노드를 추가해서요

만약 이 태그 전체의 내용을
대체하고 싶다면

'innerHTML'속성을
사용하면 돼요

'document.body.innerHTML=
"Webpage be gone!";'

짜잔!
해냈어요

브라우저는 이 객체의
변화를 지켜보고 있어요

'document.body'의
innerHTML을 수정하자마자

실제 문서 페이지에
반영해줘요

기억해요

'document'객체는
실제 웹페이지가 아니지만

브라우저는 현재 페이지를
가능한 많이 반영하려고 해요

첫번째 단계를 할 수 있는
많은 방법들이 있어요

왜냐하면 보통은 태그
보다는 다른 걸 찾고싶으니까요

특정 id를 가지는 태그를
찾고 싶을 수도 있고

특정 종류의 모든 태그를
찾고 싶을 수도 있어요

이 부분은 DOM 접근 방법
강의에서 얘기할 거에요

두번째 단계에서도
더 멋진 것들이 있어요

여러분이 찾은 태그의 속성이나
스타일을 바꾸는 것처럼요

이 부분은 DOM 편집 방법
강의에서 얘기할 거에요

DOM의 접근과 편집을
배우고 나면

재미있게 쓸 수있는
방법을 배울거에요

사용자 이벤트에 반응하거나
움직임 효과를 만드는 것처럼요

지금은 약간
바보같을 수도 있어요

처음엔 자바스크립트로
HTML로도 할 수있는 걸 하니까요

하지만
절 믿으세요

DOM 접근과 편집을
배우고 싶을 거에요

나중에는 완전히 인터랙티브한 웹을
만들 수 있을 거니까요

그러니까 계속해요
곧 다시 만나요