jQuery API를 javascript로 바꾸기

<Selector>

// jQuery
$('.selector');
$('#selector');
$('div.selector').find('.btn');

// javascript
document.getElementsByClassName('selector');
document.getElementById('selector');
document.querySelector('.selector').querySelector('li');

<Attribute>

// jQuery
$('[data-foo-bar="someval"]');

// javascript
document.querySelectorAll('[data-foo-bar="someval"]');

<Pseudo-class>

// jQuery
$('#myForm:invalid');

// javascript
document.querySelectorAll('#myForm:invalid');

<Children>

// jQuery
$('#myParent').children();

// javascript
document.getElementById('myParent').children;

<Children only>

// jQuery
$('#myParent > [ng-click]');

// javascript
document.querySelector('#myParent > [ng-click]');

<Excluding Elements>

// jQuery
$('div:not(.ignore)');

// javascript
document.querySelectorAll('div:not(.ignore)');

<자바스크립트로 만든 선택자 함수>

// javascript
window.$ = function(selector) {
  var selectorType = 'querySelectorAll';

  if (selector.indexOf('#') === 0) {
    selectorType = 'getElementById';
    selector = selector.substr(1, selector.length);
  }

  return document[selectorType](selector);
};

//ex
$('div');

<.empty()>

// jQuery
$('div').empty();

// javascript
document.querySelector('div').innerHTML = '';

<.remove()>

// jQuery
$('div').remove();

// javascript
const div = document.querySelector('div');
div.parentNode.removeChild(div);

<.addClass(), .removeClass()>

// jQuery
$('div').addClass('hidden');
$('div').removeClass('hidden');

// javascript
const div = document.querySelector('div');
div.classList.add('hidden');
div.classList.remove('hidden');

<.hasClass()>

// jQuery
$('div').hasClass('hidden');

// javascript
document.querySelector('div').classList.containts('hidden');

<.html()>

// jQuery
$('div').html(string);

// javascript
document.querySelector('div').innerHTML = string;

<.text()>

// jQuery
$('div').text(); // get
$('div').text(string); // set

// javascript
const div = document.querySelector('div');
div.textContent; // get
div.textContent = 'string'; //set

<.$.each>

//jQuery
$.each(array, (i, item) => {
  // do something
});

// javascript
array.forEach((item, i) => {
  // do something
});

<.append()>

// jQuery
$('div').append(element);

// javascript
document.querySelector('div').append(element);
document.getElementById('parent').appendChild(document.getElementById('element'));

<.prepend()>

<!-- HTML -->
<div id="parent">
    <div id="orphan"></div> <!-- 조작 요소 -->
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>

<!-- jQuery -->
$('#parent').prepend($('#orphan'));

<!-- javascript -->
document.getElementById('parent').insertBefore(document.getElementById('orphan'), document.getElementById('c1'));

<.clone()>

// jQuery
$('div').clone();

// javascript
document.querySelector('div').cloneNode(true);

<DOM에서 데이터 얻기>

// jQuery
$('div').data('product-id');

// javascript
document.querySelector('div').dataset.productId; // IE11미만에서는 미지원
document.querySelector('div').getAttribute('data-product-id');

<Creating Elements>

// jQuery
$('<div></div>');

// javascript 
document.createElement('div');

<Inserting Elements After>

<!-- HTML -->
<div id="1"></div>
<div id="1.1"></div> <!-- 조작 요소 -->
<div id="2"></div>
<div id="3"></div>

<!-- jQuery -->
$('#1').after('<div id="1.1"></div>');

<!-- javascript --> 
document.getElementById('1').insertAdjacentElement('afterend', '<div id="1.1"></div>');

<Inserting Elements Before>

<!-- HTML -->
<div id="0.9"></div> <!-- 조작 요소 -->
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

<!-- jQuery -->
$('#1').before('<div id="0.9"></div>');

<!-- javascript -->
document.getElementById('1').insertAdjacentElement('beforebegin', '<div id="0.9"></div>');

<Inserting Elements As Children>

<!-- HTML -->
<div id="parent">
    <div id="newChild"></div> <!-- 조작 요소 -->
    <div id="oldChild"></div>
</div>

<!-- jQuery -->
$('#parent').prepend('<div id="newChild"></div>');

<!-- javascript -->
document.getElementById('parent').insertAdjacentElement('afterbegin', '<div id="newChild"></div>');

...

<!-- HTML -->
<div id="parent">
    <div id="oldChild"></div>
    <div id="newChild"></div> <!-- 조작 요소 -->
</div>

<!-- jQuery -->
$('#parent').append('<div id="newChild"></div>');

<!-- javascript -->
document.getElementById('parent').insertAdjacentElement('beforeend', '<div id="newChild"></div>');

<Adding/Removing/Changing Attributes>

// jQuery
$('#foo').attr('role', 'button'); // set
$('#foo').removeAttr('role'); // remove

// javascript 
document.getElementById('foo').setAttribute('role', 'button'); // set
document.getElementById('foo').removeAttribute('role'); // remove

<Adding/Updating Element Styles>

// jQuery
$('#note').css('fontWeight', 'bold');

// javascript 
document.getElementById('note').style.fontWeight = 'bold';

<다른점>

/* jQuery에서는 복수개의 DOM을 찾으면 코드 한줄로 모든 DOM에 관한 것을 함께 변경해주지만 javascript는 일일히 루프를 돌며 처리를 해줘야 한다. */

// jQuery
$('div').addClass('hidden');

// javascript
const divs = document.querySelector('div');
divs.forEach((div, index) => {
  div.classList.add('hidden');
});

 

계속 업데이트 진행중..

- 참고

https://qkraudghgh.github.io/javascript/2017/08/17/jquery-to-javascript.html

jQuery 탈출기

http://jeonghwan-kim.github.io/2018/01/25/before-jquery.html

jQuery 보다 먼저 알았으면 좋았을 것들

https://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/

DOM Manipulation – You Don't Need jQuery! – Free yourself from the chains of jQuery by embracing and understanding the modern We