JavaScript에서의 HTML 요소접근
JavaScript에서 HTML의 요소를 제어하기 위해서 특정 Web API를 이용하여 요소를 선택해야한다. HTML의 요소에 접근하기 위한 여러가지 Web API가 존재하며 CSS 선택자의 사용방식과 비슷하여 난이도가 높은 편은 아니지만, Web API 마다 사용목적과 사용법에 차이가 있으므로 이번 포스팅에서 정리해보았다.
1. Document.querySelector()
Document.querySelector()는 선택된 선택자 또는 선택자 그룹과 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다.
Syntax
element = document.querySelector(selectors);
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>querySelector</title>
<script type="text/javascript" defer src="./js/common.js"></script>
</head>
<body>
<p class="txt" id="id_1">Never skip</p>
<p class="txt" id="id_2">brain day</p>
<button onclick="textColorChange()">click here!</button>
</body>
</html>JavaScript
let a = document.querySelector(".txt");
console.log(a); //<p class="txt" id="id_1">Never skip</p>
txt라는 class를 가진 요소 중 첫 번째 요소를 반환한다
2. Document.querySelectorAll()
Document.querySelectorAll()는 선택된 선택자 그룹에 일치하는 도큐먼트의 엘리먼트 리스트를 나타내는 NodeList를 반환합니다.
Syntax
elementList = parentNode.querySelectorAll(selectors);
JavaScript
let a = document.querySelectorAll(".txt");
console.log(a); //NodeList(2) [p#id_1.txt, p#id_2.txt]
txt라는 class를 가진 모든 요소를 NodeList로 반환한다
let a = document.querySelectorAll(".txt");
console.log(a[0]); //<p class="txt" id="id_1"></p>Document.querySelectorAll()는 요소를 배열형태로 받아오기 때문에 index를 이용하여 특정 요소를 선택하는 것이 가능하다.
let a = document.querySelectorAll(".txt");
function textColorChange() {
for (var i = 0; i < a.length; i++) {
a[i].style.color = "red";
}
}
배열형태로 받아오는 document.querySelectorAll() 메서드의 특성과 for 구문을 이용하여 같은 class를 가진 요소들을 동시에 제어할 수 있다.
JavaScript로 코딩을 하면 안쓸수가 없는 querySelector(), querySelectorAll() , CSS 입문할 때 머리를 부여잡고 외웠던 선택자가 그대로 인자에 사용되기 때문에 쉬운듯하나 CSS에 익숙한 나머지 "" 를 잊어버리는 실수를 빈번히 하게되니 주의하자 !
[참고]
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
