12. DOM 찾기 (DOM Selection)

Jan 14, 2026

Contents

1. DOM Selector(선택자)1️⃣ DOM Selector 란?2. DOM 요소 선택 방법 1️⃣ getElementById()2️⃣ getElementsByClassName()3️⃣ getElementsByTagName()4️⃣ querySelector()5️⃣ querySelectorAll()3. 실습 0️⃣ 실습 예제 1️⃣ getElementById()2️⃣ querySelector() (추천)3️⃣ querySelectorAll() (추천)4️⃣ getElementsByClassName()5️⃣ getElementsByTagName *️⃣ 전체 코드

1. DOM Selector(선택자)

1️⃣ DOM Selector 란?

웹 페이지 화면에 표시된 HTML 요소(DOM)를 자바스크립트로 선택해서 가져오는 방법

→ 가져온 요소를 조작(텍스트 변경, 스타일 변경, 이벤트 등록 등

2. DOM 요소 선택 방법

1️⃣ `getElementById()`

ID 속성으로 요소 1개 선택

가장 빠르고 많이 사용됨


const title = document.getElementById("main-title");

2️⃣ `getElementsByClassName()`

클래스명 기반

HTMLCollection 반환 (유사 배열, 실시간 업데이트)


const items = document.getElementsByClassName("menu-item");

3️⃣ `getElementsByTagName()`

태그 이름으로 선택 (div, li, h1 등)

역시 HTMLCollection 반환


const divs = document.getElementsByTagName("div");

4️⃣ `querySelector()`

CSS 선택자 기반

첫 번째 일치 요소 1개만 반환


const firstItem = document.querySelector(".menu-item");
const nav = document.querySelector("#navbar");

5️⃣ `querySelectorAll()`

CSS 선택자 기반

일치하는 모든 요소를 NodeList로 반환


const allItems = document.querySelectorAll(".menu-item");

3. 실습

0️⃣ 실습 예제


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1. DOM 찾기</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
      }
      .box {
        padding: 15px;
        margin: 10px 0;
        background: #f0f0f0;
        border-radius: 5px;
      }
      button {
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        background: #4caf50;
        color: white;
        border: none;
        border-radius: 5px;
      }
      button:hover {
        background: #45a049;
      }
      #result {
        margin-top: 20px;
        padding: 15px;
        background: #e8f5e9;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>1. DOM 찾기 (DOM Selection)</h1>

    <div id="myId" class="box">ID: myId인 요소</div>
    <div class="myClass box">클래스: myClass인 요소 1</div>
    <div class="myClass box">클래스: myClass인 요소 2</div>
    <div class="myClass box">클래스: myClass인 요소 3</div>
    <p class="box">태그: p인 요소</p>

    <button onclick="testGetElementById()">getElementById</button>
    <button onclick="testQuerySelector()">querySelector</button>
    <button onclick="testQuerySelectorAll()">querySelectorAll</button>
    <button onclick="testGetElementsByClassName()">
      getElementsByClassName
    </button>
    <button onclick="testGetElementsByTagName()">getElementsByTagName</button>

    <div id="result"></div>
  </body>
</html>

1️⃣ `getElementById()`

※ <script></script>는 body태그 내부 제일 하단에 입력!


    <script>
      let resultDom = document.getElementById("result");

      function testGetElementById() {
        // onsole.log("testGetElementById 클릭됨");
        // alert("testGetElementById 클릭됨");

        let dom1 = document.getElementById("myId");
        // console.log(dom1);

        let text1 = dom1.innerHTML;
        // console.log(text1);
        resultDom.innerHTML = text1;
      }
    </script>

2️⃣ `querySelector()` (추천)


// 클래스명 ".클래스명"
// 기본태그 : "태그명"
// 아이디 : "#클래스명"


    <script>
      let resultDom = document.getElementById("result");

      function testQuerySelector() {
        // 클래스명 ".클래스명"
        // 기본태그 : "태그명"
        // 아이디 : "#클래스명"
        let dom2 = document.querySelector("#myId");

        let text2 = dom2.innerHTML;
        // console.log(text1);
        resultDom.innerHTML = text2;
      }
    </script>

