⚡️HTML요소 접근 방법
컴포넌트 기반 웹 프로그래밍이 추세가 됨에 따라, 웹 개발을 하면서 컴포넌트에 대한 접근은 필수적입니다. 과거의 Javascript 에서는 컴포넌트에 접근할 수 있는 수단으로 제이쿼리를 사용하였다. 하지만 현재 Javascript가 현대화가 되면서, 자체적으로 DOM에 접근할 수 있는 메서드가 추가되어 제이쿼리 없이 제이쿼리가 할 수 있는 기능을 구현할 수 있다. 이번 포스팅에서는 Javascript의 querySelector에 대하여 작성하도록 하겠습니다.
🔥Document 구조
위의 그림을 보면 문서(Document)의 전체 구조를 파악할 수 있습니다. 따라서 Javascript의 querySelector() 함수를 사용하게 되면 특정 선택자와 일치하는 요소에 접근하여 원하는 요소를 반환받을 수 있습니다.
⭐querySelector 기본 형식
let element = baseNode.querySelector(selector);
//element : 반환값
//baseNode : 기준노드
//selector : CSS 선택자 또는 CSS 선택자 그룹
⚡️querySelector()
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div id="idSelector">
<h1 class="testQuerySelector">mooonStar</h1>
</div>
<div class="classSelector">
<h1 class="testQuerySelector">mooonStar</h1>
</div>
<script>
document.querySelector('#idSelector').style.color = 'blue';
document.querySelector('.classSelector').style.color = 'red';
</script>
</body>
</html>위와 같은 코드를 작성하면 결과는 다음과 같습니다.
⭐아이디 값으로 가져오기
document.querySelector('#idSelector').style.color = 'blue';
⭐클래스 명으로 가져오기
document.querySelector('.classSelector').style.color = 'red';
⚡️querySelectorAll()
querySelector()는 요소 한 개만을 반환한다. 하지만 해당하는 모든 요소를 가져오고 싶으면 querySelectorAll()을 사용하여 List로 반환받을 수 있다. 사용법은 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div id="idSelector">
<h1 class="testQuerySelector">mooonStar1</h1>
</div>
<div class="classSelector">
<h1 class="testQuerySelector">mooonStar2</h1>
</div>
<script>
var nodeList = document.querySelectorAll('.testQuerySelector');
for(var i = 0; i < nodeList.length; i++) {
if(i == 0) {
nodeList[i].style.color = 'red';
} else {
nodeList[i].style.color = 'blue';
}
}
</script>
</body>
</html>testQuerySelector 이라는 h1 클래스는 두 개가 있습니다. querySelectorAll('.testQuerySelector')로 반환받으면 nodeList에는 리스트 형태로 반환이 될 것입니다. 따라서 리스트를 순회하며 접근할 수 있게 됩니다.
'Languages > Javascript' 카테고리의 다른 글
| [Javascript]재귀 함수(Recursion Function) (7) | 2023.01.06 |
|---|---|
| [Javascript] Promise란? (4) | 2023.01.01 |
| [Javascript] Fetch API (8) | 2023.01.01 |
| [Javascript] var를 사용하지 않는 이유 (7) | 2022.12.29 |
| [Javascript] 콜백(Callback) 함수란? (1) | 2022.12.04 |