DOM은 웹의 중심적인 구성 요소로, 자바스크립트를 이용해 웹 페이지를 동적으로 제어할 수 있게 해준다. DOM은 웹 페이지를 프로그래밍 언어가 이해하고 조작할 수 있는 구조로 표현한다. 이 포스트에서는 DOM의 기본 구조와 웹 페이지에서 DOM을 어떻게 선택하고 조작하는지 알아본다.
문서 구조
웹 페이지는 HTML 문서로 작성되며, 이 HTML 문서는 DOM을 통해 트리 구조로 표현된다. 이 트리 구조를 이해하는 것은 DOM을 이해하고 조작하는 데 중요한 첫 걸음이다.
HTML 문서의 각 요소는 트리의 노드에 해당한다. 예를 들어, <body> 태그는 DOM 트리에서 하나의 노드이다. 그리고 이 <body> 태그 내의 각 <div>, <p>, <img> 등의 태그들은 모두 <body> 태그의 자식 노드이다.
Node와 Tree
DOM에서 노드(Node)는 HTML 요소를 나타낸다. HTML 문서의 모든 부분은 Node로 표현되며, 이는 문서 자체(Document), 요소(Element), 텍스트(Text), 주석(Comment) 등이 될 수 있다.
이런 노드들은 계층적인 관계를 가진 트리(Tree) 구조로 이루어져 있다. HTML 문서의 최상위 요소인 Document는 전체 트리의 루트 노드이며, 이 루트 노드 아래에는 각각의 HTML 요소들이 자식 노드로 연결되어 있다.
DOM 속성
DOM에서 요소 노드는 속성(Attribute)을 가질 수 있다. 이 속성들은 해당 요소의 특성을 정의한다. 예를 들어, <img> 요소의 src 속성은 이미지의 경로를, alt 속성은 이미지가 로드되지 않을 때 표시될 대체 텍스트를 정의한다. 이러한 속성들은 DOM을 통해 접근하고 수정할 수 있다.
예를 들어, <img> 요소의 src 속성은 이미지의 경로를, alt 속성은 이미지가 로드되지 않을 때 표시될 대체 텍스트를 정의한다. DOM API는 이러한 속성에 접근하거나 수정하는 데 사용되는 다양한 메소드를 제공한다.
let imgElement = document.querySelector('img');
console.log(imgElement.src); // 이미지 경로 출력
imgElement.alt = '이미지 설명'; // alt 속성 변경DOM 선택
DOM에서 특정 요소를 선택하는 것은 해당 요소를 조작하기 위한 첫 번째 단계이다. 이를 위해 DOM은 여러 메소드를 제공한다.
document.getElementById(id): 주어진 id를 가진 요소를 선택한다.document.getElementsByClassName(className): 주어진 클래스 이름을 가진 모든 요소를 선택한다.document.getElementsByTagName(tagName): 주어진 태그 이름을 가진 모든 요소를 선택한다.document.querySelector(selector): 주어진 CSS 선택자와 일치하는 첫 번째 요소를 선택한다.document.querySelectorAll(selector): 주어진 CSS 선택자와 일치하는 모든 요소를 선택한다.주의할점:
querySelector나querySelectorAll을 사용해서 주어진 id 나 class 이름을 가진 요소는#id.className이렇게 작성 해야한다.
let mainDiv = document.getElementById('main');
let subDivs = document.getElementsByClassName('sub');
let paragraphs = document.getElementsByTagName('p');
let firstDiv = document.querySelector('div');
let allDivs = document.querySelectorAll('div');DOM 조작
DOM 요소를 선택한 후에는, 이 요소들을 조작할 수 있다. 조작 가능한 주요 동작에는 요소의 내용 변경, 속성 추가/수정/삭제, 요소 추가/삭제 등이 있다.
DOM 요소를 선택한 후에는 해당 요소를 다양한 방법으로 조작할 수 있다.
요소 내용 변경: textContent나 innerHTML 속성을 이용해 요소의 내용을 변경할 수 있다.
let paragraph = document.querySelector('p');
paragraph.textContent = '새로운 텍스트'; // 텍스트 변경
paragraph.innerHTML = '<strong>새로운 텍스트</strong>'; // HTML 변경
요소 스타일 변경: style 속성을 이용해 요소의 스타일을 변경할 수 있다.
let div = document.querySelector('div');
div.style.backgroundColor = 'blue'; // 배경색 변경
div.style.fontSize = '2em'; // 폰트 크기 변경요소 속성 변경: setAttribute 메소드를 이용해 요소의 속성을 변경하거나 새로운 속성을 추가할 수 있다.
let img = document.querySelector('img');
img.setAttribute('src', 'newImage.jpg'); // src 속성 변경
img.setAttribute('alt', '이미지 설명'); // alt 속성 추가요소 추가 및 삭제: createElement, appendChild, removeChild 등의 메소드를 이용해 새로운 요소를 생성하거나 기존 요소를 삭제할 수 있다.
let newDiv = document.createElement('div'); // 새 div 요소 생성
document.body.appendChild(newDiv); // body 요소에 새 div 요소 추가
let oldDiv = document.querySelector('div');
document.body.removeChild(oldDiv); // body 요소에서 div 요소 삭제DOM은 웹 페이지의 모든 요소를 조작하는 데 필요한 강력한 도구다. DOM을 이해하고 적절히 활용하면, 웹 페이지를 동적으로 제어하고, 사용자에게 훨씬 더 풍부하고 상호작용적인 경험을 제공할 수 있다.
