document.querySelectorAll 을 이용한 태그 속 내용 추가 해주기

Louis·2023년 11월 8일

안녕하세요! 오늘도 이렇게 찾아왔습니다 요즘 velog 포스팅을 빼먹지 않고 써보려고 오늘도 제가 이렇게 찾아왔답니다

오늘은 베이직반에서 과제로 주어진 문제 중에 저를 괴롭히던 녀석을 데리고 왔습니다

계속 저를 괴롭혔지만 검색하고 또 검색하고 물어보고 또 물어보고 해서 답을 구한 다음 이해를 하고 포스팅으로 남기기 위해서 이렇게 왔습니다

그럼 바로 시작해볼까요?

주어진 문제

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div class="number">1</div>
	<div class="number">2</div>
	<div class="number">3</div>
	<script src="5.js"></script>
</body>

</html>

나의 고민

흠... 처음에 문제를 보고 고민을 했죠

number 클래스 태그들을 하나로 묶어서 +10을 더해주면 되겠다 하고 머리 속으로는 구상이 됐습니다

하지만 대체 그걸 어떻게 코드로 구현하는거죠...?

조금 작성을 해보았지만 저의 머릿속은 금방 새하얀 눈밭으로 변해갔습니다...

일단 const number = document.querySelectorAll(".number"); 코드는 생각이 나는데 나머지를 어떻게 해야될지 모르는 상황이었습니다..!!

그렇다면 어떻게 해결을...?

네 검색을 진행하다 보니 querySelectorAll 을 사용하는 경우 배열로 출력이 되기 때문에 값을 넣어주거나 수정을 할 때 for문을 이용해야된다는 점이었습니다!

for문을 사용해야하는 이유

조금 더 자세히 설명을 하자면 const number = document.querySelectorAll(".number"); 코드를 작성했을 때 얻을 수 있는 값은 [div.number, div.number, div.number] 입니다

배열 형태로 값이 나오게 되며 우리는 하나씩 집어줘야할 필요가 있습니다

0번째, 1번째, 2번째 를 언급해주며 값을 추가 해줘야 되죠

for문의 기본 형태는 < for () {} > 입니다

최종 해설

그래서 저는

for (i = 0; i < number.length; i++) {

}

형태의 for문 반복조건을 작성 할 수 있었습니다

i < number.length 를 해준 이유는 0번째, 1번째, 2번째 배열들을 골라줘야하는데 number.length는 3이 나오게 됩니다 그런 의미는 결국 i < 3; 이라고 해석해 줄 수 있습니다

그 다음

number[i].innerText = Number(number[i].innerText) + 10

코드를 for문 중괄호 안에 넣어줄 수 있습니다

해당 코드를 해석한다면

number[i].innerText // i번째 <div class="number"></div> 안에 텍스트
  
  = Number(number[i].innerText) + 10 // i번째 <div class="number"></div> 안에 텍스트를 꺼내서 10을 더해준다

라고 해석할 수 있습니다

결론적으로

const number = document.querySelectorAll(".number");

for (i = 0; i < number.length; i++) {
    number[i].innerText = Number(number[i].innerText) + 10
}