JS 전문가되기 제목의 포스팅의 목적은 필자가 공부한 것을 복습하는데 그리고 약점을 보완하는데 있습니다.
DOM: Document Object Model
js 에서 html 편집을 가능하게 해주는 interface 이다.
DOM은 문서의 구조화된 표현을 제공하여 프로그래밍 언어(js)가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
(WEB 을 스크립트 또는 프로그래밍 언어에서 사용될 수 있게 연결해주는 역할)
한마디로 WEB 을 document 라고 생각하면 편하다. 😄
DOM 은 객체 트리 구조를 가지고 있는데,
WINDOW => DOCUMENT => NODE => ELEMENT 순으로 관계를 가진다.
위 그림은 DOM 의 구조를 잘 설명한다.
실질적으로 우리는 어떻게 DOM 을 이용할 수 있을까?
기본적으로 사용가능한, 유용한 속성과 메소드에 대해 알아봐서
DOM 을 JS로 조작하여 HTML, CSS 를 개발해보자
* createElement - CREATE
* querySelector, querySelectorAll - READ
* textContent, id, classList, setAttribute - UPDATE
* remove, removeChild, textContent = "" - DELETE
* appendChild -APPEND
* createDocumentFragment - ?
위 메소드들은 기본적이고, 유용한 속성, 메소드들이다. 꼭 알아두자!
node 와 element 의 차이는 무엇일까??
node: DOM API 상에 존재하는 모든 것
한마디로 node 는 element 의 상위개념이다.
element: one specific type of node
한미디로 element 는 node 의 하위개념이다.
* onkeydown, onkeypress, onkeyup - KEYBOARD * onclick, ondbclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onwheel - MOUSE * onload, onunload - WEB
이 밖에도 수많은 이벤트 속성이 있다.
사용예시)
* Btn.onclick = function () {alert("Hello World!")};
* Btn.addEventListener("click", function () {alert("Hello World!")});
두 줄의 코드는 같은 결과를 출력한다. 작성할 때 'on' 붙임 여부를 조심하자
// 20201227