00-DOM으로 조작

1. DOM이란?

HTML에서 요소로 불리는 태그 등을 자바스크립트에서는 문서 객체(Document Object)라고 부른다. 즉, DOM은 Document Objects Model의 약자로 문서 객체를 조합해서 만든 전체적인 형태로 문서 객체 모델이라고 불린다.

1<head>
2  <script></script>
3</head>
4<body>
5  <div></div>
6</body>

보통 스크립트를 선언하는 위치는 head 태그 안에 위치한다.

그런데 이러한 경우 DOM을 조작하게 되면, 자바스크립트 코드가 실행된 후 HTML 태그들이 불러오므로 문제가 발생한다. 문제를 해결하는 방법은 2가지가 있는데

1<body>
2  <div></div>
3  <script></script>
4</body>

첫 번째는 모든 태그들을 작성하고, body 태그 맨 마지막에 자바스크립트를 실행하는 방법

1document.addEventListener('DOMContentLoaded', function () {
2  // 코드 작성
3})

두 번째는 문서 전체에 해당하는 document에 DOMContentLoaded 이벤트를 사용하는 방법이다.

1document.head
2document.title
3document.body

HTML 문서에서 당연히 있는 내용들은 태그별로 가져올 수 있다.

1document.getElementsByTagName('태그')
2document.getElementById('아이디명')
3document.getElementsByClassName('클래스명')

그런데 이런 식으로 사용하면 하위 태그에 접근할 때마다 매번 사용해야 해서 불편하다.

1document.querySelector(선택자)
2document.querySelectorAll(선택자)

그래서 CSS 선택자를 사용하는 방식으로 가져오는 querySelector와 querySelectorAll을 사용할 것을 권장한다.

1문서 객체.textContent
2문서 객체.innerHTML

문서 객체 내에

1문서 객체.setAttribute(속성 이름, 값)
2문서 객체.getAttribute(속성 이름)

1문서 객체.style.속성 = "값"

문서 객체의 스타일을 조작할 때는 style로 접근할 수 있다.

사실 스타일을 조적할 때 style로 접근하는 방식보다 미리 클래스에 스타일을 지정하고

1문서 객체.classList.add("클래스명")
2문서 객체.classList.remove("클래스명")
3
4문서 객체.classList.contains("클래스명")
5문서 객체.classList.toggle("클래스명")

classList로 해당 클래스를 추가, 삭제로 조작하는 것을 추천한다.

1const 자식 객체 = document.createElement(문서 객체 이름)
2부모 객체.appendChild(자식 객체)

반대로,

1부모 객체(문서 객체.parentNode).removeChild(자식 객체)

부모 객체에서 자식 객체를 삭제할 수 있다. 만약 부모 객체에 접근해야 한다면 parentNode를 사용한다.

모든 문서 객체에는 클릭되거나 마우스를 위에 올리거나 등 이벤트를 가지고 있다.

1문서 객체.addEventListener(이벤트 이름, 함수)

addEventListener로 이벤트 이름과 함수를 지정하면, 문서 객체의 해당 이벤트가 실행되면 지정한 함수가 실행된다.

1문서 객체.removeEventListener(이벤트 이름, 함수)

반대로, 이벤트를 제거하고 싶다면 removeEventListener를 사용한다.