오늘날 프론트엔드 개발 환경은 급격히 진화하고 있고, 모던 브라우저들은 이미 충분히 많은 DOM/BOM API들을 구현했습니다. 우리는 jQuery를 DOM 처리나 이벤트를 위해 처음부터 배울 필요가 없습니다. React, Angular, Vue같은 프론트엔드 라이브러리들이 주도권을 차지하는 동안 DOM을 바로 처리하는 것은 안티패턴이 되었고, jQuery의 중요성은 줄어들었습니다. 이 프로젝트는 대부분의 jQuery 메소드의 대안을 IE 10 이상을 지원하는 네이티브 구현으로 소개합니다.
- 한국어
- 简体中文
- Bahasa Melayu
- Bahasa Indonesia
- Português(PT-BR)
- Tiếng Việt Nam
- Español
- Русский
- Кыргызча
- Türkçe
- Italiano
- Français
- 日本語
평범한 class, id, attribute같은 selecotor는 document.querySelector나 document.querySelectorAll으로 대체할 수 있습니다.
document.querySelector는 처음 매칭된 엘리먼트를 반환합니다.document.querySelectorAll는 모든 매칭된 엘리먼트를 NodeList로 반환합니다.[].slice.call을 사용해서 Array로 변환할 수 있습니다.- 만약 매칭된 엘리멘트가 없으면 jQuery는
[]를 반환하지만 DOM API는null을 반환합니다. Null Pointer Exception에 주의하세요.
안내:
document.querySelector와document.querySelectorAll는 꽤 느립니다,getElementById나document.getElementsByClassName,document.getElementsByTagName를 사용하면 퍼포먼스가 향상을 기대할 수 있습니다.
-
1.0 selector로 찾기
// jQuery $('selector'); // Native document.querySelectorAll('selector');
-
1.1 class로 찾기
// jQuery $('.class'); // Native document.querySelectorAll('.class'); // or document.getElementsByClassName('class');
-
1.2 id로 찾기
// jQuery $('#id'); // Native document.querySelector('#id'); // or document.getElementById('id');
-
1.3 속성(attribute)으로 찾기
// jQuery $('a[target=_blank]'); // Native document.querySelectorAll('a[target=_blank]');
-
1.4 자식에서 찾기
// jQuery $el.find('li'); // Native el.querySelectorAll('li');
-
1.5 형제/이전/다음 엘리먼트 찾기
-
형제 엘리먼트
// jQuery $el.siblings(); // Native [].filter.call(el.parentNode.children, function(child) { return child !== el; });
-
이전 엘리먼트
// jQuery $el.prev(); // Native el.previousElementSibling;
-
다음 엘리먼트
// jQuery $el.next(); // Native el.nextElementSibling;
-
-
1.6 Closest
현재 엘리먼트부터 document로 이동하면서 주어진 셀렉터와 일치하는 가장 가까운 엘리먼트를 반환합니다.
// jQuery $el.closest(selector); // Native - 최신 브라우저만, IE는 미지원 el.closest(selector); // Native - IE10 이상 function closest(el, selector) { const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; while (el) { if (matchesSelector.call(el, selector)) { return el; } else { el = el.parentElement; } } return null; }
-
1.7 Parents Until
주어진 셀렉터에 매칭되는 엘리먼트를 찾기까지 부모 태그들을 위로 올라가며 탐색하여 저장해두었다가 DOM 노드 또는 jQuery object로 반환합니다.
// jQuery $el.parentsUntil(selector, filter); // Native function parentsUntil(el, selector, filter) { const result = []; const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; // match start from parent el = el.parentElement; while (el && !matchesSelector.call(el, selector)) { if (!filter) { result.push(el); } else { if (matchesSelector.call(el, filter)) { result.push(el); } } el = el.parentElement; } return result; }
-
1.8 Form
-
Input/Textarea
// jQuery $('#my-input').val(); // Native document.querySelector('#my-input').value;
-
e.currentTarget이
.radio의 몇번째인지 구하기// jQuery $(e.currentTarget).index('.radio'); // Native [].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
-
-
1.9 Iframe Contents
$('iframe').contents()는 iframe에 한정해서contentDocument를 반환합니다.-
Iframe contents
// jQuery $iframe.contents(); // Native iframe.contentDocument;
-
Iframe에서 찾기
// jQuery $iframe.contents().find('.css'); // Native iframe.contentDocument.querySelectorAll('.css');
-
-
1.10 body 얻기
// jQuery $('body'); // Native document.body;
-
1.11 속성 얻기 및 설정
-
속성 얻기
// jQuery $el.attr('foo'); // Native el.getAttribute('foo');
-
속성 설정하기
// jQuery, DOM 변형 없이 메모리에서 작동됩니다. $el.attr('foo', 'bar'); // Native el.setAttribute('foo', 'bar');
-
data-속성 얻기// jQuery $el.data('foo'); // Native (`getAttribute` 사용) el.getAttribute('data-foo'); // Native (IE 11 이상의 지원만 필요하다면 `dataset`을 사용) el.dataset['foo'];
-
-
2.1 CSS
-
style값 얻기
// jQuery $el.css("color"); // Native // NOTE: 알려진 버그로, style값이 'auto'이면 'auto'를 반환합니다. const win = el.ownerDocument.defaultView; // null은 가상 스타일은 반환하지 않음을 의미합니다. win.getComputedStyle(el, null).color;
-
style값 설정하기
// jQuery $el.css({ color: "#ff0011" }); // Native el.style.color = '#ff0011';
-
Style값들을 동시에 얻거나 설정하기
만약 한번에 여러 style값을 바꾸고 싶다면 oui-dom-utils 패키지의 setStyles를 사용해보세요.
-
class 추가하기
// jQuery $el.addClass(className); // Native el.classList.add(className);
-
class 제거하기
// jQuery $el.removeClass(className); // Native el.classList.remove(className);
-
class를 포함하고 있는지 검사하기
// jQuery $el.hasClass(className); // Native el.classList.contains(className);
-
class 토글하기
// jQuery $el.toggleClass(className); // Native el.classList.toggle(className);
-
-
2.2 폭과 높이
폭과 높이는 이론상 동일합니다. 높이로 예를 들겠습니다.
-
Window의 높이
// window 높이 $(window).height(); // jQuery처럼 스크롤바를 제외하기 window.document.documentElement.clientHeight; // 스크롤바 포함 window.innerHeight;
-
문서 높이
// jQuery $(document).height(); // Native document.documentElement.scrollHeight;
-
Element 높이
// jQuery $el.height(); // Native function getHeight(el) { const styles = window.getComputedStyles(el); const height = el.offsetHeight; const borderTopWidth = parseFloat(styles.borderTopWidth); const borderBottomWidth = parseFloat(styles.borderBottomWidth); const paddingTop = parseFloat(styles.paddingTop); const paddingBottom = parseFloat(styles.paddingBottom); return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom; } // 정수로 정확하게（`border-box`일 때 이 값은 `height`이고, `content-box`일 때, 이 값은 `height + padding + border`） el.clientHeight; // 실수로 정확하게（`border-box`일 때 이 값은 `height`이고, `content-box`일 때, 이 값은 `height + padding + border`） el.getBoundingClientRect().height;
-
-
2.3 Position & Offset
-
Position
// jQuery $el.position(); // Native { left: el.offsetLeft, top: el.offsetTop }
-
Offset
// jQuery $el.offset(); // Native function getOffset (el) { const box = el.getBoundingClientRect(); return { top: box.top + window.pageYOffset - document.documentElement.clientTop, left: box.left + window.pageXOffset - document.documentElement.clientLeft } }
-
-
2.4 Scroll Top
// jQuery $(window).scrollTop(); // Native (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
-
3.1 제거
// jQuery $el.remove(); // Native el.parentNode.removeChild(el);
-
3.2 Text
-
text 가져오기
// jQuery $el.text(); // Native el.textContent;
-
text 설정하기
// jQuery $el.text(string); // Native el.textContent = string;
-
-
3.3 HTML
-
HTML 가져오기
// jQuery $el.html(); // Native el.innerHTML;
-
HTML 설정하기
// jQuery $el.html(htmlString); // Native el.innerHTML = htmlString;
-
-
3.4 해당 엘리먼트의 자식들 뒤에 넣기(Append)
부모 엘리먼트의 마지막 자식으로 엘리먼트를 추가합니다.
// jQuery $el.append("<div id='container'>hello</div>"); // Native el.insertAdjacentHTML("beforeend","<div id='container'>hello</div>");
-
3.5 해당 엘리먼트의 자식들 앞에 넣기(Prepend)
// jQuery $el.prepend("<div id='container'>hello</div>"); // Native
el.insertAdjacentHTML("afterbegin","
- [3.6](#3.6) <a name='3.6'></a> 해당 엘리먼트 앞에 넣기(insertBefore)
새 노드를 선택한 엘리먼트 앞에 넣습니다.
```js
// jQuery
$newEl.insertBefore(queryString);
// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target);
-
3.7 해당 엘리먼트 뒤에 넣기(insertAfter)
새 노드를 선택한 엘리먼트 뒤에 넣습니다.
// jQuery $newEl.insertAfter(queryString); // Native const target = document.querySelector(queryString); target.parentNode.insertBefore(newEl, target.nextSibling);
-
3.8 is
query selector와 일치하면
true를 반환합니다.// jQuery $el.is(selector); // Native el.matches(selector);
-
3.9 clone
엘리먼트의 복제본을 만듭니다.
// jQuery $el.clone(); // Native el.cloneNode(); // Deep clone은 파라미터를 `true` 로 설정하세요.
-
3.10 empty
모든 자식 노드를 제거합니다.
// jQuery $el.empty(); // Native el.innerHTML = '';
-
3.11 wrap
각각의 엘리먼트를 주어진 HTML 구조로 감쌉니다.
// jQuery $('.inner').wrap('<div class="wrapper"></div>'); // Native [].slice.call(document.querySelectorAll('.inner')).forEach(function(el){ var wrapper = document.createElement('div'); wrapper.className = 'wrapper'; el.parentNode.insertBefore(wrapper, el); el.parentNode.removeChild(el); wrapper.appendChild(el); });
-
3.12 unwrap
DOM에서 해당 엘리먼트를 감싸고 있는 부모 요소를 없앱니다.
// jQuery $('.inner').unwrap(); // Native [].slice.call(document.querySelectorAll('.inner')).forEach(function(el){ [].slice.call(el.childNodes).forEach(function(child){ el.parentNode.insertBefore(child, el); }); el.parentNode.removeChild(el); });
-
3.13 replaceWith
각각의 엘리먼트를 주어진 새 엘리먼트로 교체합니다.
// jQuery $('.inner').replaceWith('<div class="outer"></div>'); // Native [].slice.call(document.querySelectorAll('.inner')).forEach(function(el){ var outer = document.createElement('div'); outer.className = 'outer'; el.parentNode.insertBefore(outer, el); el.parentNode.removeChild(el); });
-
Fetch API 는 XMLHttpRequest를 ajax로 대체하는 새로운 표준 입니다. Chrome과 Firefox에서 작동하며, polyfill을 이용해서 구형 브라우저에서 작동되도록 만들 수도 있습니다.
IE9 이상에서 지원하는 github/fetch 혹은 IE8 이상에서 지원하는 fetch-ie8, JSONP 요청을 만드는 fetch-jsonp를 이용해보세요.
namespace와 delegation을 포함해서 완전히 갈아 엎길 원하시면 https://github.com/oneuijs/oui-dom-events 를 고려해보세요.
-
5.1 이벤트 Bind 걸기
// jQuery $el.on(eventName, eventHandler); // Native el.addEventListener(eventName, eventHandler);
-
5.2 이벤트 Bind 풀기
// jQuery $el.off(eventName, eventHandler); // Native el.removeEventListener(eventName, eventHandler);
-
5.3 이벤트 발생시키기(Trigger)
// jQuery $(el).trigger('custom-event', {key1: 'data'}); // Native if (window.CustomEvent) { const event = new CustomEvent('custom-event', {detail: {key1: 'data'}}); } else { const event = document.createEvent('CustomEvent'); event.initCustomEvent('custom-event', true, true, {key1: 'data'}); } el.dispatchEvent(event);
-
6.1 기본 유틸리티
- isArray
주어진 인자가 배열인지 검사합니다.
// jQuery $.isArray(array); // Native Array.isArray(array);
- isWindow
주어진 인자가 window 객체인지 검사합니다.
// jQuery $.isWindow(obj); // Native function isWindow(obj) { return obj != null && obj === obj.window; }
- inArray
배열에서 해당 값이 있는지 검색하고 해당 값의 순번을 반환합니다. (검색 결과가 없을 경우 -1을 반환)
// jQuery $.inArray(item, array); // Native Array.indexOf(item);
- isNumeric
주어진 인자가 숫자인지 검사합니다. 검사에
typeof를 사용합니다. 필요하면 라이브러리를 사용하세요. 가끔typeof는 정확하지 않습니다.// jQuery $.isNumeric(item); // Native function isNumeric(item) { return typeof value === 'number'; }
- isFunction
주어진 인자가 JavaScript 함수 객체인지 검사합니다.
// jQuery $.isFunction(item); // Native function isFunction(item) { return typeof value === 'function'; }
- isEmptyObject
객체가 비어있는지 검사합니다. Check to see if an object is empty (열거할 수 있는 프로퍼티가 없는지 검사).
// jQuery $.isEmptyObject(obj); // Native function isEmptyObject(obj) { for (let key in obj) { return false; } return true; }
- isPlainObject
주어진 객체가 평범한 객체인지 검사합니다. (“{}”이나 “new Object”으로 생성되었는지 검사)
// jQuery $.isPlainObject(obj); // Native function isPlainObject(obj) { if (typeof (obj) !== 'object' || obj.nodeType || obj != null && obj === obj.window) { return false; } if (obj.constructor && !{}.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) { return false; } return true; }
- extend
두 개 이상의 객체를 첫 번째 객체로 합칩니다. object.assign 은 ES6 API입니다. polyfill 을 사용할 수 있습니다.
// jQuery $.extend({}, defaultOpts, opts); // Native Object.assign({}, defaultOpts, opts);
- trim
문자열 앞뒤에 붙은 공백문자를 제거합니다.
// jQuery $.trim(string); // Native string.trim();
- map
배열이나 객체 내의 모든 요소를 새 배열에 변환하여 저장합니다.
// jQuery $.map(array, function(value, index) { }); // Native array.map(function(value, index) { });
- each
객체나 함수 모두에 매끄럽게 사용할 수 있는 포괄적인 용도의 반복 함수입니다.
// jQuery $.each(array, function(value, index) { }); // Native array.forEach(function(value, index) { });
- grep
배열에서 필터 함수를 만족하는 엘리먼트를 찾습니다.
// jQuery $.grep(array, function(value, index) { }); // Native array.filter(function(value, index) { });
- type
객체의 JavaScript 내부 [[Class]]를 검사합니다.
// jQuery $.type(obj); // Native Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
- merge
두 배열을 첫 번째 배열로 합칩니다.
// jQuery $.merge(array1, array2); // Native // concat은 중복된 요소를 제거해주진 않습니다. function merge() { return Array.prototype.concat.apply([], arguments) }
- now
현재 시간을 숫자로 반환합니다.
// jQuery $.now(); // Native Date.now();
- proxy
함수를 받아서 언제나 특정 context를 갖는 새 함수를 반환합니다.
// jQuery $.proxy(fn, context); // Native fn.bind(context);
- makeArray
array-like 한 객체를 진짜 JavaScript 배열로 변환합니다.
// jQuery $.makeArray(array); // Native [].slice.call(array);
-
6.2 Contains
주어진 엘리먼트가 주어진 또 다른 엘리먼트를 자손으로 포함하는지 검사합니다.
// jQuery $.contains(el, child); // Native el !== child && el.contains(child);
-
6.3 Globaleval
JavaScript 코드를 전역적으로 실행합니다.
// jQuery $.globaleval(code); // Native function Globaleval(code) { let script = document.createElement('script'); script.text = code; document.head.appendChild(script).parentNode.removeChild(script); } // eval 함수를 쓸 수도 있습니다. 하지만 $.Globaleval 의 context가 전역인 데 반해 eval 함수의 context 는 실행 영역입니다. eval(code);
-
6.4 parse
- parseHTML
문자열을 DOM 노드의 배열로 변환합니다.
// jQuery $.parseHTML(htmlString); // Native function parseHTML(string) { const tmp = document.implementation.createHTMLDocument(); tmp.body.innerHTML = string; return tmp.body.children; }
- parseJSON
정상적인 JSON 문자열을 받아서 JavaScript 값을 받습니다.
// jQuery $.parseJSON(str); // Native JSON.parse(str);
Promise는 비동기적인 작업의 결과를 표현합니다. jQuery는 자체적인 promise 처리를 가지고 있습니다. 네이티브 JavaScript엔 Promises/A+ 명세에 맞는 얇고 작은 API를 구현되어 있습니다.
-
7.1 done, fail, always
done은 promise가 처리되었을 때,fail은 promise가 거절되었을 때,always는 promise가 어떻게 되었건 실행됩니다.// jQuery $promise.done(doneCallback).fail(failCallback).always(alwaysCallback) // Native promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
-
7.2 when
when은 여러 개의 promise들을 처리할 때 사용됩니다. 이것은 모든 promise가 처리되었을 때 resolve하고 하나라도 거절되면 reject합니다.// jQuery $.when($promise1, $promise2).done((promise1Result, promise2Result) => {}) // Native Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
-
7.3 Deferred
Deferred는 promise를 생성하는 방법입니다.
// jQuery function asyncFunc() { var d = new $.Deferred(); setTimeout(function() { if(true) { d.resolve('some_value_compute_asynchronously'); } else { d.reject('failed'); } }, 1000); return d.promise(); } // Native function asyncFunc() { return new Promise((resolve, reject) => { setTimeout(function() { if (true) { resolve('some_value_compute_asynchronously'); } else { reject('failed'); } }, 1000); }); } // Deferred way function defer() { let resolve, reject; let promise = new Promise(function() { resolve = arguments[0]; reject = arguments[1]; }); return { resolve, reject, promise }; } function asyncFunc() { var d = defer(); setTimeout(function() { if(true) { d.resolve('some_value_compute_asynchronously'); } else { d.reject('failed'); } }, 1000); return d.promise; }
-
8.1 Show & Hide
// jQuery $el.show(); $el.hide(); // Native // show 메소드에 대한 더 자세한 정보를 보고 싶으면 https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363 를 참고하세요 el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block'; el.style.display = 'none';
-
8.2 Toggle
엘리먼트를 출력하거나 숨깁니다.
// jQuery $el.toggle(); // Native if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') { el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block'; } else { el.style.display = 'none'; }
-
8.3 FadeIn & FadeOut
// jQuery $el.fadeIn(3000); $el.fadeOut(3000); // Native el.style.transition = 'opacity 3s'; // fadeIn el.style.opacity = '1'; // fadeOut el.style.opacity = '0';
-
8.4 FadeTo
엘리먼트의 투명도(opacity)를 조정합니다.
// jQuery $el.fadeTo('slow',0.15); // Native el.style.transition = 'opacity 3s'; // 'slow'가 3초라고 가정합니다. el.style.opacity = '0.15';
-
8.5 FadeToggle
엘리먼트를 투명도를 조절해서 보여주거나 숨깁니다.
// jQuery $el.fadeToggle(); // Native el.style.transition = 'opacity 3s'; let { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null); if (opacity === '1') { el.style.opacity = '0'; } else { el.style.opacity = '1'; }
-
8.6 SlideUp & SlideDown
// jQuery $el.slideUp(); $el.slideDown(); // Native let originHeight = '100px'; el.style.transition = 'height 3s'; // slideUp el.style.height = '0px'; // slideDown el.style.height = originHeight;
-
8.7 SlideToggle
슬라이딩 모션과 함께 엘리먼트를 보이거나 숨깁니다.
// jQuery $el.slideToggle(); // Native let originHeight = '100px'; el.style.transition = 'height 3s'; let { height } = el.ownerDocument.defaultView.getComputedStyle(el, null); if (parseInt(height, 10) === 0) { el.style.height = originHeight; } else { el.style.height = '0px'; }
-
8.8 Animate
자체적으로 CSS 프로퍼티들을 에니메이션합니다.
// jQuery $el.animate({params}, speed); // Native el.style.transition = 'all' + speed; Object.keys(params).forEach(function(key) { el.style[key] = params[key]; })
- You Might Not Need jQuery - 일반 자바스크립트로 공통이벤트, 엘리먼트, ajax 등을 다루는 방법 예제.
- npm-dom 과 webmodules - 개별 DOM모듈을 NPM에서 찾을 수 있습니다.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
MIT