[JS] DOM, Event

DOM

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 

DOM은 문서의 구조화된 표현(structured representation)을 제공하며
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 
문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

DOM 은 nodes와 objects로 문서를 표현한다.
이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. - Mozilla

const $ = tag => document.querySelector(tag)
const $$ = tag => document.querySelectorAll(tag)

// 태그 하나 선택하기
const title = $('#title')
console.log(title) // <p id="title">JS</p>

console.log({ title })
// {title: p#title}
//     title: p#title   <<- DOM 의 속성이 나온다.
//     [[Prototype]]: Object

// 태그 css 변경하기
title.style.color = 'blue'
console.log({ title }) // title 객체안에 이와같이 나온다. => outerHTML: "<p id=\"title\" style=\"color: blue;\">JS</p>"

// 태그 여러개 선택하기
const items = $$('.item')
console.log(items) // NodeList(4) [li.item, li.item, li.item, li.item]

// 태그 지우기
const list = $('.list')

list.firstElementChild.remove()
list.lastElementChild.innerHTML = '<a>마지막 자식요소에 추가</a>'

 

Event

const $ = tag => document.querySelector(tag)
const $$ = tag => document.querySelectorAll(tag)

// 이벤트 핸들링
const btn = $('#btn')

// 모든 이벤트리스너 객체는 인자로 이벤트가 들어감
btn.addEventListener('click', e => console.log(e))

//클릭 후
//event 객체 출력

//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
//     isTrusted: true
//     altKey: false
//     altitudeAngle: 1.5707963267948966
//     azimuthAngle: 0
//     bubbles: true
//     button: 0
//     buttons: 0
//     cancelBubble: false
//     cancelable: true
//     clientX: 62
//     clientY: 67
//     composed: true
//     ctrlKey: false
//     currentTarget: null
//     defaultPrevented: false
//     detail: 1
//     eventPhase: 0
//     fromElement: null
//     height: 1
//     isPrimary: false
//     layerX: 62
//     layerY: 67
//     metaKey: false
//     movementX: 0
//     movementY: 0
//     offsetX: 53
//     offsetY: 10
//     pageX: 62
//     pageY: 67
//     path: (5) [button#btn, body, html, document, Window]
//     pointerId: 1
//     pointerType: "mouse"
//     pressure: 0
//     relatedTarget: null
//     returnValue: true
//     screenX: 69
//     screenY: 154
//     shiftKey: false
//     sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
//     srcElement: button#btn
//     tangentialPressure: 0
//     target: button#btn								<== 여기가 많이 쓰임
//     tiltX: 0
//     tiltY: 0
//     timeStamp: 1410.2000002861023
//     toElement: null
//     twist: 0
//     type: "click"
//     view: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
//     which: 1
//     width: 1
//     x: 62
//     y: 67
//     [[Prototype]]: PointerEvent

 

 

 

참고

1. DOM : https://poiemaweb.com/js-dom

2. Event : https://poiemaweb.com/js-event