DOM

DOM (Document Object Model)

HTML 문서를 JavaScript 객체로 다루는 인터페이스

“JavaScript 로 HTML 을 조작할 수 있게 해주는 연결 도구“

웹 페이지 로드 → 브라우저가 DOM 생성

요소의 목적과 특징을 정의하고, 접근하는 방법을 제공

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 프로퍼티와 메소드를 제공하는 트리 자료구조입니다.

DOM 을 이용한 작업

JavaScript 로 DOM 을 이용해 할 수 있는 작업

•

HTML 요소 및 속성을 추가, 변경, 제거

•

HTML 요소의 CSS 스타일 추가, 변경, 제거

•

HTML 문서에 대한 이벤트 처리

•

입력 양식에 대한 유효성 검사

문서 객체 모델 구조

DOM은 HTML 문서를 계층적인 구조인 트리 구조로 되어 있습니다.

최상위에 Document 노드가 있고, 그 아래로 HTML, head, body 등의 요소 노드들이 계층적으로 구성됩니다. 각 노드는 부모-자식-형제 관계를 가집니다.

Document

웹 페이지 객체

HTML 요소에 접근을 시작하기 위해 사용하는 객체

docuemnt 구성요소

•

DOM 속성 (Property)

•

DOM 메서드 (Method)

DOM 속성 (Property)

속성	설명
innerHTML	요소의 HTML 내용을 가져오거나 설정
textContent	요소의 텍스트 내용을 가져오거나 설정
id	요소의 고유 식별자
style	요소의 인라인 스타일 속성
className	요소의 클래스 이름
value	폼 요소의 값
checked	체크박스나 라디오 버튼의 선택 상태

DOM 메서드 (Method)

메서드	설명
write()	HTML 문서에 출력
createElement()	새로운 HTML 요소 생성
appendChild()	요소를 자식 요소로 추가
removeChild()	자식 요소 제거
setAttribute()	요소의 속성 설정
getAttribute()	요소의 속성 값 가져오기
addEventListener()	요소에 이벤트 리스너 추가
removeEventListener()	요소의 이벤트 리스너 제거
focus()	요소에 포커스 설정
click()	요소를 클릭
submit()	폼 요소를 제출

DOM 요소 접근 방법

•

요소 선택

•

요소 정보

•

요소 스타일 변경

요소 선택

DOM 메소드를 사용하여 HTML 요소를 선택하는 방법

•

getElement 류

◦

id, class, tag, 속성으로 요소를 선택하는 방법

document.getElementXXX()
JavaScript
복사

•

querySelector 류

◦

선택자로 요소를 선택하는 방법

document.querySelector()
JavaScript
복사

메서드	설명	반환값
getElementById(아이디)	해당 아이디의 요소를 선택함.	Element
getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.	HTMLCollection
getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.	HTMLCollection
getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.	NodeList
querySelector(선택자)	해당 선택자로 단일 요소를 선택함.	Element
querySelectorAll(선택자)	해당 선택자로 지정 가능한 모든 요소를 선택함.	NodeList

요소 정보

Element 객체의 속성과 메소드로 요소의 속성을 다루는 방법

속성/메서드	설명
Element.속성	요소의 속성 값을 직접 접근하여 가져오기
Element.속성 = 값	요소의 속성 값을 직접 접근하여 지정하기
getAttribute( )	요소의 속성 값을 메소드로 가져오기
setAttribute( )	요소의 속성 값을 메소드로 지정하기

주요 속성 및 예시

속성/메서드	설명
textContent	요소의 텍스트 내용을 가져오기
textContent = ‘내용’	요소의 텍스트 내용을 지정하기
innerText	요소의 텍스트 내용을 가져오기
innerText = ‘내용’	요소의 텍스트 내용을 지정하기
innerHTML	요소의 자식요소와 HTML 가져오기
innerHTML = ‘<h1>내용</h1>’	요소의 컨텐츠를 HTML 로 지정하기

요소 스타일 변경

요소를 선택하여 style 속성에 접근하고, CSS 스타일 속성값을 지정하여 변경하는 방법

 요소.style.속성 = "스타일 속성값"
JavaScript
복사

단일 스타일 속성 변경

const box = document.getElementById('box');
box.style.color = 'red';
JavaScript
복사

여러 스타일 속성 동시 변경

•

요소.style.cssText 속성을 사용

•

Object.assign() 메서드 사용

const box = document.getElementById('box');

// 개별 스타일 속성 지정
box.style.backgroundColor = 'blue';
box.style.width = '200px';
box.style.height = '100px';
box.style.border = '2px solid black';

// cssText를 사용한 여러 스타일 동시 지정
box.style.cssText = 'background-color: blue; width: 200px; height: 100px; border: 2px solid black;';

// Object.assign을 사용한 여러 스타일 동시 지정
Object.assign(box.style, {
    backgroundColor: 'blue',
    width: '200px',
    height: '100px',
    border: '2px solid black'
});
JavaScript
복사

DOM 을 통한 CSS 스타일 지정방법

•

단일 스타일 속성

•

여러 스타일 속성

◦

cssText

◦

Object.assign()

style 객체의 속성으로 직접 지정하거나, cssText 속성 또는 Object.assign() 메서드를 사용하여 여러 스타일을 한 번에 변경할 수 있습니다.

객체 형태로 스타일 속성 작성 시 유의사항

