Skip to content

Instantly share code, notes, and snippets.

@bynaki
Created January 6, 2016 10:38
Show Gist options
  • Save bynaki/dd3b9fd2dc5b832d02a0 to your computer and use it in GitHub Desktop.
Save bynaki/dd3b9fd2dc5b832d02a0 to your computer and use it in GitHub Desktop.
Hello - You Don't Need jQuery - 목차 - Query Selector

Hello

You Don't Need jQuery

오늘날 프론트엔드 개발 환경은 급격히 진화하고 있고, 모던 브라우저들은 이미 충분히 많은 DOM/BOM API들을 구현했습니다. 우리는 jQuery를 DOM 처리나 이벤트를 위해 처음부터 배울 필요가 없습니다. React, Angular, Vue같은 프론트엔드 라이브러리들이 주도권을 차지하는 동안 DOM을 바로 처리하는 것은 안티패턴이 되었고, jQuery의 중요성은 줄어들었습니다. 이 프로젝트는 대부분의 jQuery 메소드의 대안을 IE 10+ 이상을 지원하는 네이티브 구현으로 소개합니다.

목차

  1. Query Selector
  2. CSS & Style
  3. DOM 조작
  4. Ajax
  5. 이벤트
  6. 유틸리티
  7. 대안방법
  8. 번역
  9. 브라우저 지원

Query Selector

평범한 class, id, attribute같은 selecotor는 document.querySelectordocument.querySelectorAll으로 대체할 수 있습니다.

  • document.querySelector는 처음 매칭된 엘리먼트를 반환합니다.
  • document.querySelectorAll는 모든 매칭된 엘리먼트를 NodeList로 반환합니다. [].slice.call을 사용해서 Array로 변환할 수 있습니다.
  • 만약 매칭된 엘리멘트가 없으면 jQuery는 [] 를 반환하지만 DOM API는 null을 반환합니다. Null Pointer Exception에 주의하세요.

안내: document.querySelectordocument.querySelectorAll는 꽤 느립니다, getElementByIddocument.getElementsByClassName, document.getElementsByTagName를 사용하면 퍼포먼스가 향상을 기대할 수 있습니다.

  • 1.0 selector로 찾기
{"noteId":"15216845d08-054fbbe5","main":"15216845d08-054fbbe5.md","title":"Hello - You Don't Need jQuery - 목차 - Query Selector"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment