35. <JavaScript> 문서 객체 모델 (DOM)

1. 문서객체모델(DOM, Document Object Model)

 

자바스크립트 문서객체모델(DOM, Document Object Model)은 웹 페이지의 구조화된 문서를 프로그래밍적으로 접근하고 조작하는 데 사용되는 인터페이스입니다. DOM은 HTML, XML 및 XHTML 문서의 계층 구조를 나타내며, 각 요소는 객체로 표현됩니다.

DOM을 사용하여 웹 페이지의 요소를 선택하거나 수정할 수 있습니다.

(1) 요소 선택하기(Selecting Elements)

document.getElementById( ), document.getElementsByClassName( ), document.getElementsByTagName( ) 등의 메서드를 사용하여 HTML 요소를 선택할 수 있습니다.

(2) 요소 생성하기(Creating Elements)

document.createElement( ) 메서드를 사용하여 새로운 HTML 요소를 생성할 수 있습니다.

(3) 요소 조작하기(Manipulating Elements)

선택한 요소의 내용이나 속성을 변경하거나 스타일을 적용할 수 있습니다.

(4) 이벤트 처리하기(Handling Events)

addEventListener( ) 메서드를 사용하여 이벤트를 요소에 추가하고, 이벤트 발생 시 실행할 함수를 지정할 수 있습니다.

(5) 요소 추가 및 제거하기(Adding and Removing Elements)

appendChild( ), removeChild( ) 등의 메서드를 사용하여 요소를 추가하거나 제거할 수 있습니다.

---

2. 객체(Object)와 문서객체모델(DOM, Document Object Model)

객체(Object)와 문서객체모델(DOM, Document Object Model)은 웹 개발에서 서로 다른 개념을 나타냅니다.

객체(Object)는 프로그래밍 언어에서 데이터나 기능을 추상화한 것을 말합니다. 객체는 속성과 메서드를 가지고 있으며, 속성은 객체의 상태를 나타내고 메서드는 객체의 동작을 나타냅니다. 자바스크립트에서는 모든 것이 객체로 표현됩니다.

문서객체모델(DOM, Document Object Model)은 웹 페이지의 구조화된 문서를 프로그래밍적으로 접근하고 조작하는 인터페이스입니다. HTML, XML 또는 XHTML 문서의 계층 구조를 나타내며, 각 요소는 객체로 표현됩니다. DOM을 사용하여 웹 페이지의 요소를 선택하고 수정할 수 있습니다.

따라서 객체와 DOM은 서로 다른 개념이지만, 자바스크립트에서는 DOM을 통해 HTML 요소를 객체로 취급하고 조작할 수 있습니다. 예를 들어, HTML 문서의 <h1> 요소는 DOM에서는 객체로 표현되며, 이 객체의 속성과 메서드를 사용하여 내용을 변경하거나 이벤트를 추가할 수 있습니다.

객체와 DOM은 웹 개발에서 상호 보완적으로 사용되며, 자바스크립트를 통해 웹 페이지를 동적으로 제어하고 상호작용할 수 있도록 합니다.

 

---

3. 이벤트 처리하기(Handling Events) - addEventListener( )

addEventListener() 함수는 DOM 요소에 이벤트 리스너를 추가하는 메서드입니다. 이 메서드를 사용하여 특정 이벤트가 발생했을 때 함수를 실행할 수 있습니다.

 

element.addEventListener(event, listener);

element: 이벤트를 추가할 DOM 요소를 나타냅니다.
event: 이벤트 유형을 나타내는 문자열입니다 
       (예: "click", "mouseover", "keydown" 등).
listener: 이벤트가 발생했을 때 실행할 함수(이벤트 핸들러)입니다.

 

(1) 함수를 따로 설정한 예시

 

<script>
    var pic = document.querySelector('#pic');
    pic.addEventListener("mouseover", changePic);
    pic.addEventListener("mouseout", originPic);

    function changePic( ){
        pic.src = 'images/summer.jpg';
    }

    function originPic( ){
        pic.src = 'images/spring.jpg';
    }
 </script>

 

 

* var pic = document.querySelector('#pic'); : 이미지 파일을 객체로 설정합니다.
* pic.addEventListener("mouseover", changePic);
객체 안에 함수는 메소드라 부릅니다. 따라서 addEventListener( ) 은 메소드 입니다.
* "mouseover" 는 마우스가 위치해 있을 때를 나타내는 이벤트 입니다.
* changePic 는 함수이지만 괄호 ( ) 는 필요하지 않습니다.
* pic.src = 'images/summer.jpg'; 이미지안 속성값을 'images/summer.jpg' 로 바꾸는 작업을 실행합니다.

 

(2) 함수를 직접 삽입하기

<script>
    var pic = document.querySelector('#pic');
    pic.addEventListener("mouseover", function(){
        pic.src = 'images/summer.jpg';
    });
    pic.addEventListener("mouseout", function(){
        pic.src = 'images/spring.jpg';
    });    
 </script>

 

addEventListener( ) 안에 함수를 직접 입력할 수 있습니다.

이 때는 따로 함수 이름을 설정하지 않아도 됩니다.

 

(3) 화살표 함수(arrow function)

 

화살표 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 선언 방식입니다. 기존의 함수 선언 방식보다 간결하고 명료한 문법을 제공하여 코드를 더 읽기 쉽고 유지보수하기 쉽게 만들어줍니다.

 

 <script>
    var pic = document.querySelector('#pic');
    pic.addEventListener("mouseover", () =>  pic.src = 'images/summer.jpg');
    pic.addEventListener("mouseout", () => pic.src = 'images/spring.jpg');    
 </script>