구분	케이스	예시
따옴표 사용	케밥 케이스(kebab-case)	"background-color"
따옴표 미사용	카멜 케이스(camelCase)	backgroundColor

이벤트

사용자 동작이나 시스템 변화를 감지하는 신호입니다.

JavaScript 로 이러한 이벤트를 감지하고 처리하여 동적인 웹 페이지를 구현합니다.

이벤트	설명
DOMContentLoaded	HTML 문서의 DOM 트리가 완성되면 발생 (문서 준비 이벤트)
click	마우스 클릭 시 발생
change	요소의 값이 변경될 때 발생
keyup	키를 누를 때 발생
submit	폼 제출 시 발생
scroll	페이지나 요소가 스크롤될 때 발생

DOM 노드

요소의 정보를 저장하고 있는 계층적 단위

DOM 노드는 HTML 문서를 구성하는 기본 단위로, 문서의 모든 요소, 속성, 텍스트를 나타내는 객체입니다.

노드	설명
문서 노드	HTML 문서 전체를 나타내는 노드
요소 노드	모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드
속성 노드	모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음.
텍스트 노드	HTML 문서의 모든 텍스트는 텍스트 노드
주석 노드	HTML 문서의 모든 주석은 주석 노드

노드 간의 관계

DOM은 노드 간의 계층적 관계를 가지며, 부모-자식-형제 관계로 구성됩니다.

노드 관계 속성

노드	설명
루트 노드	가상 상위에 있는 단 하나의 노드 (<html>)
부모 노드	바로 상위에 있는 단 하나의 노드
자식 노드	바로 하위에 있는 노드
형제 노드	같은 부모 노드를 갖는 노드
조상 노드	현재 노드보다 상위에 존재하는 모든 노드
자손 노드	현재 노드보다 하위에 존재하는 모든 노드

노드 접근 속성

속성	설명
parentNode	부모 노드
childNodes	모든 자식 노드(NodeList)
firstChild	첫 번째 자식 노드
lastChild	마지막 자식 노드
nextSibling	다음 형제 노드
previousSibling	이전 형제 노드
parentElement	부모 요소(Element)
children	자식 요소들
firstElementChild	첫 번째 자식 요소
lastElementChild	마지막 자식 요소
nextElementSibling	다음 형제 요소
previousElementSibling	이전 형제 요소

DOM 노드 메소드

•

노드 추가

•

노드 생성

•

노드 제거

•

노드 복제

•

노드 조작

노드 추가

속성/메서드	설명
appendChild(추가노드)	해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore(추가노드, 기준노드)	추가할 노드를 특정 자식 노드 앞에 추가
insertData(인덱스, 데이터)	텍스트 노드의 특정 인덱스부터 데이터를 추가

노드 생성

속성/메서드	설명
createElement(요소)	새로운 HTML 요소 노드를 생성
createAttribute(속성)	새로운 속성 노드를 생성
createTextNode(텍스트)	새로운 텍스트 노드를 생성

노드 제거

속성/메서드	설명
removeChild(요소)	자식 노드 리스트에서 특정 자식 노드를 제거
removeAttribute(속성)	특정 속성 노드를 제거

노드 복제

속성/메서드	설명
cloneNode(자식 노드 복제 여부)	기존 노드를 복제하여 새 노드로 생성 자식 노드 복제 여부 : true (복제O), false (복제X)

노드 조작

속성/메서드	설명
nodeValue	특정 노드의 값을 변경
replaceChild(새 노드, 기존 노드)	기존 노드를 새 노드를 변경
replaceData(오프셋, 문자 수, 데이터)	오프셋 위치부터 교체할 문자 개수만큼 데이터로 변경

학습 요소

•

문서 객체 조작하기

•

문서 객체 생성하기

•

문서 객체 이벤트 추가하기

•

문서 객체 제거하기

문서 객체 조작하기

DOM 요소의 내용이나 속성을 변경하는 작업입니다.

// 내용 변경
element.textContent = '새로운 텍스트';
element.innerHTML = '<span>HTML 포함</span>';

// 스타일 변경
element.style.backgroundColor = 'blue';
element.style.fontSize = '20px';

// 클래스 조작
element.classList.add('active');
element.classList.remove('inactive');
JavaScript
복사

문서 객체 생성하기

새로운 DOM 요소를 생성하고 문서에 추가하는 작업입니다.

// 새 요소 생성
const div = document.createElement('div');
div.textContent = '새로운 div 요소';

// 문서에 추가
document.body.appendChild(div);

// 특정 위치에 삽입
parentElement.insertBefore(div, referenceElement);
JavaScript
복사

문서 객체 이벤트 추가하기

DOM 요소에 이벤트 리스너를 추가하여 사용자 상호작용을 처리합니다.

// 이벤트 리스너 추가
element.addEventListener('click', function(event) {
    console.log('클릭됨!');
});

// 이벤트 객체 활용
input.addEventListener('keyup', function(event) {
    if (event.key === 'Enter') {
        console.log('엔터키 입력!');
    }
});
JavaScript
복사

문서 객체 제거하기

DOM에서 요소를 제거하는 작업입니다.

// 요소 직접 제거
element.remove();

// 부모 노드를 통한 제거
parentElement.removeChild(childElement);

// 모든 자식 요소 제거
while (element.firstChild) {
    element.removeChild(element.firstChild);
}
JavaScript
복사