돔(DOM)에서 데이터 얻기

(DOM) 선택하기

document.getElementById("app")
document.querySelector("div").dataset.productId

querySelector() 함수로 얻은 HTMLElement에는 dataset이라는 객체가 있고,
이걸 통해 data 속성 값에 접근할 수 있다.
HTML 코드에서는 케밥 케이스로 표기하고 JS코드에서는 카멜 케이스라는 것이 다르다.
당연히 data 속성 값을 변경할 수도 있다.

돔(DOM)에서 데이터 얻기

document.querySelector("div").dataset.productId = "G456"

하지만 dataset은 IE 11 미만에서는 지원하지 않는다. data 속성 값을 다루기 위해서는
일반 속성에 접근하기 위한 함수 getAttribute()와 setAttribute() 함수를 사용해야 한다.

document.querySelector("div").getAttribute("data-product-id") // 'G123'

이벤트

document.addEventListener("DOMContentLoaded", () => {

HTML을 파싱한 뒤 DOM 객체를 생성이 완료되면 'DOMContentLoaded' 이벤트가 발생한다.
우리는 이 이벤트에 리스너를 추가하는 방식으로 똑같이 구현할 수 있다.

document.querySelector("a").addEventListener("click", evt => {

//이벤트 처리 ...

이벤트 방출(emit)

document.querySelector("a").click()

click() 함수를 사용한다.
한편 커스텀 이벤트는 어떻게 할까?

const evt = new CustomEvent("@click")
document.dispatchEvent(evt)

CustomEvent 클래스로 이벤트 객체를 만들고 document.dispatchEvent() 함수로 이벤트를 방출한다.
이벤트와 더불어 데이터도 넘겨줄 수 있다.

const evt = new CustomEvent("@click", { detail : "some data"})
document.dispatchEvent(evt)

CustomEvent 생성시 두번째 인자로 detail 키를 갖는 객체만 넘겨주면
수신하는 측에서는 이 값을 사용할 수 있다.
문자열 뿐만 아니라 객체도 가능하다.

스타일

document.querySelect("#foo").classList.add("active")

HTMLElement는 classList라는 DOMTokenList를 반환한다.
이것은 클래스를 추가하는 add()함수 뿐만 아니라 remove(), toggle(), contains()
같은 유용한 메소드를 제공한다.

문자열 변경

document.querySelector("#foo").innerHTML = "Hello Chris"

비동기 요청

const req = new XMLHttpRequest()
req.open("GET", "/resource", true)
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200) success()
else faile()
}
}
req.send(null)

XMLHttpRequest 객체를 직접 사용하면 가능하다.
GET, POST 뿐만 아니라 파일 업로드까지.

호완을 위해 라이브러리를 사용하는 편이다.
제이쿼리의 ajax(), vue.JS에서 추천하는 axios

자바스크립트

DOM script 뿐만아니라 자바스크립트 언어에 대해서도 알아야한다.
특히 컬렉션을 다루는 경우 제이쿼리위 유틸리티 함수를 사용했다면,
ES5부터 지원하는 컬렉션 함수는 쉽게 이해핼 수 있을 것이다.

일단 엘리번트 배열을 순회할떄 쓰는 each() 함수를 사용한다.

Array.from(document.querySelectorAll("li").forEach(li => {}))

객체 메소드에서 두 객체를 합칠때(merge) 방법이다.
Object.assign() 함수를 이용해 합친 새로운 객체를 만들어낼 수 있다.

const obj3 = Object.assign({}, obj1, obj2)

결론

지금까지 프론트엔드 개발에 제이쿼리는 필수였다.
크로스브라우져 이슈, 특히나 버전별 IE를 지원하는 것은 개발자에게 너무도 편리한 기능이다.

하지만 기술은 계속 변하고 앵귤러 리엑트 등 최신 UI 프레임워크를 사용할 때는
제이쿼리와는 다른 방법으로 접근한다.
es5, es6에서 제공하는 자바스크립트 문법으로 대체해서 사용하고,
까다로운 UI 작업일 경우는 상대적으로 무거운 제이쿼리보다는
직접 DOM 스트립트를 이용하면 가볍게 구현할 수 있다.

출처 : https://jeonghwan-kim.github.io/2018/01/25/before-jquery.html