[JS] querySelector 란 무엇인가? 알고 쓰자.

2018. 12. 6. 00:30

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을 갖고 옵니다.

로그를 확인 해보도록 합시다.

[JS] SyntaxError: Unexpected identifier 에러(es6) (0)	2019.08.11
[JS] js에러, [nodemon] app crashed - waiting for file changes before starting... (0)	2019.03.18
[JS] javascript 의 객체 개념 (0)	2019.01.08
[JS] webpack(웹팩)이란? 그리고 webpack 심플한 가이드 (0)	2018.12.03
[JS] node.js 설치(리눅스 / 우분투) (0)	2018.12.01

Jun, Log