7. DOM

DOM? (Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

출처: MDN

DOM 소개 - Web API | MDN

 

즉, HTML을 동적으로 보다 효율적으로 변경하기 위해서 HTML 문서(Docuemnt) 를 자바스크립트가 이해할 수 있는 객체(Object) 의 형태로 모델(Model)링 하여 자바스크립트에서 조작을 할 수 있도록 만든 ⭐️ interface가 바로 이 DOM(Document Object Model)인 것입니다.

 

그래서 엄밀히 말하면 DOM은 API 중에서 공통 인터페이스 부분만을 의미합니다.

 

API (web or XML page) = DOM + JS (scripting language)

 

하지만 실전에서는 이런 이론적인 내용 하나도 안중요하며 DOM = API로 이해하셔도 무방합니다. 지금 당장 무슨 말인지 이해가 안되도 "아~ 완벽히 이해했어!" 하면서 넘어가 줍시다.

 

⚠️DOM = HTML을 수정하는 법을 컴퓨터가 알아듣게 작성하는 방법

[출처] https://velog.io/@teo/dom

DOM은 다들 어떤식으로 공부하셨나요?

---

DOM API?

DOM은 HTML 문서 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할

이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다.

 

DOM 제어 명령어

1. 이벤트 삽입 : target.addEventListener( type, listener)

 

    1) 이벤트 삽입할 요소 선택

         'document.querySelector' or 'document.getElementById'

         (선택하다 or 가져오다 엘리먼트를 id를 통해)

 

    2) 선택한 요소에 addEventListener 메서드 사용 이벤트 추가

         - 첫 번째 인수 : 이벤트 유형 (ex: 'click', 'mouseover', 'keydown' 등)
         - 두 번째 인수 : 이벤트 발생 시 실행할 함수 (콜백 함수)
         - //예 : 버튼 클릭 이벤트 추가

             button.addEventListener('click', function() {

                   alert('버튼이 클릭되었습니다!);   });             ➡️ 버튼 클릭시 지정된 콜백 함수(경고창) 실행
         - //콜백 함수 외부 정의하기

             function handleClick() {

                   alert('버튼이 클릭되었습니다!);   }); 

           //이벤트 리스너에 콜백 함수 추가

 

            button.addEventListener('click', handelClick);    ➡️ 버튼 클릭시 handelClick이름의 함수 실행

    3) 이벤트 전파 제어하기

         - 'stopPropagation' : 이벤트 전파 중단

         - 'preventDefaul' : 기본 동작 방지

         - //예 : 기본 동작 방지 및 이벤트 전파 중단

 

    4) 한 번만 실행되는 이벤트 리스너

         - { once: true }

         - 'preventDefaul' : 기본 동작 방지

         - button.addEventListener('click', function() {

                   alert('이 메시지는 한 번만 표시됩니다.');   

             }, { once: true }); 

           ➡️ 클릭 이벤트가 한 번 발생 후 이벤트 리스너 자동 제거

 

 

2. 클래스 제어

    1) 클래스 추가하기 : classList.add

 

    2) 클래스 제거하기 : classList.remove

 

    3) 클래스 토글하기 : classList.toggle

         : 요소에 클래스가존재하면 제거하고, 존재하지않으면 추가

           즉, 클릭시 마다 삭제, 제거 반복!\

          ➡️ 전등을 껐다 켰다 하는 것 처럼 나왔다 사라졌다 가

 

    4) 클래스 존재 여부 확인하기 : classList.contains

         + if문을 통해 확인 가능

           if (paragraph.classList.contains('highlight')) {

                      alert('highlight 클래스가 있습니다.');

             } else {

                      alert('highlight 클래스가 없습니다.'); } });   ➡️ 클래스의 유무를알림으로 표시해줌

 

 

3. 요소 제어 : document.~~(target) - target 요소를 ~~한다.

    1) 요소 선택하기 :

         - getElementBy + Id, ClassName, TagName : id, class이름, tag이름 으로 요소 선택

         - querySelector, querySelectorAll : css 선택자로 요소 선택

 

    2) 요소 내용 변경하기 : 

         - textcontent : 요소의 텍스트 내용 변경

         - innerHTML : 요소의 HTML 콘텐츠 변경

 

    3) 요소 속성 변경하기

         - setAttribute : 요소의 속성 설정

               ex) document.getElementById('box1').setAttribute('style', 'background-color:yellow');

⚠️ 마져 작성⚠️

HTML 요소의 속성값 변경

해당 태그의 속성값을 변경할 수 있습니다. 이 경우 원래 HTML 소스가 바뀌는 것이 아니라 동적으로 내용만 변경되고 브라우저에 반영됩니다.

element.setAttribute(attribute, value)
element.getAttribute(attribute, value)
element.removeAttribute(attribute)

         - getAttribute : 요소의 속성 가져옴

               ex) document.getElementById('box1').setAttribute('style', 'background-color:yellow');

 

    4) 요소 스타일 변경하기

         - style 객체 : css 스타일을 가져온다

             ➡️ paragraph.style.color = 'red';

                   paragraph.style.fontsize = '20px';

 

    5) 요소 추가하기 : ~~.appendChild(target) - target요소를 ~~의 자식으로 위치

         - createElement

         - appendChild

         - append : 여러개의 노드를 한번에 + 텍스트도 자식으로 포함 가

 

    6) 요소 삭제하기 : ~~.removeChild(target) - ~~의 자식 요소인 target을 제거

         - removeChild

 

    7) 요소 대체하기

         - replaceChild

 

    8) 요소 복제하기

         - cloneNode

 

    9) data 속성 ⚠️찾아보고 다시 공부

         i) 정의하기 : html 요소에 정의

            ex) <div id="user" data-user-id="123" data-role="admin">John Doe</div>

         ii) 속성 접근하기 : JavaScript 사용 

            - dataset : 

            - getAttribute

 

 

4. 이벤트 흐름 : 이벤트 대상 찾기 -> 캡처링 단계 -> 이벤트 전파  ⚠️찾아보고 다시 공부

    1) 이벤트 : 이벤트 리스너가 없어도 마치 리스너가 있는 것 처럼 사용 가능

         - target
         - currentTarget

---

web api? dom api?

다양한 기능을 제공해 웹을 동적으로 만들어 (이벤트들)