- 문서 객체 모델 DOM(Document Objects Model)
넓은 의미론 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로 document 객체와 관련된 객체의 집합. HTML 페이지에 태그를 추가, 수정, 제거할 수 있다.
-
요소(element)
HTML 페이지에 있는 html, head 등 태그들을 요소(element)라고 부름.
자바스크립트에서는 이를 문서 객체(document object)라고 부름. -
문서 객체 모델(DOM)
문서 객체를 조합해서 만든 전체적인 형태.
- DOMContentLoaded 이벤트
이 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 콜백함수를 실행하는 이벤트이다.
대표적으로 body 태그를 조작하는 script 태그가 head 태그안에 있을 때 body 부분이 아직 생성 되지 않았다면 오류를 발생하기 때문에 순차적으로 진행할 수 있게 해주기 때문에 사용한다.
- 속성 조작하기
문서 객체.setAttribute(속성 이름, 값) - 특정 속성에 값을 지정함.
문서 객체.getAttribute(속성 이름) - 특정 속성을 추출함.
ex) rect.setAttribute('src', src)로 src 속성을 추가한 예.
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect')
rects.forEach((rect, index) => {
const width = (index + 1) * 100
const src = `http://placekitten.com/${width}/250`
rect.setAttribute('src', src)
})
})<img class="rect" src="http://placekitten.com/100/250">
<img class="rect" src="http://placekitten.com/200/250">
<img class="rect" src="http://placekitten.com/300/250">
<img class="rect" src="http://placekitten.com/400/250">간단하게 사용 방법
객체 속성 추가하듯이
rects.forEach((rect, index) => {
const width = (index + 1) * 100
rect.src = `http://placekitten.com/${width}/250`온점을 찍고 속성을 바로 입력할 수 있다.
- 문서 객체 생성하기
문서 객체를 생성하고 싶을 때 document.createElement() 메소드를 사용.
document.createElement(문서 객체 이름)
생성했다고 바로 배치 되는 것이 아니고 appendChild() 메소드를 이용하여 배치해야함.
부모 객체.appendChild(자식 객체)
부모 태그 아래에 자식 태그로 만들어진다.
- 문서 객체 제거하기
생성했다면 당연히 제거도 가능하다. 제거할때는 removeChild() 메소드를 이용한다.
부모 객체.removeChild(자식 객체)
부모 객체 대신 자식 객체를 넣고 parentNode를 붙이면 부모 객체로 접근이 가능하다.
문서 객체.parentNode.removeChild(문서 객체)
- 이벤트
모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거나 할 때 이벤트라는 것이 발생함. 이 이벤트가 발생할때 실행할 함수는 addEventListener() 메소드를 사용함.
문서 객체.addEventListener(이벤트 이름, 콜백 함수)
이벤트가 발생하면 실행할 함수를 콜백 함수(callback function), 이벤트 리스너(event listener), 이벤트 핸들러(event handler)라고 부름.
이벤트를 제거할 때는 removeEventListener() 메소드를 사용함.
문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)
삭제하려면 삭제할 이벤트 리스너 부분이 변수 또는 상수로 가지고 있어야함.
- 이벤트 모델(event model)
이벤트를 연결하는 방법을 이벤트 모델이라고 함.
- 표준 이벤트 모델
현재 표준으로 사용하는 방법. addEventListener() 메소드document.body.addEventListener('keyup', () => { ... } - 고전 이벤트 모델
과거에 사용했던 방법. 과거엔 문서 객체가 갖고 있는 on으로 시작하는 속성에 함수를 할당하여 이벤트를 연결.
고전 이벤트 모델처럼 on으로 시작하는 속성을 HTML 요소에 넣어서 이벤트를 연결하는 것을 인라인 이벤트 모델이라고 함.document.body.onkeyup = (event) => { ... }
