Vanilla JS 순수 바닐라 - jQuery를 Javascript로 !

바닐라 자바스크립트 Vanilla JS?

바닐라 자바스크립트(Vanilla JS)란 프레임워크 또는

라이브러리가 적용되지 않은 순수한 자바스크립트를 뜻한다.

1. 선택자

<div id="app"></div>
<div class="container"></div>

// jQuery
$("#app");
$(".container");

// Jacascript
document.getElementById("app");
document.querySelector("#app");

document.getElementsByClassName("container");
document.querySelector(".container");
document.querySelectorAll(".container");

jQuery
.siblings() : 형제 요소 중 지정한 선택자 모두 선택
.next() : 다음 형제 요소 모두 선택
.nextAll() : 다음 형제 요소 모두 선택
.nextUntil() : 형제 요소 중 지정한 선택자에 해당하는 요소 바로 이전까지의 요소 모두 선택
.prev() : 이전에 위치한 형제 요소 선택
.prevAll() : 이전에 위치한 형제 요소 모두 선택
.prevUntil() : 형제 요소 중 지정한 선택자에 해당하는 요소 바로 다음까지의 요소 모두 선택

Javascript
parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫 번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드

2. data 속성 값

<div data-user-name="Vanilla">Hello</div>

// jQuery
$("div").data("user-name");

// Javascript
document.querySelector("div").dataset.userName;

3. Event

// jQuery
$(function() {

});

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

});

// jQuery
$(".btn").off().on("click", e => {

});

// Javascript
document.querySelector(".btn").addEventListener("click", e => {

});

// 다른곳에서 이벤트 방출(emit) - 똑같이 click();
$(".btn").click(); 
document.querySelector(".btn").click();

4. 배열

// jQuery
$("li").each( (idx, item) => {

});

// Javascript
Array.from(document.querySelectorAll("li")).forEach( (inx, item) => {

});

5. 비동기 요청

// jQuery
$.ajax({
    url: "./test.jsp",
    type: "GET",
    cache: false,
    dataType: "json",
    data: "",
    success: function(data){

    },
    error: function (request, status, error){        

    }
});


// Javascript
const req = new XMLHttpRequest();
req.open("GET", "/resource", true);
req.onreadystatechange = () => {
  if (req.readyState == 4) { 
        if (req.status == 200 || req.status == 201){
            console.log('success');
        }
        else {
            console.log('fail');
        }                    
    }
}
req.send(null);

// req.setRequestHeader("Content-Type", "application/json");            
// req.send(JSON.stringify(jsonData));