앞으로 여러분은 제게서 어떤 줄임말을 많이 듣게될 거에요
바로 '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 접근과 편집을 배우고 싶을 거에요
나중에는 완전히 인터랙티브한 웹을 만들 수 있을 거니까요
그러니까 계속해요 곧 다시 만나요