반응형
JS 를 사용하다 보면 html의 클래스 이름 및 태그를 갖고 오기 위해서 querySelector 을 많이 사용합니다.
MDN문서를 제대로 읽어 보고 제대로 알고 써야 겠습니다.
기본형태
element = baseElement.querySelector(selectors);
리턴되는 값은 인자를 받아 일치하는 baseElement의 자손의 엘리먼트를 갖고 옵니다.
이 엘리먼트를 갖고 오면 js로 html의 값들을 변경 할 수 있습니다 이 내용은 예제를 만들어 보고 다시 살펴 보겠습니다.
첫번째로 selectors는 document 전체에서 일치하는 엘리먼트를 갖고 오고 이후에 이 엘리먼트를 이용하여 자손의 엘리먼트들을
다시 갖고 올 수 있습니다.
예제
index.html
<body>
<div class = "test">
<h1>Hello Selector </h1>
</div>
<script = src="main.js"></script>
</body>
main.js
const myDiv = document.querySelector(".test");
myH1 = myDiv.querySelector("h1");
console.log(myDiv);
console.log(myH1);
main.js 에서 html의 엘리먼트를 갖고와서 html을 컨트롤 할 수 있습니다.
h1을 갖고 올 때는 myDiv 자손 엘리먼트 중 h1을 갖고 옵니다.
로그를 확인 해보도록 합시다.
반응형