(JavaScript) DOM & EVENT #1 노드에 접근하기

DOM (Document Object Model)은 HTML, XML 또는 XHTML 문서의 프로그래밍 인터페이스를 제공하며, 이 문서를 읽고 조작하는 방법을 제공합니다. JavaScript와 같은 스크립트 언어를 사용하여 DOM을 조작할 수 있으며, HTML 요소를 추가, 수정 및 삭제하고 스타일을 변경하는 등의 작업을 수행할 수 있습니다. DOM은 웹 페이지의 모든 콘텐츠를 객체로 나타내며, 문서 구조와 관계를 유지합니다.

DOM은 다음과 같은 계층 구조로 구성됩니다.

• Document: HTML 문서 전체를 나타냅니다.
• Element: HTML 문서의 모든 HTML 요소를 나타냅니다.
• Attribute: HTML 요소의 특성(attribute)을 나타냅니다.
• Text: HTML 요소 내의 텍스트를 나타냅니다.
• Event: 웹 페이지에서 발생하는 모든 이벤트를 나타냅니다.

JavaScript를 사용하여 DOM 요소를 선택하고 조작할 수 있습니다. 가장 일반적인 방법은 document.getElementById(), document.getElementsByClassName() 및 document.getElementsByTagName()를 사용하는 것입니다.

이벤트는 사용자가 웹 페이지에서 수행하는 모든 상호 작용을 나타내며, 예를 들어 버튼 클릭, 마우스 이동, 키보드 입력 등이 있습니다. JavaScript를 사용하여 이벤트를 처리하고 반응할 수 있습니다.

addEventListener() 메서드를 사용하여 이벤트를 등록하고 처리할 수 있습니다. 이 메서드는 이벤트 이름과 이벤트가 발생했을 때 실행할 함수를 지정합니다. 이벤트를 제거하려면 removeEventListener() 메서드를 사용합니다.

예를 들어, 버튼을 클릭했을 때 메시지를 표시하는 코드는 다음과 같습니다.

<button id="myButton">Click me</button>


const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
  alert('Button clicked!');
});

이 코드는 버튼 클릭 이벤트를 처리하고, 클릭할 때마다 "Button clicked!" 메시지가 표시됩니다.