본문으로 건너뛰기
실습하기

DOM (Document Object Model)

DOM은 웹 페이지의 구조를 표현하는 방법으로, 웹 페이지의 모든 요소와 속성, 그리고 그 관계를 객체로 표현한 것입니다.


JavaScript와 DOM​

웹 페이지의 구성 요소를 나무(Tree)처럼 생각해 보겠습니다.

이 나무의 가지와 잎은 웹 페이지의 각 요소와 콘텐츠(제목, 텍스트, 이미지 등)을 나타냅니다.

DOM은 나무의 구조와 가지와 잎에 대한 정보를 표현하는 지도이며, JavaScript는 이 나무를 조작하고 수정하는 도구입니다.

예를 들어, 나무의 특정 잎(웹 페이지의 특정 요소)의 색깔을 바꾸거나 새로운 잎을 추가하는 것처럼, JavaScript를 사용하면 웹 페이지의 내용과 구조를 동적으로 변경할 수 있습니다.


코드 예시:​

DOM을 활용한 웹 페이지 조작
// HTML 요소를 선택하는 방법
const titleElement = document.querySelector('h1'); // h1 요소를 선택합니다.

// 내용 변경하기
titleElement.textContent = '새로운 h1 제목';

// 새로운 요소 추가하기
const newParagraph = document.createElement('p');
newParagraph.textContent = 'p 요소를 활용한 새로운 단락';

document.body.appendChild(newParagraph);

DOM에서 주요한 객체와 메서드​

  • document: 전체 웹 페이지를 대표하는 객체입니다.

  • .querySelector(): 웹 페이지에서 특정 요소를 선택할 때 사용합니다.

  • .createElement(): 새로운 요소를 만들 때 사용합니다.

  • .appendChild(): 괄호 안의 요소를 appendChild를 호출한 요소의 자식으로 추가할 때 사용합니다.

    • 예시의 document.body.appendChild(newParagraph)는 body 요소의 자식으로 newParagraph 요소를 추가합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!