3️⃣ `querySelectorAll()` (추천)

보통 ID로 찾을 때는 querySelectorAll로 안 찾음 ➡️ ID는 primary key이기 때문에 하나밖에 없기 때문 ➡️ querySelector() 로!

클래스나 태그 찾을 때 querySelector로는 못 찾음 ➡️ 클래스나 태그는 여러 개일 수 있는데 querySelector는 하나만 찾기 때문 ➡️ querySelectorAll() 로!

1) 클래스는 여러 개 찾을 수 있음


    <script>
      let resultDom = document.getElementById("result");

      function testQuerySelectorAll() {
        let domList = document.querySelectorAll(".myClass");
        console.log(domList);
      }
    </script>

2) console에 클래스 출력


    <script>
      let resultDom = document.getElementById("result");

      function testQuerySelectorAll() {
        let domList = document.querySelectorAll(".myClass");
        // console.log(domList);

        for (let e of domList) {
          console.log(e);
        }
      }
    </script>

3) 브라우저 화면에 클래스 출력


    <script>
      let resultDom = document.getElementById("result");

      function testQuerySelectorAll() {
        let domList = document.querySelectorAll(".myClass");
        // console.log(domList);

        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }
    </script>

4️⃣ `getElementsByClassName()`


    <script>
      let resultDom = document.getElementById("result");

      function testGetElementsByClassName() {
        let domList = document.getElementsByClassName("box");
        // console.log(domList);

        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }
    </script>

5️⃣ getElementsByTagName


    <script>
      let resultDom = document.getElementById("result");

      function testGetElementsByTagName() {
        // 1. p태그 찾기 (한건, 여러건 return되는지 확인)
        let domList = document.getElementsByTagName("p");
        // console.log(domList);

        // 2. p태그 내부 글자를 찾아서, resultDom 출력하기
        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }
    </script>

*️⃣ 전체 코드

1) 실습 코드


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1. DOM 찾기</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
      }
      .box {
        padding: 15px;
        margin: 10px 0;
        background: #f0f0f0;
        border-radius: 5px;
      }
      button {
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        background: #4caf50;
        color: white;
        border: none;
        border-radius: 5px;
      }
      button:hover {
        background: #45a049;
      }
      #result {
        margin-top: 20px;
        padding: 15px;
        background: #e8f5e9;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>1. DOM 찾기 (DOM Selection)</h1>

    <div id="myId" class="box">ID: myId인 요소</div>
    <div class="myClass box">클래스: myClass인 요소 1</div>
    <div class="myClass box">클래스: myClass인 요소 2</div>
    <div class="myClass box">클래스: myClass인 요소 3</div>
    <p class="box">태그: p인 요소</p>

    <button onclick="testGetElementById()">getElementById</button>
    <button onclick="testQuerySelector()">querySelector</button>
    <button onclick="testQuerySelectorAll()">querySelectorAll</button>
    <button onclick="testGetElementsByClassName()">
      getElementsByClassName
    </button>
    <button onclick="testGetElementsByTagName()">getElementsByTagName</button>

    <div id="result"></div>
    <script>
      let resultDom = document.getElementById("result");

      function testGetElementById() {
        // onsole.log("testGetElementById 클릭됨");
        // alert("testGetElementById 클릭됨");

        let dom1 = document.getElementById("myId");
        // console.log(dom1);

        let text1 = dom1.innerHTML;
        // console.log(text1);
        resultDom.innerHTML = text1;
      }

      function testQuerySelector() {
        // 클래스명 ".클래스명"
        // 기본태그 : "태그명"
        // 아이디 : "#클래스명"
        let dom2 = document.querySelector("#myId");

        let text2 = dom2.innerHTML;
        // console.log(text1);
        resultDom.innerHTML = text2;
      }

      function testQuerySelectorAll() {
        let domList = document.querySelectorAll(".myClass");
        // console.log(domList);

        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }

      function testGetElementsByClassName() {
        let domList = document.getElementsByClassName("box");
        // console.log(domList);

        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }

      function testGetElementsByTagName() {
        // 1. p태그 찾기 (한건, 여러건 return되는지 확인)
        let domList = document.getElementsByTagName("p");
        // console.log(domList);

        // 2. p태그 내부 글자를 찾아서, resultDom 출력하기
        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }
    </script>
  </body>
