DOM (Document Object Model)
문서 객체 모델 (DOM) 이란
- 자바스크립트를 이용하여 웹 문서에 접근하려고 제어할 수 있도록 객체를 사용해 문서를 체계적으로 정리하는 방법
- 웹 페이지의 구조화된 표현을 제공하고, 웹 페이지의 요소에 동적으로 접근하고 조작할 수 있는 인터페이스
- 정적인 html을 동적인 js로 변환하기 위해 객체화 시킨 것
- 웹 문서(document객체)와 그 안의 모든 요소를 '객체'로 인식하고 처리
◉ DOM 트리
- DOM은 문서를 트리 구조로 표현하고, 웹 문서의 요소를 부모 요소와 자식 요소로 구분
- 노드(Node) : DOM 트리의 각 객체를 의미
기본 원칙
- 모든 HTML 태그는 요소(element)노드
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
- HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드
- 주석은 주석(comment) 노드
예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> DOM Tree </title>
</head>
<body>
<h1>Hello!</h1>
<a href="https://velog.io/@minjee98" title="나의 개발자블로그">Velog</a>
</body>
</html>
◉ 요소에 접근
요소.getElementById("아이디값"): id명로 접근요소.getElementsByClassName("클래스값"): 클래스명으로 접근, 여러 요소의 배열 형태요소.getElementsByTagName("태그이름"): 태그명으로 접근, 여러 요소의 배열 형태요소.getElementsByName("name값")노드.querySelector('CSS선택자')노드.querySelectorAll('CSS선택자'): 여러 노드가 노드 리스트 형태- ex.
let 변수 = document.getElementById('아이디값');: → 문서(document)에 접근(.)해서 가져올거야(get) 요소를(Element) 아이디로(ById)
- ex.
◉ 요소의 내용 출력 및 수정
요소.innerText: 요소의 내부 HTML- 사용자에게 보여지는 텍스트
요소.textContent: 요소의 텍스트 내용- 요소 내에서 숨겨진 내용의 텍스트까지 전부
요소.innerHTML: 요소 내에 있는 html과 xml 전부- 즉, 해당 요소의 태그는 안 나오고, 태그 안에 있는 하위 태그들은 태그까지 전부 출력
<div id="container">
<p>Hello World</p>
<p style="display:none">Hidden Text</p>
</div>
<script>
let domVal = document.getElementById('container');
console.log(domVal.innerText);
console.log(domVal.textContent);
console.log(domVal.innerHTML);
</script><innerText 출력결과>
Hello World
<textContent 출력결과>
Hello World
Hidden Text
<innerHTML 출력 결과>
<p>Hello World</p>
\<p style="display:none">Hidden Text</p>
- 요소 내용 변경
요소.innerText = '내용'요소.innerHTML = '<태그>내용</태그>'
- 요소 내용 추가
요소.innerHTML += '<태그>내용</태그>'
<div id="container">
<p>Hello World</p>
</div>
<button onclick="text()">TEXT</button>
<button onclick="html()">HTML</button>
<button onclick="add()">태그 생성</button>
<script>
let domVal = document.getElementById('container');
function text(){
domVal.innerText = '<h1>JAVA SCRIPT</h1>' //태그까지 같이 출력됨!!
}
function html(){
domVal.innerHTML = '<h1>JavaScript</h1>'
}
function add(){
domVal.innerHTML += '<h1>DOM 활용하기</h1>'
}
</script><innerText 내용 변경 결과>
<h1>JAVA SCRIPT</h1>
<innerHTML 내용 변경 결과>JavaScript
<innerHTML 내용 추가 결과>
Hello WorldDOM 활용하기
◉ 요소의 속성 출력 및 수정
요소.getAttribute("속성명") : 요소의 속성 출력
요소.setAttribute("속성명", "값"): 요소의 속성 값 수정
◉ 이벤트 처리
: 웹 페이지에서 발생하는 사용자의 동작이나 브라우저의 상태 변화와 같은 이벤트를 감지하고, 이에 대한 반응을 정의하는 것기본적인 흐름 : 이벤트 리스너 등록 → 이벤트 핸들러 함수 작성 → 이벤트 처리
이벤트 리스너
- DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트
- 특정 이벤트가 발생했을 때 실행될 함수를 지정하는 역할
이벤트 리스너 등록하기
요소.addEventListener('이벤트', 실행할 함수명)요소.addEventListner('이벤트', () => { 실행문장 })
이벤트 핸들러 함수
- 이벤트 리스너 등록 시 지정한 함수명으로 함수 작성
- 일반적으로 첫 번째 매개변수로 이벤트 객체를 받음
- 이벤트 객체에는 해당 이벤트에 대한 정보와 메서드가 포함되어 있음
- this 키워드 = 이벤트가 발생한 요소
이벤트 객체
주요 마우스 이벤트
- click : 마우스 버튼을 클릭하면 발생
- dbclick : 마우스 버튼을 두번 클릭 하면 발생
- mouseover : 마우스 커서를 요소 위에 올리면 발생
- mouseout : 마우스 커서가 요소 밖으로 나오면 발생
- mousemove : 마우스 커서가 요소 내에서 움직이는 동안 지속적으로 발생
- contextmenu : 마우스 오른쪽 버튼 클릭하면 발생
// HTML 요소 선택
const button = document.querySelector('#myButton');
// 이벤트 리스너 등록
button.addEventListener('click', handleClick);
// 이벤트 핸들러 함수
function handleClick(event) {
// 클릭 이벤트 발생 시 실행될 코드 작성
console.log('버튼이 클릭되었습니다.');
}요소에 함수 직접 연결
const button = document.querySelector('#myButton'); button.onclick = function(event) { console.log('버튼이 클릭되었습니다.'); }
- 하나의 이벤트 핸들러만 등록할 수 있다는 단점 존재
HTML 속성을 사용해서 함수 연결
<!-- HTML 속성 사용하여 연결 --> <button onclick="handleClick()">클릭</button>
이벤트 객체의 주요 속성과 메서드
이벤트.target: 이벤트가 발생한 요소 반환이벤트.currentTarget: 이벤트 리스너가 현재 실행 중인 요소 반환이벤트.type: 발생한 이벤트 타입(이름) 반환이벤트.preventDefault(): 이벤트를 취소할 수 있는 경우 취소
◉ CSS속성 접근
document.요소명.style.속성명
// id가 my-id인 요소의 글자색 바꾸기
document.getElementByID("my-id").style.color = "blue";◉ 클래스 조작
classList : 클래스를 추가, 제거, 토글하고, 존재 여부를 확인하는 등의 작업을 수행
요소.classList.add('클래스명'): 요소의 클래스 목록에 지정된 클래스명 추가요소.classList.remove('클래스명'): 요소의 클래스 목록에서 지정된 클래스명 제거요소.classList.toggle('클래스명'): 요소의 클래스 목록에 지정된 클래스명이 있으면 제거, 없으면 추가요소.classList.contains('클래스명'): 요소의 클래스 목록에 지정된 클래스명이 포함되어 있는지 여부 확인요소.classList.replace('기존클래스명', '새로운클래스명'): 요소의 클래스 목록에서 지정된 기존 클래스명을 지정된 새로운 클래스명으로 교체요소.classList.item(인덱스): 인덱스에 해당하는 클래스명 반환요소.classList.length: 요소의 클래스 목록에 있는 클래스명 개수 반환
const element = document.querySelector('.my-element');
element.classList.add('new-class'); // 클래스 추가
element.classList.remove('old-class'); // 클래스 제거
element.classList.toggle('active'); // 클래스 토글
const hasClass = element.classList.contains('highlight'); // 클래스 포함 여부 확인
element.classList.replace('old-class', 'new-class'); // 클래스 교체
const className = element.classList.item(0); // 클래스 이름 반환
const classCount = element.classList.length; // 클래스 개수 확인HTML 코드에서 클래스명이 여러 개이면 클래스들은 공백으로 구분하여 표기
<div class="class1 class2">내용</div>
◉ 새로운 요소 추가
노드 생성
document.createElement('태그명'): 새로운 요소 노드 생성document.createTextNode('내용'): 새로운 텍스트 노드 생성document.createAttribute('속성명'): 새로운 속성 노드 생성속성노드.value = '값': 속성 노드의 속성값 지정
노드 연결
부모노드.appendChild(자식노드)요소명.setAttributeNode(속성노드)
노드 삭제
부모노드.removeChild(자식노드)
새로운 요소 추가
-
텍스트 노드를 사용하는 새로운 요소 추가하기
- 새로운 요소 노드 생성 (createElement)
- 새로운 텍스트 노드 생성 (createTextNode)
- 텍스트 노드를 요소 노드의 자식으로 연결 (appendChild)
- 요소 노드를 DOM에 연결 (appendChild)
-
속성값이 있는 새로운 요소 추가하기
- 새로운 요소 노드 생성 (createElement)
- 새로운 속성 노드 생성 (createAttribute)
- 속성 노드의 속성값 지정 (value속성)
- 속성 노드를 요소 노드의 자식으로 연결 (setAttributeNode)
- 요소 노드를 DOM에 연결 (appendChild)
-
예시 : 텍스트 노드가 자식 노드로 있는 새로운 요소 추가하기
// 새로운 <div> 요소를 생성합니다.
const newDiv = document.createElement('div');
// 텍스트 노드를 생성합니다.
const textNode = document.createTextNode('새로운 텍스트 노드 입니다~');
// 텍스트 노드를 <div> 요소의 자식 노드로 추가합니다.
newDiv.appendChild(textNode);
// 해당 요소를 원하는 부모 요소에 추가합니다.
const parentElement = document.querySelector('#parent');
parentElement.appendChild(newDiv);innerHTML로 사용한 예시
// 부모 요소의 innerHTML에 새로운 HTML 코드를 추가합니다. const parentElement = document.querySelector('#parent'); parentElement.innerHTML += '<div>새로운 텍스트 노드 입니다~</div>';
개발, 분석 배운 내용 정리하기!