[JS] DOM | 입맛대로 HTML 변경하기

DOM

DOM은 HTML 문서를 구조화 해놓은 객체이다. 자바스크립트로 HTML의 요소에 접근해서 읽기, 쓰기, 수정, 삭제 등의 행동을 할 때 직접 HTML 요소에 접근하는 것이 아니라 DOM에 접근해서 다루는 것이다. 대충 이론은 여기까지 하고 몇 번쓰다보면 개념은 충분히 이해 되지만 메서드같은게 너무 많기 때문에 쓸 때마다 뭐였지? 하고 다시 검색해서 쓰게 되는 친구이다. 

 

<h1 id="header">DOM 으로 뭐시기어쩌구</h1>
<h2 class="description">DOM에 대한 설명</h2>
<h2 class="description">DOM에 대한 설명222222</h2>
<div id="container">
    <p class="item">아이템 1</p>
    <p class="item">아이템 2</p>
    <p class="item">아이템 3</p>
    <img id="img" src="">
</div>
<button id="changeTextButton">문자열 변경</button>

대충 HMTL 코드 예시

---

문서 탐색 및 가져오기

 

#id

const header1 = document.getElementById('header');
const header2 = document.querySelector('#header');

console.log('헤더:', header1.textContent);  // 헤더: DOM 으로 뭐시기어쩌구
console.log('헤더:', header2.textContent);  // 헤더: DOM 으로 뭐시기어쩌구

• `getElementById('id')`: id가 일치하는 요소를 가져온다.
• `querySelector('#id')`: `#`이나 `.` 등으로 id와 class를 구분한다.  (`#name` 는 id가 `name` 인 요소를 가져온다는 뜻)

 

 

.class

const description = document.querySelector('.description');
console.log('설명:', description.textContent); // DOM에 대한 설명

• `querySelector('.class')`: class로 요소를 가져온다. (첫 번째 요소만 가져옴) 

여러개 가져오기

const items = document.querySelectorAll('.item');
items.forEach((item, index) => {
    console.log(`아이템 ${index + 1}:`, item.textContent);
});

• `querySelectorAll('.class')`: class에 해당하는 요소를 모두(All) 가져온다. 알아서 반복문 돌려서 사용하면 된다.

 

---

요소 생성 및 조작

const container = document.getElementById('container');
const newP = document.createElement('p');
newP.textContent = '새로 추가된 p';

container.appendChild(newP);

• `createElement('tagName')`: 문자열로 입력한 태그를 만든다. ('p' 말고 'div' 같은거 넣으면 `<div>`가 생긴다.)
• `textContent`: 요소의 text 값을 입력하거나 가져올 수 있다.
• `appendChild(element)`: 상위(부모) 요소인 `#container`에 `newP` 를 "맨 뒤에" 넣어준다. 
  • 앞에 넣고 싶으면 `부모요소.prepend(element)` 를 쓰면 된다.

 

---

스타일 조작

const newP = document.createElement('p');
newP.textContent = '새로 추가된 p';
newP.style.color = 'red';

• `요소.style.color`: 새로 만들거나, 가져온 요소의 색상을 변경한다. `요소.style` 까지는 고정이다. 다른 style을 변경하고 싶으면 다른거 알아서 넣으면 된다. (css랑 거의 유사함)

 

---

속성 조작

const img = document.getElementById('img');
img.src = '/q/w/e/r/대충이미지.jpg';

• img를 가져와서 img의 src값을 변경한다. (유효한 이미지 경로를 넣으면 알아서 이미지가 잘 보인다.)