Document Object Model (DOM)에 대해 알아보기

<DOM 이란>

문서 객체 모델 (DOM)은 HTML, XML 문서의 프로그래밍 인터페이스 (interface) 입니다. DOM은 웹 페이지의 요소를 노드(Node) 와 objects라는 객체로 표현하며, 이 노드들은 트리 (tree) 구조로 배열됩니다. 하단 사진들을 확인하면서 트리 구조가 뭔지 간단하게 보겠습니다. 

간단한 트리 구조

 

각 노드는 HTML 요소, 속성, 텍스트 등을 나타냅니다. DOM을 사용하면 HTML의 특정 색션을 더 쉽게 변경하고 조작할 수 있습니다. JavaScript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. 결론적으로 DOM은 JavaScript와 HTML이 같이 호환할 수 있도록 도와주는 통역/번역사입니다. DOM은 웹 페이지와의 상호작용을 가능하게 하는 중요한 기술입니다. JavaScript와 함께 사용하면, 정적인 웹 페이지를 동적이고 인터액티브 한 웹 애플리케이션으로 변환할 수 있습니다.

 

<DOM의 장점과 단점들>

DOM의 장점 중 하나는 페이지의 구조, 스타일 및 콘텐츠를 동적으로 변경 할 수 있고 트리 구조로 되어 있어 중요한 정보나 해당 코드를 쉽게 찾을 수 있습니다. 단 DOM의 단점은 DOM 조작이 많은 경우, 성능 문제가 발생할 수 있습니다.

 

<JavaScript로 HTML 요소 선택하기>

JavaScript를 사용하여 특정 요소를 선택할 수 있습니다. 

 

태그 이름으로 선택하기 :

document.getElementsByTagName("li");

상단 코드는 'li' 태그를 가진 모든 요소를 선택합니다. 하지만 색상을 변경하려고 하면, 선택된 요소들이 배열로 반환되기 때문에 바로 변경할 수 없습니다. 색상을 추가하고 싶으면 배열 내에서 특정 태그를 선택해야 합니다. 

document.getElementsByTagName("li")[2].style.color = "purple"; -> 세 번째 'li' 요소의 색상을 보라색으로 변경합니다.

 

클래스 이름으로 선택하기:

document.getElementsByClassName("btn");

상단 코드는 'btn' 클래스를 가진 모든 요소를 배열로 반환합니다. 태그 이름으로 선택하기와 동일하게 특정 요소를 선택하려면 배열 인덱스를 사용해야 합니다. 

document.getElementsByClassName("btn")[0].style.color = "red"; -> 첫 번째 'btn' 요소의 색상을 빨간색으로 변경합니다.

 

ID로 요소 가져오기:

document.getElementById("title").innerHTML;

'title' ID를 가진 요소의 HTML 내용을 가져옵니다. 

 

'querySelector' 를 사용하면 '태그'나 'ID'를 통해 요소를 선택할 수 있습니다. 

document.querySelector("h1");
document.querySelector("#title");

 

만약 동일한 태그나 링크가 여러 개 있다면, 'querySelector'를 더 구체적으로 작성하여 선택할 수 있습니다.

document.querySelector("li a");
document.querySelector("a");

 

모든 특정 요소 선택하기:

DOM에서 특정 요소들을 모두 선택하려면 'querySelectorAll'를 사용하면 됩니다.

document.querySelectorAll("#list .item"); -> 'list' ID안에 있는 모든 'item' 클래스를 가진 요소들을 배열로 반환합니다.

 

참고 자료:

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

 

https://codeinstitute.net/global/blog/what-is-dom/

What is DOM (Document Object Model)? - Code Institute Global