[ JS ] querySelector() / querySelectorAll()

# querySelector()

 

   css selecter 처럼 태그명, 클래스명, id 등으로 불러와 js에서 쓸 수 있다.

   해당되는 맨 처음 요소 하나를 가져온다.

// 클래스명
document.querySelector(".btn-page").style.cursor = "pointer";

// id명
var btn_page = document.querySelector("#btn-page");

// 태그명
var section = document.querySelector("section");

 

# querySelectorAll()

      querySelector()와 사용법은 같지만 해당되는 요소 전체를 배열로 가져온다.

 

document.querySelectorAll(".btn-page")[0].style.cursor = "pointer";

var btn_page = document.querySelectorAll(".btn-page")[1];

// css 같은 선택방식도 가능
var x = document.querySelectorAll("a[target]");
var x = document.querySelectorAll("div > p");
var x = document.querySelectorAll("h2, div, span");

   

# ForEach문으로 이런 식으로 사용이 가능하다.

    document.querySelectorAll(".btn-page").forEach(function (item, index, arr) {
        console.log("index : " + index 
        + ", item.innerHTML : " + arr[index].innerText 
        + ", item.innerHTML : " + item.innerHTML );
    });
    
// 파라미터로 받는 (item , index, arr)는 각각
// item : 해당 배열의 요소
// index: 배열 index
// arr : 현재 배열 객체

// 람다식    
    document.querySelectorAll(".btn-page").forEach((item, index, arr) => {
        console.log("index : " + index 
        + ", item.innerHTML : " + arr[index].innerText 
        + ", item.innerHTML : " + item.innerHTML);
    });

forEach 파라미터 설명 링크