...

์ ์ด์ฟผ๋ฆฌ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก
์ ์ด์ฟผ๋ฆฌ๋ ๋ฌด๊ฒ๊ณ ๋๋ฆฌ๋ค. ๊ทธ๋ฆฌ๊ณ ์์ฆ์๋ ๋ฆฌ์กํธ, ๋ทฐ๋ฅผ ์ฐ์ง ์ ์ด์ฟผ๋ฆฌ๋ ๋ ๊ฑฐ์ ํ๋ก์ ํธ์๋ง ์์กดํ๋ ๊ตฌ์๋์ ์ ๋ฌผ์ด ๋์ด ๋ฒ๋ ธ๋ค.
๊ทธ๋ ์ง๋ง ์ด์ ์๋ ์ ์ธ๊ณ์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋ ์น๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๋ ๋ช ์ฑ์ด ์์๋๋ฐ, ๊ทธ ์ด์ ๋ ๊ธฐ์กด ์๋ฐ์คํฌ๋ฆฝํธ์ ์๋ ์ฌ๋ฌ ํธ๋ฆฌํ ์ ์ฉ ์ ํ์๋ ๋ฉ์๋๋ฅผ ์ง์ํด ์ฃผ์๊ธฐ ๋๋ฌธ์ด๋ค. ๋ํ ์ ์ด์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํ ํ์ ์ฌ๋ฌ ์คํ์ผ๋ฆฌ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ซ์๋ ํ๋ชซํ๋ค. ํ์ง๋ง ํผํฌ๋จผ์ค ๋ฌธ์ ๋๋ฌธ์ ๊ฐ๋ฅํ ํ ์ ์ด์ฟผ๋ฆฌ ์ฌ์ฉ์ ์ง์ํด์ผ ๋์ง๋ง, DOM์ ๋ค๋ฃจ๋๋ฐ ์์ด ์๋์ ์ธ ํธ๋ฆฌํจ์ ํฌ๊ธฐํ๊ธฐ์ ๋๋ฌด ๋ฌ์ฝคํ๋ค.
๋ฐ๋ผ์ ์ด๋ฒ ํฌ์คํ ์์ ๋ช๊ฐ์ง ์์ฃผ ์ ์ฉ๋๋ ์ ์ด์ฟผ๋ฆฌ ๋ฉ์๋๋ฅผ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํด๋ณด์ ์น ์ฝ๋ฉ์ ์์ด ์ข ๋ ํธํ๊ฒ ์ด์ฉํด๋ณด๋๋ก ํ์.
You might not need jQuery
๊ธฐ์กด์ ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๋ฅผ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํ ์์ ๋ชจ์ ์ฌ์ดํธ ์ด๋ค. ์ฌ์ดํธ ์ด๋ฆ๋ง ๋ณด๋ฉด ์์์๋ฏ์ด ์ ์ด์ฟผ๋ฆฌ ์กด์ฌ๋ฅผ ์ ์ ์ผ๋ก ๋ถ์ธํ๊ณ ์๋ค. ๋ค๋ง ๋ณต์กํ ๋ฉ์๋๋ ๋ช๊ฐ์ง ๋น ์ ธ ์๋ ๋ฏ ํ๋ค.
You Might Not Need jQuery
Your search didn't match any comparisons.jquery๐$.getJSON('/my/url', function (data) {}); ie8+๐var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function () { if (this.readyState === 4) { if (this.
youmightnotneedjquery.com

