기초(3) - 선택자 정리(Javascript, jQuery)

참고 사이트

1. medium.com

1. Javascript

  > document.getElementById("ID");

- 아이디 값이 여러개일 경우 첫 번째 id값을 반환

  > document.getElementsByName("name");

- name에 명시된 조건에 맞는 모든 값들을 live NodeList로 반환

- index로 접근이 가능하며 length 속성을 가짐

  > document.getElementsByClassName("class");

- 특정 클래스명을 가진 엘리먼트들을 NodeList로 반환

  > document.getElementsByTagName("li");

- 특정 태그명을 가진 엘리먼트들을 HTMLCollection으로 반환

  > document.querySelector(".myClass");

- css선택자를 기준으로 가장 첫 번째 엘리먼트를 반환

  > document.querySelectorAll(".myClass");

- css 선택자에 맞는 모든 엘리먼트를 NodeList로 반환

  > HTMLCollection과 NodeList

- HTMLCollection : 노드의 집합, DOM의 변화를 반영함

- NodeList : DOM의 변화를 반영하지 않나봄

- 배열로 전환하기

- var nodesArr = Array.prototype.slice.call(document.querySelectorAll(".myClass"));

2. jQuery

  > $("css선택자");