DOM Selection and Manipulation

웹 페이지의 특정 부분을 바꾸려면 먼저 그 부분을 '선택'해야 합니다.

자바스크립트에서 DOM 요소에 접근하고 그 내용을 수정하는 대표적인 방법들을 정리해 드릴게요.

---

📘 1. DOM 요소에 접근하기 (Selection)

브라우저가 만든 DOM 트리에서 우리가 원하는 요소를 찾아내는 방법입니다.

① getElement로 시작하는 방식 (전통적 방식)

가장 빠르고 명확한 방법으로, 특정 조건에 맞는 요소를 직접 지칭합니다.

• getElementById('아이디'): HTML의 id 속성을 이용해 단 하나의 요소를 찾습니다.
• getElementsByClassName('클래스명'): 해당 클래스를 가진 모든 요소를 선택하여 리스트(HTMLCollection) 형태로 가져옵니다.
• getElementsByTagName('태그명'): <div>, <li> 같은 태그 이름을 기준으로 모두 선택합니다.

② querySelector() (현대적 방식)

CSS 선택자 문법을 그대로 사용하여 요소를 선택하는 아주 강력하고 유연한 메서드입니다.

• querySelector('선택자'): 조건에 부합하는 요소 중 가장 첫 번째 것 하나만 가져옵니다.
  • 예: document.querySelector('.my-class'), document.querySelector('#my-id')

③ querySelectorAll() (전체 선택 방식)

• querySelectorAll('선택자'): 조건에 부합하는 모든 요소를 찾아 리스트(NodeList) 형태로 가져옵니다.
• 가져온 결과는 배열과 비슷하게 다룰 수 있어 반복문(forEach 등)을 사용하기 좋습니다.

---

📘 2. DOM 내용 수정하기 (Manipulation)

요소를 선택했다면, 이제 그 안의 내용을 바꿀 차례입니다.

• textContent: 요소 안의 텍스트만을 가져오거나 변경합니다. (HTML 태그를 문자로 취급하여 안전합니다.)
• innerHTML: 요소 안의 HTML 태그를 해석하여 변경합니다. (새로운 태그를 삽입할 때 유용하지만 보안상 주의가 필요합니다.)

---

🖥️ 실전 예제 코드

학생들이 직접 따라 해 볼 수 있는 실습 코드입니다.

HTML

 

<h1 id="title">기존 제목</h1>
<p class="desc">첫 번째 설명</p>
<p class="desc">두 번째 설명</p>

<script>
    // 1. ID로 접근해서 텍스트 바꾸기
    const mainTitle = document.getElementById('title');
    mainTitle.textContent = '반가워요, 자바스크립트!';

    // 2. 클래스로 접근해서 첫 번째 내용만 바꾸기
    const firstDesc = document.querySelector('.desc');
    firstDesc.style.color = 'blue';

    // 3. 모든 클래스 요소를 선택해서 한꺼번에 바꾸기
    const allDescs = document.querySelectorAll('.desc');
    allDescs.forEach((el, index) => {
        el.innerHTML = `<b>${index + 1}번 설명입니다.</b>`;
    });
</script>

---

오늘의 요약

• 특정한 하나를 빠르게 찾을 땐 **getElementById**가 좋다.
• CSS 선택자처럼 유연하게 찾고 싶을 땐 **querySelector**가 대세다.
• 여러 개를 동시에 다루고 싶다면 **querySelectorAll**을 사용한다.
• 단순 글자 수정은 textContent, 태그 삽입은 **innerHTML**을 사용한다.

---

DOM 접근과 수정의 기본기를 모두 담았습니다!

---