</html>

2) 모두 `querySelector()` / `querySelectorAll()` 로 변경


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1. DOM 찾기</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
      }
      .box {
        padding: 15px;
        margin: 10px 0;
        background: #f0f0f0;
        border-radius: 5px;
      }
      button {
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        background: #4caf50;
        color: white;
        border: none;
        border-radius: 5px;
      }
      button:hover {
        background: #45a049;
      }
      #result {
        margin-top: 20px;
        padding: 15px;
        background: #e8f5e9;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>1. DOM 찾기 (DOM Selection)</h1>

    <div id="myId" class="box">ID: myId인 요소</div>
    <div class="myClass box">클래스: myClass인 요소 1</div>
    <div class="myClass box">클래스: myClass인 요소 2</div>
    <div class="myClass box">클래스: myClass인 요소 3</div>
    <p class="box">태그: p인 요소</p>

    <button onclick="testGetElementById()">getElementById</button>
    <button onclick="testQuerySelector()">querySelector</button>
    <button onclick="testQuerySelectorAll()">querySelectorAll</button>
    <button onclick="testGetElementsByClassName()">
      getElementsByClassName
    </button>
    <button onclick="testGetElementsByTagName()">getElementsByTagName</button>

    <div id="result"></div>
    <script>
      let resultDom = document.getElementById("result");

      function testGetElementById() {
        // onsole.log("testGetElementById 클릭됨");
        // alert("testGetElementById 클릭됨");

        let dom1 = document.querySelector("#myId");
        // console.log(dom1);

        let text1 = dom1.innerHTML;
        // console.log(text1);
        resultDom.innerHTML = text1;
      }

      function testQuerySelector() {
        // 클래스명 ".클래스명"
        // 기본태그 : "태그명"
        // 아이디 : "#클래스명"
        let dom2 = document.querySelector("#myId");

        let text2 = dom2.innerHTML;
        // console.log(text1);
        resultDom.innerHTML = text2;
      }

      function testQuerySelectorAll() {
        let domList = document.querySelectorAll(".myClass");
        // console.log(domList);

        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }

      function testGetElementsByClassName() {
        let domList = document.querySelectorAll(".box");
        // console.log(domList);

        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }

      function testGetElementsByTagName() {
        // 1. p태그 찾기 (한건, 여러건 return되는지 확인)
        let domList = document.querySelectorAll("p");
        // console.log(domList);

        // 2. p태그 내부 글자를 찾아서, resultDom 출력하기
        let text = "";
        for (let e of domList) {
          text = text + e.innerHTML + "<br/>";
        }
        resultDom.innerHTML = text;
      }
    </script>
  </body>
</html>

Contents

12. DOM 찾기 (DOM Selection)

1. DOM Selector(선택자)

1️⃣ DOM Selector 란?

2. DOM 요소 선택 방법

1️⃣ getElementById()

2️⃣ getElementsByClassName()

3️⃣ getElementsByTagName()

4️⃣ querySelector()

5️⃣ querySelectorAll()

3. 실습

0️⃣ 실습 예제

1️⃣ getElementById()

2️⃣ querySelector() (추천)

3️⃣ querySelectorAll() (추천)

1) 클래스는 여러 개 찾을 수 있음

2) console에 클래스 출력

3) 브라우저 화면에 클래스 출력

4️⃣ getElementsByClassName()

5️⃣ getElementsByTagName

*️⃣ 전체 코드

1) 실습 코드

2) 모두 querySelector() / querySelectorAll() 로 변경

1️⃣ `getElementById()`

2️⃣ `getElementsByClassName()`

3️⃣ `getElementsByTagName()`

4️⃣ `querySelector()`

5️⃣ `querySelectorAll()`

1️⃣ `getElementById()`

2️⃣ `querySelector()` (추천)

3️⃣ `querySelectorAll()` (추천)

4️⃣ `getElementsByClassName()`

2) 모두 `querySelector()` / `querySelectorAll()` 로 변경