자바스크립트(Javascript) DOM 선택자(Selector)

  이번 포스트에서는 자바스크립트에서의 가장 기본적인 선택자에 대해서 소개해드려고 합니다. 최신문법과 기존문법 두가지를 모두 소개해드리며, 제이쿼리는 기세가 많이 꺾인 상황이지만 아직 사용하는 기업 및 프레임워크가 존재하기 때문에 간단하게 남기도록 하겠습니다.

 

자바스크립트로 DOM 선택하는 방법

// [ID로 선택]
// 자바스크립트 ES6 이후 문법(ID는 유일성을 가정함.)
document.querySelector("#header");
// 자바스크립트 ES5 이하 문법
document.getElementById("header");

// [Class로 선택]
// 자바스크립트 ES6 이후 문법
// ("box"라는 클래스명이 여러개인 경우, querySelector 메소드는 첫번째 객체만 선택됨.)
document.querySelector(".box");
document.querySelectorAll(".box");
// 자바스크립트 ES5 이하 문법
document.getElementsByClassName("box");

// [태그명으로 선택]
// 자바스크립트 ES6 이후 문법
// ("div" 태그가 여러개인 경우, querySelector 메소드는 첫번째 객체만 선택됨.)
document.querySelector("div");
document.querySelectorAll("div");
// 자바스크립트 ES5 이하 문법
document.getElementsByTagName("div");

---

제이쿼리로 DOM 선택하는 방법

// [ID로 선택]
$("#header");

// [Class로 선택]
$(".container");

// [태그명으로 선택]
$("div");