⭐ DOM(Document Object Model) 개요
DOM(Document Object Model)이란?
DOM(Document Object Model) 은 HTML 문서의 구조화된 표현을 제공하는 API이다.
DOM(Document Object Model) 은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결한다.
JavaScript와 DOM(Document Object Model)은 다른 개념.
DOM 은 자바스크립트 없이 DOM 인터페이스 구현만으로도 DOM 을 조작할 수 있기 때문이다.
DOM 은 어떤 프로그래밍 언어에 의존하지 않는 독립적인 인터페이스라는 것이다.
이렇기 때문에 DOM 은 꼭 자바스크립트로만 구현 되는 것도 아니다. 다른 프로그래밍 언어인 JAVA로도 구현할 수 있으며, C#으로도 구현할 수 있다.
DOM(Document Object Model)의 구조.
잘 구조화된 문서는 DOM을 사용하여 트리 구조를 얻어낼 수 있다.
위 사진이 그 예시이다.
⭐ HTML과 DOM
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample paragraph.</p>
</body>
</html>//위 HTML 코드의 DOM 구조
- document
- html
- head
- title
- body
- h1
- pDOM 구조를 볼 수 있는 console.dir(
object)
console.dir(object) 를 사용하면JavaScript객체의 계층적인 목록을 볼 수있다.
⭐ DOM 활용 메서드
초반에 배우는 여러 메서드들을 배우면 "이걸 어떻게 활용하지?" 할 수 있으나 나중에 속성이나 스타일을 조작하고 html 요소를 넣는 부분을 보면 활용성이 뛰어나다는 것을 느낄 것이다.
✔ getElementById()
document.getElementById() 메서드 는 주어진 문자열과 일치하는 id 속성 을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다.
document.getElementById(id);
✔ getElementsByTagName()
getElementsByTagName 메서드 는 HTML 문서에서 특정 태그 이름을 가진 모든 요소를 찾고, 해당 요소들을 포함하는 HTMLCollection 객체를 반환하는 DOM 메서드이다.
document.getElementsByTagName(tagName);✔ getElementsByClassName()
getElementsByClassName 메서드는 HTML 문서에서 특정 클래스 이름을 가진 모든 요소를 찾고, 해당 요소들을 포함하는 HTMLCollection 객체를 반환하는 DOM 메서드이다.
document.getElementsByClassName(classNames);✔ querySelector() & querySelectorAll()
querySelector 메서드 는 주어진 CSS 선택자에 맞는 첫 번째 요소(Element) 를 반환하는 DOM 메서드이다. 이 메서드는 CSS 선택자 문법을 사용하여 요소를 선택할 수 있어서 매우 유연하다.
var element = document.querySelector(selector);- selector` CSS 선택자 문자열. 예를 들어, .className, #id, div, div > p 등.
querySelectorAll 메서드 는 주어진 CSS 선택자에 맞는 모든 요소를 찾아 NodeList 객체로 반환하는 DOM 메서드이다. NodeList는 배열과 유사한 객체로, 일치하는 모든 요소 를 반환한다.
var elements = document.querySelectorAll(selector);- selector` CSS 선택자 문자열. 예를 들어, .className, #id, div, div > p 등.
✔ querySelectorAll()과 getElementsByClassName()의 차이점
서로는 반환값에서 가장 큰 차이가 있다.
getElementsByClassName의()는 HTMLCollection을 반환하고 querySelectorAll()는 NodeList를 반환한다.
📌 HTMLCollection
- getElementsByClassName의 반환값
- 유사 배열
- 인덱스나 반복문을 통해 요소에 접근 가능하나 배열 메서드는 사용 불가
- Live Collection
DOM 변경 사항이 실시간으로 반영됨
📌 NodeList
- querySelectorAll의 반환 값
- 유사 배열
인덱스나 반복문을 통해 요소에 접근 가능하나 배열 메서드 사용 불가
forEach(), entries(), keys(), values()는 사용 가능
Static Collection (Non-Live Collection)
DOM의 변경 사항이 실시간으로 반영되지 않음
(대부분 NodeList는 Live Collection지만 querySelectorAll의 반환 값은 Static Collection입니다.)
위 메서드들 통해 속성이나 스타일을 조작하고 html 요소를 넣는 부분은 DOM - 2 에서 설명한다.
