[JavaScript] DOM (Document Object Model)

2023. 8. 2. 09:12

💡 DOM (Document Object Model)

웹 페이지의 구조화된 문서를 표현하는 방법 중 하나로,

HTML, XML 또는 XHTML 문서의 프로그래밍 인터페이스이다.

웹 페이지의 요소(element)들을 객체로 표현하며,

이러한 객체들을 JavaScript를 통해 동적으로 조작하고 변경할 수 있도록 제공된다.

DOM의 기본 개념

📍 웹 페이지의 모든 요소들을 객체(Object)로 취급된다.

📍 문서 내의 모든 요소들은 트리 구조로 이루어져 있으며, 각 요소들을 부모-자식 관계를 갖는다.

📍 JavaScript를 사용하여 웹 페이지의 요소를 선택하고 조작할 수 있다.

아래의 HTML 코드를 JavaScript로 조작해보자.

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Title</h1>
    <p>This is a paragraph.</p>
    <button id="myButton">Click Me</button>
</body>
</html>

위 HTML 문서에는 'h1', 'p'. 'button' 태그 등의 요소들로 구성되어 있다.

이러한 요소들은 DOM에 의해 객체로 표현된다.

아래 JavaScript 코드로 버튼을 클릭했을 때 "Hello, World!"를 출력해보자.

// 버튼 요소를 선택하여 클릭 이벤트 리스너를 등록
document.getElementById('myButton').addEventListener('click', function() {
    alert('Hello, World!');
});

위 코드에서 document는 DOM의 최상위 객체로,

웹 페이지의 전체 문서를 나타낸다.

getElementById 메서드를 사용해 myButton이라는 ID를 가진 요소,

즉 버튼을 선택하고

addEventListener 메서드를 사용해 클릭 이벤트에 대한 리스너를 등록한다.

클릭 이벤트가 발생하면 해당 버튼이 선택되었으므로 "Hello, World!"가 출력된다.

'JavaScript > 메모' 카테고리의 다른 글

[JavaScript] JavaScript와 jQuery (0)	2023.07.26

Sso