DOM

1. DOM (Document Object Model)이란?

✅ 문서 객체 모델 : 브라우저가 자바스크립트를 이용해 웹 페이지를 조작할 수 있도록 제공해주는 요소

문서 객체란?

✅ 원본 html문서의 태그들을 포함하며, 자바스크립트를 이용하여 수정 가능한 객체를 뜻한다.

문서객체는 2가지 종류로 나뉜다.

1. 정적 문서 객체 : 생성한 원본 html 문서에 있는 객체들
2. 동적 문서 객체 : 스크립트로 생성한 문서 객체들

2. DOM은 트리 구조를 가진다.

• Document Node : 최상위에 존재하며 DOM 트리에 접근하기 위한 Root Node이다.

• Element Node : h1, div 같은 태그를 가르키는 Node이다.

• Attribute Node : class, id , href, style 같은 속성에 대한 Node이다.

• Text Node : <div> Hello World </div> 에서 태그 안에 감싸진 Hello Wolrd를 가르키는 Node이다.

🖋 요약

• DOM은 항상 유효한 html 형식이다.
• JS에 의해 조작가능하여야 한다.
• 가상요소를 포함하지 않는다. (ex : before, after)
• 보이지 않는 요소를 포함한다. (ex : display : none)

---

DOM 접근 메서드

메서드	설명
document.getElementById('ID명')	해당 id명을 가진 요소 하나를 반환
document.querySelector('선택자')	해당 선택자를 만족하는 요소 하나를 반환
document.getElementsByClassName('class명')[순서]	해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환, [순서]없이 단일 class만을 가져올 수 있다
document.getElementByTagname('태그명')[순서]	해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환, 마찬가지로 [순서]없이 단일 tag만을 가져올 수 있다.
document.querySelectorAll('선택자명')[순서]	해당 선택자를 만족하는 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 반환

DOM 요소를 동적으로 만드는 메서드

메서드	설명
element.innerHTML = ' '	특정 요소의 내용을 가져오거나, 특정 요소의 내용을 변경
element.createTextNode(' ')	선택한 요소에 텍스트를 추가
element.classList.add = (' ')	새로운 class추가(기존 클래스 존재)
element.classList.remove = (' ')	지정한 class이름 삭제(다른 클래스 그대로 존재)
element.className = ' '	class이름을 동적으로 변경하기 위한 메서드(기존 클래스 사라짐)
elememt.appendChild( )	선택한 요소 안에 자식 요소를 추가
document.querySelectorAll('선택자명')[순서]	해당 선택자를 만족하는 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 반환
element.createElement(tagName)	HTML DOM Element를 동적으로 생성하기 위한 메서드, 요소가 작성된 후 요소 .appendChild () 또는 element .insertBefore () 메소드를 사용하여 문서에 삽입