JavaScript querySelectorAll()로 여러 요소 한 번에 다루는 방법

두 개 이상의 링크나 요소에 onclick 이벤트가 제대로 작동하지 않는 경우가 종종 있습니다. 이런 문제를 해결하려면 JavaScript의 document.querySelectorAll() 메서드를 사용하는 것이 좋습니다.

querySelectorAll()은 지정한 선택자와 일치하는 모든 요소를 NodeList 형태로 반환합니다. 따라서 forEach() 같은 반복문을 사용해 각 요소에 개별적으로 접근하고 처리할 수 있으며, 동일한 클래스를 가진 여러 요소를 한 번에 제어할 때 특히 유용합니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="class1">www.example.com</div>
<div class="class1">www.test.com</div>
<script>
    const values = document.querySelectorAll('[class=class1]');
    values.forEach(function(v) {
      console.log(v.innerHTML);
    });
</script>
</body>
</html>

프로그램 실행 방법

위 프로그램을 실행하려면 먼저 파일 이름을 anyName.html(index.html)로 저장합니다. 그다음 해당 파일을 마우스 오른쪽 버튼으로 클릭하고, VS Code 편집기에서 'Open with Live Server' 옵션을 선택하면 브라우저에서 바로 실행 결과를 확인할 수 있습니다.

실행 결과

코드를 실행하면 class1 클래스를 가진 두 개의 div 요소 내부 텍스트가 콘솔에 순서대로 출력됩니다. 아래 이미지에서 실제 출력 결과를 확인할 수 있습니다.

JavaScript querySelectorAll()로 여러 요소 한 번에 다루는 방법