JS 전문가되기 //Day09

남형진·2020년 12월 26일
0

JS 전문가되기

목록 보기
9/13
post-thumbnail

🙌들어가기 앞서...

JS 전문가되기 제목의 포스팅의 목적은 필자가 공부한 것을 복습하는데 그리고 약점을 보완하는데 있습니다.

1. DOM

DOM: Document Object Model
js 에서 html 편집을 가능하게 해주는 interface 이다.

DOM은 문서의 구조화된 표현을 제공하여 프로그래밍 언어(js)가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
(WEB 을 스크립트 또는 프로그래밍 언어에서 사용될 수 있게 연결해주는 역할)

한마디로 WEB 을 document 라고 생각하면 편하다. 😄

DOM 은 객체 트리 구조를 가지고 있는데,
WINDOW => DOCUMENT => NODE => ELEMENT 순으로 관계를 가진다.


위 그림은 DOM 의 구조를 잘 설명한다.

1-1. document 객체의 속성, 메소드

실질적으로 우리는 어떻게 DOM 을 이용할 수 있을까?
기본적으로 사용가능한, 유용한 속성과 메소드에 대해 알아봐서
DOM 을 JS로 조작하여 HTML, CSS 를 개발해보자

* createElement - CREATE
* querySelector, querySelectorAll - READ
* textContent, id, classList, setAttribute - UPDATE
* remove, removeChild, textContent = "" - DELETE
* appendChild -APPEND
* createDocumentFragment - ?

위 메소드들은 기본적이고, 유용한 속성, 메소드들이다. 꼭 알아두자!

2. node vs element


node 와 element 의 차이는 무엇일까??

2-1 node

node: DOM API 상에 존재하는 모든 것
한마디로 node 는 element 의 상위개념이다.

2-2 element

element: one specific type of node
한미디로 element 는 node 의 하위개념이다.

3. HTML Event Attributes

* 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

profile
세상을 바꾸는 한줄의 코드를 작성하는 개발자

0개의 댓글