[제이쿼리] 제이쿼리 selector 정리

@DOM Selectors

$('#id')

=>document.getElementById('id') // IE 5.5+

=>document.querySelector('#id') // IE 8+

*두 메서드 모두 단일 요소를 반환합니다. getElementById는 querySelector를 사용하는 것보다 효율적입니다.

$('.class')

=>document.getElementsByClassName('class')[i] // IE 9+

=>document.querySelectorAll('.class')[i] // IE 8+

*첫 번째 메서드는 HTMLCollection을 반환하며 두 가지 중에서 가장 효율적입니다. querySelectorAll은 항상 NodeList를 반환합니다.

$('tag')

=>document.getElementsByTagName('tag')[i] // IE 5.5+

=>document.querySelectorAll('div')[i] // IE 8+

*예상대로, NodeList를 리턴하는 querySelectorAll은 getElementsByTagName (HTMLCollection을 리턴)보다 비효율적입니다.

$('[data-key="*"]')

=>document.querySelectorAll('[data-key="*"]')[i] // IE 8+

$('#id :invalid')

=>document.querySelectorAll('#id :invalid')[i] // IE 10+

$(E).children()

=>E.children[i] // IE 9+ 주석 노드와 텍스트 노드를 무시합니다.

$('#id').children('[data-key="*"]')

$('#id > [data-key="*"]')

=>document.querySelector('#id > [data-key="*"]') // IE 8+

$('#id a')

=>document.querySelectorAll('#id a')[i] // IE 8+

$('div').not('.ignore')

$('div:not(.ignore)')

=>document.querySelectorAll('div:not(.ignore)') // IE 9+

$('div, a')

=>document.querySelectorAll('div, a')[i] // IE 8+

$(E).children().eq(0)

=>document.getElementsByTagName('tag').item(0)

$(E).next()

=>E.nextElementSibling

$('a').css('color', 'red')

=>

for (var item of E) {

  item.style.color = 'blue';

} // IE 12+

=>

for (i = 0; i < E.length; ++i) {

  E[i].style.color = 'green';

}

$('a').on(Event, F)

=>

E.forEach(function(e, i, a) {

e.addEventListener('focus', F);

e.addEventListener('blur', F);

});

=>데스크탑 IE 제외, https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

@Properties and Methods

$(E).html()

=>E.innerHTML

$(E).text()

=>E.textContent

$(E).append()

=>E.appendChild()

$(E).empty()

=>E.innerHTML = null

$(E).remove()

=>E.remove(index)

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

=>document.createElement('div') // IE 5.5+

$(E).after('<div></div>')

$(E).before('<div></div>')

=>E.insertAdjacentHTML('afterend', '<div></div>') // IE 4+

=>E.insertAdjacentHTML('beforebegin', '<div></div>') // IE 4+

$(E).prepend('<div></div>')

$(E).append('<div></div>')

=>E .insertAdjacentHTML('afterbegin', '<div></div>') // IE 4+

=>E .insertAdjacentHTML('beforeend', '<div></div>') // IE 4+

$(E).append($(E2))

$(E).prepend($(E2))

=>E.appendChild(E2) // IE 5.5+

=>E.insertBefore(E2, E3) // IE 5.5+

$(E).addClass('class')

=>E.classList.add('class') // 모든 최신 브라우저 (IE9 제외)

=>E.className += 'class' // 모든 브라우저

$(E).hasClass('class')

=>E.classList.contains('class')  // 모든 최신 브라우저 (IE9 제외)

$(E).removeClass('class')

=>E.classList.remove('class') // 모든 최신 브라우저 (IE9 제외)

=>E.className = E.className.replace(/\bclass\b/g, '') // 모든 브라우저

$(E).attr('role', 'button')

=>E.setAttribute('role', 'button') // IE 5.5+

$(E).removeAttr('role')

=>E.removeAttribute('role') // IE 5.5+

$(E).text('Text')

=>E.innerHTML = 'Text' // IE 5.5+

=>E.innerText = 'Text' // IE 5.5+ but NOT Firefox

=>E.textContent = 'Text' // IE 9+

$(E).css('fontWeight', 'bold')

=>E.style.fontWeight = 'bold' // IE 5.5+

$.param({

key1: 'some value',

'key 2': 'another value'

});

=>

function param(object) {

    var encodedString = '';

    for (var prop in object) {

        if (object.hasOwnProperty(prop)) {

            if (encodedString.length > 0) {

                encodedString += '&';

            }

            encodedString += encodeURI(prop + '=' + object[prop]);

        }

    }

    return encodedString;

}

$(E).submit() / $(E).val()

=>E.submit() / E.value

$(E).data('key')

$(E).data('key', '')

$(E).hasData('key')

$(E).removeData('key')

=>E.getAttribute('data-key') // All browsers

=>E.setAttribute('data-key','') // IE 8+

=>E.hasAttribute('data-key') // IE 9+

=>E.removeAttribute('data-key') // All browsers

$(E).parent() // 상위 부모

$(E).parents() // 모든 상위 부모

$(E).closets('div') // 선택 상위 부모

=>E.parentNode > E.parentElement // All browsers

=>https://developer.mozilla.org/en-US/docs/Web/API/ParentNode

=>https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

=>E.closets('div') // IE No support

$(E).height() / .innerHeight() / .outerHeight() / .width() / .innerWidth() / .outerWidth()

=>E.clientHeight// padding, IE 6+

=>E.offsetHeight // padding+border, IE ?

=>E.scrollHeight // padding+scroll, IE 8+

*window.height() / .innerHeight() / .outerHeight() // iE 9+

$(E).offset().left[=top] / .offsetParent() // Document 기준

=>E.offsetLeft // 상위 E중 가장 가까운 position:fixed/relative 기준 E의 left + margin-left, IE ?

=>E.offsetTop // 상위 E중 가장 가까운 position:fixed/relative 기준 E의 top + margin-top, IE ?

=>E.offsetParent // 상위 E중 가장 가까운 position:fixed/relative 엘리먼트 요소 반환, IE ?

$(E).position().left[=top] // Parent 기준

=>E.style.left[=top]

$(E).scrollTop(v) / .scrollLeft(v)

=>E.scrollTop / .scrollLeft / .scrollTo(x, y) - 절대 위치 / .scrollBy(x, y) - 상대 위치

$(E).clone(Deep) // Deep=기본값 false, true시 자식 노드 내부 포함

=>E.cloneNode(Deep) // All browsers

@Events

$(E).click(F)

=>E.onclick=F

=>E.addEventListener('click', F) // IE 9+

$(E).click(function(e){F})

=>E.onclick=function(e){F}

=>E.addEventListener('click', function(e){F}) // IE 9+

@Reference

https://www.tokyobranch.net/archives/7463

http://youmightnotneedjquery.com/

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

https://jsperf.com/jquery-selectors-vs-native-api

@Polyfill

https://polyfill.io/v2/docs/

https://babeljs.io/docs/usage/polyfill/

[출처] [JavaScript][JQuery -> Pure 자바스크립트 정리]|작성자 Il