문서 객체 모델 - DOM
문서 객체 모델(Document Object Model, DOM)은 웹 페이지 내의 모든 콘텐츠(HTML)를 계층화시켜 객체로 나타내는 모델입니다.
document객체는 페이지의 기본 진입점이라고 볼 수 있습니다.
이document객체를 사용해서 페이지의 내용을 변경하거나 html 요소를 새로 만들거나 클래스를 부여하거나 스타일을 부여하는 등 여러가지를 할 수 있습니다.아래는 DOM 객체 트리 구조를 시각화한 자료입니다. 각각의 태그는 요소 노드(element node) 혹은 그냥 요소라고 하며 트리 구조를 구성합니다.
내가 원하는 요소에 접근하기
document.getElmentById()document.getElementsByClassName()document.getElementsByTagName()document.querySelector()document.querySelectorAll()위 함수들은 document 객체에 있는 함수들입니다.
이것들을 사용해서 내가 원하는 요소에 접근할 수 있습니다.<body> <main> <section> <article class='myClass'>여기에 접근하고 싶습니다</article> <article class='myClass'>여기가 아닙니다</article> <article class='myClass'>여기가 아닙니다</article> </section> </main> <footer> <small id='contactEmail'>wecode@myemail.com</small> </footer> </body>const myFirstClass = document.getElementsByClassName('myClass')[0]; const contactEmail = document.getElementById('contactEmail'); console.log(myFirstClass.innerHTML) // "여기에 접근하고 싶습니다" contactEmail.style.color = 'green' // 글자색을 초록색으로 변경getElemntsByClassName 에서는 elements 이므로 'myClass' 에 해당하는 요소를 담은 컬렉션이 반환됩니다. 따라서 여러 개중 첫 번째에 접근하기 위해 [0]과 같이 배열의 요소에 접근하는 것처럼 하나를 특정해주어야 합니다. 반면 id는 고유한 값이기 때문에 getElementById 와 같이 접근하는 것 만으로 하나의 요소에 접근하게 됩니다.
스크립트의 위치
브라우저는 HTML을 읽다가
<script>태그를 만나면 DOM 생성을 멈추고 스크립트를 먼저 실행합니다. 이런 브라우저의 동작 순서 때문에 발생하는 문제가 있습니다.
<script>는 해당 스크립트 아래에 있는 DOM에 접근할 수 없게 됩니다.- 페이지 위에 용량이 큰 스크립트 파일이 있는 경우 해당 사용자가 해당 스크립트를 다운로드 받아서 실행할 때까지 스크립트 아래의 페이지가 화면에 표시되는 것이 지연됩니다.
이 부분에 대해서는 추후에 다시 깊게 포스팅을 하겠습니다.
이벤트 Event
이벤트 Event
이벤트는 웹브라우저와 사용자 간의 상호작용입니다.
이벤트는 무언가 일어났다는 신호입니다. 클릭이나 스크롤 등의 이벤트가 발생했을 때 실행되는 함수를 핸들러(handler)라고 부릅니다. 이 핸들러는 사용자의 행동에 어떻게 반응할지를 JavaScript 코드로 구현한 것입니다.// 이벤트와 핸들러 문법의 일반적인 형태 element.addEventListener(event, handler, [options]);
element는 접근할 요소를 뜻합니다. 예를 들어 어떤 버튼이 클릭했을 때를 하나의 이벤트로 하고 싶다면 그 버튼 요소에 해당합니다.getElementsByClassName,getElementbyId,querySelector등으로 접근한 요소가 되겠네요.
addEventListener라는 특별한 메서드는 핸들러를 관리할 수 있는 메서드입니다. 메서드 이름에서부터 느껴지는 것처럼 어떤 이벤트가 일어나기를 기다리고 있게 만드는 것입니다.
addEventListener의 첫번째 인자인event가 바로 이벤트의 타입입니다. 첫 번째 인자의 위치에 들어갈 수 있는 이벤트들은 매우 종류가 많습니다. 몇 가지 예시를 들어보겠습니다.
'click'
'keydown'
'input'이렇게 이벤트 타입의 문자열이 들어가게 됩니다.
addEventListener의 두번째 인자인handler에 핸들러 함수가 들어가게 됩니다. 이벤트 함수가 여러분이 작성하게될 코드가 들어가는 곳입니다.
addEventListener의 세번째 인자에 대해서는 지금 다루지 않겠습니다. 첫번째 인자event와 두번째 인자handler는 필수 인자이지만 세 번째 인자는 선택적으로 들어가는 인자로 필요할 때만 넣어주면 됩니다.
DOM 활용하기
DOM은 웹브라우저에서 지원하는 객체 모델입니다.
웹브라우저마다 DOM의 사용방법은 약간씩 차이가 있습니다.웹 개발을 하다보면 .html, .css, .js를 옮겨다니며 코딩하기가 번거롭습니다.
이런 경우에 DOM을 활용하여 .js에서 .html의 객체에 접근하여 이벤트 등을 손 쉽게 다룰 수 있도록 도와줍니다.const val = document.getElementsByClassName('big-paragraph')[0]; val.style.color = 'blue'; val.addEventListener('click', ( event ) => { alert('내용을 클릭했군요!') } );위의 코드처럼 DOM을 활용하여 javascript에서 html의 클래스를 변수로 할당하여,
html 클래스의 스타일 값을 변경할 수 있습니다.또, addEventListener()함수를 사용하여 html 클래스에 대한 이벤트 처리도 할 수 있습니다.
위와 같이, DOM을 활용하여 다양한 스타일 값에 접근할 수 있으며, 다양한 이벤트처리에도 활용할 수 있습니다.
