HTML 페이지에 있는 html, head, body, title, h1, div, span 등을 HTML 언어에서는 요소라고 부른다. 그리고 자바스크립트에서는 이를 문서 객체라고 부른다. 따라서 '문서 객체를 조작한다'는 말은 'HTML 요소들을 조작한다'는 의미이다.

DOM

그리고 이런 문서 객체를 조합해서 만든 전체적인 형태를 문서 객체 모델(DOM)이라고 부른다.

DOMContentLoaded 이벤트

문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용한다.
DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트이다.

문서 객체 가져오기

HTML 문서에 있는 head, body, title 요소들은 다음과 같은 방법으로 읽어들일 수 있다.

document.head
document.body
document.title

이 외에 head 요소와 body 요소 내부에 만든 다른 요소들은 다음과 같은 별도의 메소드를 사용해서 접근한다.

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

선택자 부분에는 CSS 선택자를 입력한다.
자주 사용하는 선택자의 종류는 다음과 같다.

이름	선택자 형태	설명
태그 선택자	태그	특정 태그를 가진 요소를 추출
아이디 선택자	#아이디	틀정 id 속성을 가진 요소를 추출
클래스 선택자	.클래스	특정 class 속성을 가진 요소를 추출
속성 선택자	[속성=값]	특정 속성 값을 갖고 있는 요소를 추출
후손 선택자	선택자_A 선택자_B	선택자_A 아래에 있는 선택자_B를 선택

querySelector() 메소드는 요소를 하나만 추출하고, querySelectorAll() 메소드는 문서 객체를 여러 개 추출한다.

글자 조작하기

속성 이름	설명
문서 객체.textContent	입력된 문자열을 그대로 넣습니다.
문서 객체.innerHTML	입력된 문자열을 HTML 형식으로 넣습니다.

속성 조작하기

메소드 이름	설명
문서 객체.setAttribute(속성 이름, 값)	특정 속성에 값을 지정합니다.
문서 객체.getAttribute(속성 이름)	특정 속성을 추출합니다.

스타일 조작하기

CSS 속성 이름	자바스크립트 style 속성 이름
background-color	backgroundColor
text-align	textAlign
font-size	fontSize

문서 객체 생성하기

문서 객체를 생성하고 싶을 때에는 document.createElement() 메소드를 사용한다.

document.createElement(문서 객체 이름)

문서 객체를 만들었으면 배치를 해줘야 한다.
문서 객체에 있는 appendChild() 메소드를 이용하여 부모 객체 아래에 자식 객체를 추가할 수 있다.

부모 객체.appendChild(자식 객체)

문서 객체 이동하기

appendChild() 메소드를 이용해서 문서 객체를 이동시킬 수도 있다. 문서 객체의 부모는 언제나 하나여야 하기때문에 문서 객체를 다른 문서 객체에 추가하면 문서 객체가 이동하게 된다.

문서 객체 제거하기

문서 객체를 제거할 때는 removeChild() 메소드를 사용한다.

부모 객체.removeChild(자식 객체)

appendChild() 메소드 등으로 부모 객체와 이미 연결이 완료된 무서 객체의 경우 parentNode 속성으로 부모 객체에 접근할 수 있으므로, 일반적으로 어떤 문서 객체를 제거할 때는 다음과 같은 형태의 코드를 사용한다.

문서 객체.parentNode.removeChild(문서 객체)

이벤트 설정하기

모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거나 할 때 이벤트라는 것이 발생한다. 그리고 이 이벤트가 발생할 때 실행할 함수는 addEventListener() 메소드를 사용한다.

문서 객체.addEventListner(이벤트 이름, 콜백 함수)

이벤트가 발생할 때 실행할 함수를 이벤트 리스너 또는 이벤트 핸들러라고 부른다.
이벤트를 제거할 때는 다음과 같은 형태로 removeEventListener(이벤트 이름, 이벤트 리스너)

문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)