#14 자바스크립트 DOM 조작하기

DOM이란 무엇일까요?

DOM(Document Object Model)은 HTML, XML 문서를 자바스크립트에서 다룰 수 있도록 객체화한 모델입니다. 웹 페이지의 모든 요소를 객체로 만들어, 자바스크립트를 통해 이러한 객체들을 조작하여 웹 페이지의 내용이나 스타일을 동적으로 변경할 수 있게 해줍니다.

왜 DOM을 조작해야 할까요?

• 동적 웹 페이지: 정적인 HTML 페이지를 넘어 사용자의 상호작용에 따라 변화하는 웹 페이지를 만들 수 있습니다.
• 웹 애플리케이션: 복잡한 웹 애플리케이션을 구축하는 기반이 됩니다.
• 사용자 경험 향상: 더욱 매력적이고 인터랙티브한 사용자 경험을 제공할 수 있습니다.

DOM 조작 방법

1. 요소 선택하기

• getElementById(): 지정된 id를 가진 요소 하나를 반환합니다.

  const myDiv = document.getElementById('myDiv');
  

   

   
• getElementsByTagName(): 지정된 태그 이름을 가진 모든 요소를 HTMLCollection 형태로 반환합니다.

  const allParagraphs = document.getElementsByTagName('p');
  

   

   
• getElementsByClassName(): 지정된 클래스 이름을 가진 모든 요소를 HTMLCollection 형태로 반환합니다.

  const elementsWithClass = document.getElementsByClassName('myClass');
  

   

   
• querySelector(): CSS 선택자를 이용하여 첫 번째 일치하는 요소를 반환합니다.

  const firstDiv = document.querySelector('div');

   

   
• querySelectorAll(): CSS 선택자를 이용하여 모든 일치하는 요소를 NodeList 형태로 반환합니다.

  const allDivs = document.querySelectorAll('div');

   

   

2. 요소 속성 변경하기

• textContent: 요소의 텍스트 내용을 변경합니다.

  myDiv.textContent = '새로운 텍스트';

   

   
• innerHTML: 요소의 HTML 내용을 변경합니다.

  myDiv.innerHTML = '<b>굵은 글씨</b>';

   

   
• setAttribute(): 요소의 속성을 추가하거나 변경합니다.

  myDiv.setAttribute('title', '이것은 제목입니다.');

   

   

3. 요소 스타일 변경하기

• style: 요소의 스타일을 직접 설정합니다.

  myDiv.style.color = 'red';
  myDiv.style.backgroundColor = 'blue';

   

   

4. 요소 생성 및 추가하기

• createElement(): 새로운 요소를 생성합니다.

  const newParagraph = document.createElement('p');
  

   

   
• appendChild(): 부모 요소에 자식 요소를 추가합니다.

  document.body.appendChild(newParagraph);

   

   

5. 요소 삭제하기

• removeChild(): 부모 요소에서 자식 요소를 제거합니다.

  document.body.removeChild(newParagraph);