์ ์ด์ฟผ๋ฆฌ ํจ์ โ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฆฌํฉํ ๋ง
์์ ์ฌ์ดํธ์์๋ ์๋ ์์ฃผ ์ฐ์ด๋ ์ ์ด์ฟผ๋ฆฌ ํจ์๋ฅผ ๋ฐ๋ก ๋ชจ์ ์ ๋ฆฌํด ๋ณด์๋ค.
has() ๊ตฌํํ๊ธฐ
has() ๋ฉ์๋๋ ํน์ ์์ ์์๋ฅผ ๊ฐ์ง๊ณ ์๋ ๋ถ๋ชจ ์์๋ค์ ์์ฃผ ๊ฐํธํ๊ฒ ์ป์์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.
$('.category_list > li').has('ul').addClass('preclusion');
์์ ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๋ฅผ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํ๋ฉด ์๋์ ๊ฐ๋ค. ํ์ฅ์ฑ์ ์ํด ์๋ฆฌ๋จผํธ ๋ฆฌ์คํธ์ธ NodeList์ ํ๋กํ ํ์ ๋ฉ์๋๋ก ๋ฑ๋กํด์ฃผ์๋ค.
NodeList.prototype.has = function(selector) {
// ํ์ฌ NodeList(this)๋ฅผ ๋ฐฐ์ด๋ก ๋ณํํ๊ณ filter ๊ณ ์ฐจํจ์๋ฅผ ๋๋ฉฐ,
// ํน์ selector๋ฅผ ์์์ผ๋ก ๊ฐ์ง๊ณ ์๋ ์์๋ง์ ๋ฐฐ์ด๋ก ์ฌ๊ตฌ์ฑํ๊ณ ๋ฆฌํด
return Array.from(this).filter(e => e.querySelector(selector))
}
document.querySelectorAll('.tt_category .category_list > li').has('ul').forEach(el => {
el.querySelector('a').classList.add('preclusion');
})
siblings() ๊ตฌํํ๊ธฐ
jquery์ ๋ฉ์๋์ค ํ๋์ธ siblings() ์ ์ ํํ ์์ ์์์์ ํ์ ์์๋ค์ ๋ชจ๋ ๊ณ ๋ฅด๋ ๋ฉ์๋์ด๋ค.
HTML ์์
<div>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
์ ์ด์ฟผ๋ฆฌ (Jquery)
$('#one').siblings();
์๋ฐ์คํฌ๋ฆฝํธ (Javascript)
const siblings = (el) => [...el.parentElement.children].filter(node => node != el);
const one = document.getElementById('one');
console.log(siblings(one)); // ํจ์์ ์๋ฆฌ๋จผํธ๋ฅผ ๋ฃ์ผ๋ฉด ๊ทธ ์๋ฆฌ๋จผํธ์ ํ์ ์์๋ค์ ๋ฐฐ์ด๋ก ๋ฐํ
// > (2) [div#two, div#three]
์๋ฆฌ๋ ๊ฐ๋จํ๋ค.
- ๋จผ์ ์ธ์๋ก ๋ฐ์ ์๋ฆฌ๋จผํธ์ ๋ถ๋ชจ์๋ฆฌ๋จผํธ(parentElement)๋ฅผ ๊ตฌํ๊ณ ์์(children)๋ค์ ๋ฐฐ์ด๋ก ๋ฐํํ๋ค.
- ๋ค๋ง ์ด๋์ ๋ฐฐ์ด์ ์ง์ง ๋ฐฐ์ด์ด ์๋ ์ ์ฌ๋ฐฐ์ด์ด๋ผ filter() ๊ณ ์ฐจํจ์๋ฅผ ์ฌ์ฉํ๊ธฐ์ํด์ ์ง์ง ๋ฐฐ์ด๋ก ๋ณํํด์ค์ผ ํ๋ค.
Array.from()์ ์ด์ฉํ๊ฑฐ๋ spread๋ฌธ๋ฒ์ผ๋ก ๋ณํํด์ฃผ๋ฉด ๋๋ค. - ๊ทธ๋ฆฌ๊ณ filter ๊ณ ์ฐจํจ์๋ก ๋ฐฐ์ด์ ํ๋์ฉ ์ํํ๋ฉด์ ์ธ์๋ก ๋ฐ์ ์๋ฆฌ๋จผํธ๊ฐ ์๋ ๊ฒ๋ค๋ง ๋ฐฐ์ด๋ก ๋ง๋ค์ด ๋ฐํํ๋ค.
- ์ฆ, ํ์ ์๋ฆฌ๋จผํธ๋ก ์ด๋ฃจ์ด์ง ๋ฐฐ์ด์ ๋ฐํํ๊ฒ ๋๋ค.
prevAll() ๊ตฌํํ๊ธฐ
jquery์ ๋ฉ์๋์ค ํ๋์ธ prevAll() ์ ์ ํํ ์์ ์์ ์ด์ ์ ํ์ ์์๋ค์ ๋ชจ๋ ๊ณ ๋ฅด๋ ๋ฉ์๋์ด๋ค.
์ ์ด์ฟผ๋ฆฌ (Jquery)
$('div').prevAll();
์๋ฐ์คํฌ๋ฆฝํธ (Javascript)
function prevAll(element) {
var result = []; // ๋ฐํํ ๋น ๋ฐฐ์ด์ ๋ง๋ค๊ณ
while (element = element.previousElementSibling) // previousElementSibling๊ฐ ์๋ค๋ฉด,
result.push(element); // ๋ฐฐ์ด์ ๋ฃ๋๋ค.
return result;
}
const prevSblings = prevAll(document.querySelector('div'));
replaceWith() ๊ตฌํํ๊ธฐ
jquery์ ๋ฉ์๋์ค ํ๋์ธ replaceWith() ์ ์ ํํ ์์ ์์๋ฅผ ๋งค๊ฐ๋ณ์๋ก ๋ฐ์์จ html ํ
์คํธ๋ก ๋ฐ๊ฟ์ฃผ๋ ๋ฉ์๋ ์ด๋ค.
๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ replaceWith ๋ฉ์๋๊ฐ ๋ฐ๋ก ์กด์ฌํ์ง๋ง, ์ด ๋ฉ์๋๋ ๋งค๊ฐ๋ณ์๋ก Node๋ง ๋ฐ์ ์ ์์ด, ์ ์ด์ฟผ๋ฆฌ ๊ฐ์ด ํ ์คํธ ํํ์ html๋ฅผ ๋ฐ์ผ๋ฉด ์๋์ ์ํ๋ค.
์ ์ด์ฟผ๋ฆฌ (Jquery)
$('div').replaceWith('<p><span>์๋
ํ์ธ์</span></p>');
์๋ฐ์คํฌ๋ฆฝํธ (Javascript)
// ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ replaceWith ๊ตฌํ (์ฌ์ฉํ๊ธฐ ํธํ๊ฒ ํ๋กํ ํ์
๋ฉ์๋๋ก ๋ฑ๋ก)
Element.prototype.replaceWith = function (html) {
this.insertAdjacentHTML('afterend', html);
this.remove();
};
// ์ฌ์ฉ
document.querySelector('div').replaceWith('<p><span>์๋
ํ์ธ์</span></p>');
Wrap() ๊ตฌํํ๊ธฐ
jquery์ ๋ฉ์๋์ค ํ๋์ธ replaceWith() ์ ์ด๋ ์์๋ฅผ ๋ํ ํ์ฌ ๊ฐ์ธ๋ ๊ธฐ๋ฅ์ ํด์ค๋ค. ๊ต์ฅํ ํธ๋ฆฌํ ๊ธฐ๋ฅ์ค ํ๋์ด๊ธฐ๋ ํ๋ค.
HTML ์์
<p>์๋
ํ์ธ์.</p>
<p>devkuma์
๋๋ค.</p>


์ ์ด์ฟผ๋ฆฌ (Jquery)
$("p").wrap("<div class='wrap'></div>"); // <p>ํ๊ทธ๋ฅผ <div>๋ก ๊ฐ์ผ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ (Javascript)
function wrap(el) {
const wrappingElement = document.createElement('div');
wrappingElement.classList.add('wrap');
el.parentElement.insertBefore(wrappingElement, el);
wrappingElement.appendChild(el);
}
document.querySelectorAll('p').forEach(el => {
wrap(el);
});
... ์ถํ ์ถ๊ฐ
์ด ๊ธ์ด ์ข์ผ์ จ๋ค๋ฉด ๊ตฌ๋ & ์ข์์
์ฌ๋ฌ๋ถ์ ๊ตฌ๋
๊ณผ ์ข์์๋
์ ์์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค.