JS) DOM에 접근하기

G_New·2025년 3월 14일

👇 활용할 코드

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

  <head>
    <meta charset="UTF-8">
    <title>DOM</title>
  </head>
  
  <body>
    <div id="content">
      <h2 class="title">A</h2>
      <ul id="list-1">
        <li>A-1</li>
        <li>A-2</li>
        <li>A-3</li>
        <li>A-4</li>
      </ul>
      
      <h2 class="title">B</h2>
      <ul id="list-2">
        <li>B-1</li>
        <li>B-2</li>
        <li>B-3</li>
      </ul>
    </div>
    
    <script src="index.js"></script>
  </body>

</html>

Javascript로 위 HTML에 접근하려면 어떻게 해야 할까?

접근할 수 있는 방법은 여러가지가 있다. 하나씩 살펴보자.

1️⃣ 태그 선택 메소드

1. getElementById('id_명칭')

➡️ html의 id 속성을 이용하여 해당 id를 가진 태그를 반환한다.
선택된 태그 안에 다른 태그가 있다면 함께 선택된다.

💡 id는 고유한 값이기 때문에 하나의 태그를 선택할 때 유용하다.

const myId = document.getElementById('list-1');
console.log(myId);

2. getElementsByClassName('class_명칭')

➡️ html의 class 속성을 이용하여 해당 class에 속한 태그 전체를 반환

💡 id와는 다르게, 여러 요소들을 동시에 선택해야 할 때 유용하다.
❗ 여러 요소들을 선택하는 것이니 getElement에 s가 붙는다!

const myClass = document.getElementsByClassName('title');
console.log(myClass);

위를 보면 HTMLCollection으로 반환되는 걸 볼 수 있다.
배열과 모양은 같지만, 완벽히 배열은 아닌 이런 형태를 유사 배열이라고 부른다!

💡 유사 배열 (Array-Like Object)

배열과 유사한 객체이다. 몇 가지 특징을 가지고 있다.

숫자 형태의 indexing이 가능하다.

길이를 나타내는 length 프로퍼티가 있다.

배열의 기본 메소드를 사용할 수 없다 (ex. push, splice 등).

Array.isArray(유사배열) = false이다. 즉, 배열이 아니다.

3. getElementsByTagName('tag_종류')

➡️ html의 tag를 이용하여 해당 tag를 가진 태그들을 반환

❗ 명확한 의도가 없이 많은 요소들을 한꺼번에 다루게 되면 예상치 못한 실수를 할 가능성이 있기 때문에 많이 사용되는 메소드는 아니므로 알아만 두자.

const myTag = document.getElementsByTagName('h2');
console.log(myTag);

4. querySelector('css_선택자')

➡️ css의 선택자를 이용하여 한 개의 태그만 선택

💡 해당 선택자를 가진 태그 중 가장 첫 번째 태그만 반환한다.

const mySelector = document.querySelector(".title");
console.log(mySelector);

5. querySelectorAll('css_선택자')

➡️ css의 선택자를 이용하여 여러 개의 태그를 선택

💡 해당 선택자를 가진 태그들을 NodeList로 반환한다.

const mySelector = document.querySelectorAll(".title");
console.log(mySelector);

2️⃣ 요소 노드 프로퍼티

1. innerHTML

원하는 요소 노드가 감싸고 있는 내부의 html 코드를
➡️ 문자열(줄바꿈 및 들여쓰기 포함)로 반환한다.

요소 안의 정보를 확인
= 으로 값을 할당하여 기존 값을 새로운 값으로 완전히 교체
+= 로 값을 추가할 수도 있다.

const myTag = document.querySelector('#list-1');
console.log(myTag.innerHTML);

2. outerHTML

원하는 요소 노드를 포함한 내부의 html 코드를
➡️ 문자열(줄바꿈 및 들여쓰기 포함)로 반환한다.

앞서 innerHTML과 비슷하지만, outerHTML은 노드를 포함한 코드를 반환한다.

const myTag = document.querySelector('#list-1');
console.log(myTag.outerHTML);

❗ outerHTML은 = 를 통해 프로퍼티를 수정하게 되면 완전히 새로운 요소가 되어서 그 이후에 그 요소를 다루려면 새롭게 요소를 찾아야한다.

const myTag = document.querySelector('#list-1');
myTag.outerHTML = '<ul id="new list"> </ul>' // outerHTML 수정 -> myTag와 다른 요소가 됨
const newTag = document.querySelector('#list-1') // 새 변수에 할당하여 사용

3. textContent

원하는 요소 노드 내부의 코드를
➡️ html 태그를 제외한 문자열(줄바꿈 및 들여쓰기 포함)로 반환한다.

innerHTML과 outerHTML과 다른 점은 태그를 제외한 텍스트만 반환하는다는 점이다.

const myTag = document.querySelector('#list-1');
console.log(myTag.textContent);

❗ 세 프로퍼티의 차이

세 프로퍼티가 뭐가 다른지는 알겠는데, 어떻게 사용해야 할지 잘 모르겠다.

그래서, A 리스트에 요소를 하나 추가하는 동작을 수행해보기로 했다.

1️⃣ innerHTML로 추가하기

const myTag = document.querySelector('#list-1')
myTag.innerHTML += '<li> new </li>'

💡 A 리스트의 요소에 new가 새로 추가된 걸 볼 수 있다.

2️⃣ outerHTML로 추가하기

const myTag = document.querySelector('#list-1')
myTag.outerHTML += '<li> new </li>'

💡 A 리스트 밖에 new 가 추가된 걸 볼 수 있다.

3️⃣ textContent로 추가하기

const myTag = document.querySelector('#list-1')
myTag.textContent += '<li> new </li>'

❗ textContent는 단순 텍스트만 다루기 때문에, 새 요소를 추가하면 노드 안의 기존 태그들이 모두 사라진 채, 기존 텍스트에 새 텍스트가 추가된 채로 저장된다.

❗ 태그를 입력해도 그냥 특수문자 ('<' =꺽쇠)로 인식하기 때문에, <li> 도 텍스트로 추가됨

🐥 활용하기

앞서 알아본 방법으로 요소 노드를 추가 / 삭제 하는 방법을 알아보자.

➕ 요소 노드 추가하기

+ 로 추가할 수도 있지만, 기존의 문서 구조를 덮어쓰게 되므로
요소 노드를 직접 생성해서 추가하는 방법을 사용하는 것이 좋다.

1. 요소 노드 만들기

document.createElement('태그이름') 를 사용하여

원하는 태그 이름으로 요소 노드를 만들 수 있다.

2. 요소 노드 꾸미기

textContent, innerHTML, ...

텍스트만 사용한다면 textContent를, 태그도 사용한다면 innerHTML을 사용하면 되겠다.

3. 요소 노드 추가하기

Node.prepend : Node의 처음 자식 노드로 추가
Node.append : Node의 마지막 자식 노드로 추가
Node.before : Node의 앞쪽에 형제 노드로 추가
Node.after : Node의 뒤쪽에 형제 노드로 추가

파라미터로 여러 값을 전달하면 전달한 순서대로 한번에 추가할 수 있다.

const MyTag = document.querySelector('#list-1')

const first = document.createElement('li') // 요소 노드 만들기
first.textContent = '처음' // 요소 노드 꾸미기
MyTag.prepend(first) // 요소 노드 추가하기

const last = document.createElement('li') // 요소 노드 만들기
last.textContent = '마지막' // 요소 노드 꾸미기
MyTag.append(last) // 요소 노드 추가하기

const prev = document.createElement('p') // 요소 노드 만들기
prev.textContent = '이전' // 요소 노드 꾸미기
MyTag.before(prev) // 요소 노드 추가하기

const next = document.createElement('p') // 요소 노드 만들기
next.textContent = '다음' // 요소 노드 꾸미기
MyTag.after(next) // 요소 노드 추가하기