document.querySelector();는 제이쿼리와 사용법이 완전 동일하다.
<h2 id="hi">hello</h2>
<h2 class="hi2">hello</h2>
<script>
let greeting = document.querySelector("#hi")
let greeting2 = document.querySelector(".hi2")
</script>아이디를 선택자로 잡은 경우 하나의 html엔 하나의 id만 존재하기에 문제는 없지만 클래스를 위와같이 선택자로 잡은 경우엔
여러 같은 클래스가 존재할 경우 제일 첫 번째의 클래스만 선택되어진다.
이런 문제를 해결하기 위해서
document.querySelectorAll();
를 사용할 수 있다.
velog에서의 div를 선택함
//모든 div 태그를 선택함
let divLists = document.querySelectorAll("div");위의 사진과 같이 NodeList를 리턴받았고,
모든 div가 선택된 배열타입으로 선택할 수 있다.
배열로 리턴받았으니 divLists[20]으로 19번째 div를 선택해 보았고
배열 divLists의 속성인 length을 사용하여
크기 역시 확인 해 볼 수 있었다.
let divOne = document.querySelector(".divAll :nth-child(2));
let divOne= document.querySelectorAll(".divAll[1]");
서로 같은 tag를 선택한다.
Hej_han