jQuery 코드 순수 자바스크립트로 마이그레이션 하기

업무할 때는 편리함때문에 jQuery를 많이 이용한다. 같은 DOM 조작이지만 언제까지나 제이쿼리만 쓸 수 없다는 생각이 들었고, 자주 이용하는 jQuery 문법을 순수 자바스크립트로 마이그레이션을 진행해 봤다. 진행한 프로젝트는 개인 프로젝트이고 일이 바쁘니까 조금씩 조금씩 걷어내는 중.

걷어내면서 사용한 코드들을 여기에 정리해 본다.

 

---

 

getElementById(), querySelector(), querySelectorAll()

// jquery
$('#targetId');
$('.targetClass');

// js
document.getElementById('targetId');
document.querySelector('.targetClass');
document.querySelectorAll('.targetClass');

선택자 문법들이다. querySelectorAll()은 해당하는 모든 DOM요소들을 찾는다.

 

 

addEventListener

// jquery
$('#button').on('click', function() {
    // do something...
});

// js
const button = document.getElementById('button');
myButton.addEventListener('click', function() {
    // do something...
});

이벤트를 등록할 때 쓰인다. 

 

textContent(), innerHTML()

// jquery
$('#target').text('Updated Text');
$('#target').html('<span>Updated HTML</span>');

// js
const targetElement = document.getElementById('target');
targetElement.textContent = 'Updated Text';
targetElement.innerHTML = '<span>Updated HTML</span>';

HTML을 변경하거나 텍스트 변경을 할 때 쓰인다.

 

classList.add(), classList.remove(), classList.toggle()

// jquery
$('#target').addClass('newClass');
$('#target').removeClass('oldClass');
$('#target').toggleClass('toggleClass');

// js
const target = document.getElementById('target');
target.classList.add('newClass');
target.classList.remove('oldClass');
target.classList.toggle('toggleClass');

클래스를 조작하기 위한 문법이다. DOM 요소의 classList로 조작이 가능하다.

 

getAttribute(), setAttribute()

// jquery
const placeholder = $('#target').attr('placeholder'); // get
$('#target').attr('placeholder', 'YYYY-MM-DD'); // set

// js
const target = document.getElementById('target');
const placeholder = target.getAttribute('placeholder'); // get
target.setAttribute('placeholder', 'YYYY-MM-DD'); // set

속성을 조작할 수 있는 문법이다. 

 

 

style.[option]

// jquery
$('#targetElement').css('backgroundColor', 'red');

// js
const targetElement = document.getElementById('targetElement');
targetElement.style.backgroundColor = 'red';

CSS 스타일을 변경할 수 있다. 조작시에는 기존 css 문법에서 파스칼케이스로 변경해야한다.

 

insertAdjacentHTML(), remove()

// jquery
$('#targetElement').append('<div>Appended</div>');
$('#targetElement').prepend('<div>Prepended</div>');
$('#targetElement').remove();

// js
const targetElement = document.getElementById('targetElement');
targetElement.insertAdjacentHTML('beforeend', '<div>Appended</div>');  // append
targetElement.insertAdjacentHTML('afterbegin', '<div>Prepended</div>'); // prepend
targetElement.remove();

요소를 제거하는 remove 문법은 똑같다.

append와 prepend의 경우는 insertAdjacentHTML을 써서 앞뒤 원하는 곳에 요소를 추가할 수 있다.

 

forEach()

// jquery
$('input').each(function() {
    // do something...
});

// js
const targets = document.querySelectorAll('input');
targets.forEach(element => {
    // do something...
});

반복문은 each를 forEach로 대체한다.

 

문법은 비슷한 부분이 많다. 이 부분들만 가지고도 웬만한 기능은 다 이용할 수 있다.

다만 jquery 객체에 js 문법을 써서 요소를 조작할 수는 없으니 주의하자.