[js]자바스크립트 선택자 종류

javaScript 선택자 종류

1. getElement~로 시작하는 선택자

- getElementById

- getElementsByClassName

- getElementsByTagName

- getElementsByTagNameNS

 

2. querySelector~로 시작하는 선택자

- querySelector

- querySelectorAll

 

→ getElement에 s가 붙은 것들과 querySelectorAll은 배열로 선택자를 가져옴

변수로 지정해서 가져올 경우 인덱스를 사용하여 선택하여야함

→ 그 외, getElementById, querySelector는 가장 첫번째 요소를 선택함

 

let box = document.getElementById("box")
console.log(box)

document 내 가장 처음 나오는 #box를 의미

 

let box = document.getElementsByClassName("box")
console.log(box[0])

document 내 가장 처음 나오는 .box를 의미
box[1]로 할 경우 두번째 .box를 선택함

console.log(box)만 기입할 경우 배열이 출력됨

 

let box = document.getElementsByTagName("div")
console.log(box[0])

document 내 가장 처음 나오는 div를 의미 = div:nth-child(1)
box[1]로 할 경우 두번째 div를 선택함 = div:nth-child(2)

 

let box = document.getElementsByTagNameNS("box")

NS는 namespace의 약자. 

몰라도 됨.

 

let box = document.querySelector(".box")
console.log(box)

document 내 가장 처음 나오는 .box를 의미, 두번째 box는 선택불가
css선택자를 이용하여 기입
태그, 클래스, 아이디 모두 사용가능

 

let box = document.querySelectorAll(".box")
console.log(box[0])

document 내 가장 처음 나오는 .box를 의미

console.log(box)를 기입할 경우 배열이 출력됨
css선택자를 이용하여 기입
태그, 클래스, 아이디 모두 사용가능

 

* querySelectorAll을 사용하여 스크립트를 작성하는 경우 for문과 함께 쓴다

 

 

<div class="div1">
  <div class="div3"></div>
</div>
<div class="div2"></div>
<script>
var divClass = document.getElementsByClassName("div")
console.log(divClass[1])
</script>

위와 같은 경우 divClass[1]은 .div3이다