자바스크립트 DOM

DOM 개요

DOM은 HTML , XML 문서의 프로그래밍 인터페이스입니다.

DOM은 문서를 노드와 객체로 표현하여, 웹 페이지를 스크립트 또는 프로그래밍 언어에서 사용할 수 있도록 연결시켜주는 역할을 합니다.

 

주요 특징 

1. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공합니다.
2. DOM은 동적으로 문서 내용 , 구조 , 스타일을 변경할 수 있게 해줍니다.
3. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준입니다.

 

DOM 트리

DOM은 문서를 논리 트리로 표현합니다. 트리의 각 분기점을 "노드"라고 부르며 , 각 노드는 객체를 갖습니다.

예)

 

이 HTML의 DOM 트리는 대략 다음과 같습니다.

 

DOM 조작

요소 선택

DOM 조작의 첫 단계는 조작하고자 하는 요소를 선택하는 것입니다. 주요 선택 메서드는 다음과 같습니다.

1. getElementById() : ID로 단일 요소 선택
2. getElementsByClassName() : 클래스 이름으로 요소 컬렉션 선택
3. getElementsByTagName() : 태그 이름으로 요소 컬렉션 선택
4. querySelector() : CSS 선택자로 단일 요소 선택
5. querySelectorAll() CSS선택자로 요소 컬렉션 선택 (전부)

 

요소 내용 변경

선택한 요소의 내용을 변경하는 방법

1. innerHTML : HTML을 포함한 내용을 변경
2. textContent : 텍스트 내용만 변경
3. innerText : 사람이 읽을 수 있는 요소의 텍스트 내용을 가져오거나 설정

 

요소 스타일 변경

요소의 스타일을 동적으로 변경할 수 있습니다.

 

add : 클래스 추가

remove : 클래스 제거

toggle : 클래스가 있으면 제거 , 없으면 추가합니다.

 

새 요소 생성 및 추가

DOM을 사용하여 새로운 요소를 생성하고 문서에 추가할 수 있습니다.

1. createElement : 해당 태그를 가진 새로운 요소를 생성합니다.
2. textContent : 생성한 요소에 표시할 텍스트를 설정합니다
3. appendChild : 새로 생성한 요소를 문서의 맨 마지막에 추가합니다.
4. querySelector : 특정 CSS 선택자를 사용하여 DOM에서 요소를 찾습니다.
   css 선택자(id) 일경우 =  querySelector('#KHJ'); id는 #을 붙인다.
   css 선택자(class) 일경우 = querySelector('.KHJ'); class는 .을 붙인다.
5. insertBefore : 선택한 요소의 앞에 새로 생성한 요소를 삽입하여 원하는 위치에 추가합니다.

 

 

이벤트 (Event)

이벤트는 사용자가 웹 페이지와 상호작용할 때 발생하는 특정 행동이나 상태 변화를 의미한다.

예로 버튼 클릭, 마우스 이동, 키보드 입력 등이 이벤트에 해당합니다.

 

이벤트 처리 (Event Handling)

이벤트 처리는 이벤트가 발생했을 때 실행할 코드를 정의하는 과정입니다.

JavaScript에서는 'addEventListener' 메서드를 사용하여 요소에 이벤트 리스너를 추가할 수 있습니다.

 

이벤트 종류

'addEventListener' 에서 사용할 수 있는 다양한 이벤트 종류

• click : 사용자가 요소를 클릭했을 때 발생
• mouseover : 마우스가 요소 위에 올라갔을 때 발생
• mouseout : 마우스가 요소에서 벗어났을 때 발생
• keydown : 사용자가 키보드 키를 눌렀을 때 발생
• keyup : 사용자가 키보드 키에서 손을 뗏을 때 발생
• change : <input> , <select> , <textarea>  등의 값이 변경되었을 때 발생
• submit : <form> 이 제출될 때 발생