03-3. document

DOM(문서 객체 모델)

• document:
  • 웹 브라우저에서 실행되는 프런트엔드 웹 애플리케이션에서 사용하는 내장 객체입니다.
  • HTML 문서 전체를 지칭하며, JavaScript를 통해 이 문서의 구조를 조작할 수 있습니다.
• DOM 노드:
  • document를 통해 HTML 문서가 파싱되면서 생성되는 다양한 객체들입니다.
  • JavaScript 코드로 DOM 노드에 접근해 여러 작업을 수행할 수 있습니다.

DOM 노드 종류

1. 요소 노드 (Element Node):
   • HTML 태그를 나타냅니다. 예를 들어, <div>, <p> 등이 있습니다.
2. 속성 노드 (Attribute Node):
   • 태그의 속성을 나타냅니다. 예를 들어, <img src="image.jpg" alt="description">에서 src와 alt가 속성 노드입니다.
3. 텍스트 노드 (Text Node):
   • HTML 태그 내에 작성된 내용을 나타냅니다. 예를 들어, <p>Hello</p>에서 "Hello"가 텍스트 노드입니다.
4. 주석 노드 (Comment Node):
   • HTML 문서 내의 주석을 나타냅니다. 예를 들어, <!-- This is a comment -->는 주석 노드입니다.

---

노드 선택자( Node Selector )

노드를 선택하기 위해 다양한 방법을 제공합니다:

1. getElementById():
   • HTML 문서 내에서 ID 속성으로 특정 노드를 선택합니다.
   • 사용 예: document.getElementById('myId')
2. getElementsByTagName():
   • 특정 태그명을 가진 모든 노드를 선택합니다.
   • 반환값은 HTMLCollection 형태로 여러 노드를 담고 있습니다.
   • 사용 예: document.getElementsByTagName('div')
3. getElementsByClassName():
   • 특정 CSS 클래스명을 가진 모든 노드를 선택합니다.
   • 마찬가지로 HTMLCollection 형태로 반환됩니다.
   • 사용 예: document.getElementsByClassName('myClass')
4. getElementsByName():
   • HTML 요소의 name 속성으로 노드를 선택합니다.
   • 반환값은 HTMLCollection입니다.
   • 사용 예: document.getElementsByName('myName')
5. querySelector():
   • CSS 선택자를 사용하여 조건에 맞는 첫 번째 노드를 선택합니다.
   • 사용 예: document.querySelector('.myClass')
6. querySelectorAll():
   • CSS 선택자를 사용하여 조건에 맞는 모든 노드를 선택합니다.
   • 반환값은 NodeList 형태입니다.
   • 사용 예: document.querySelectorAll('div.myClass')

---

노드 이용하기

노드를 조작할 때 사용할 수 있는 다양한 속성과 메소드들이 있습니다:

1. innerHTML vs innerText:
   • innerHTML:
     • 노드의 HTML 구조를 포함한 모든 내용을 읽거나 변경합니다.
     • 사용 예: element.innerHTML = '<span>New content</span>';
   • innerText:
     • 노드 내의 텍스트 내용만 읽거나 변경합니다.
     • 사용 예: element.innerText = 'New text';
2. 속성 조작:
   • getAttribute():
     • 노드의 속성 값을 읽습니다.
     • 사용 예: element.getAttribute('src');
   • setAttribute():
     • 노드의 속성 값을 변경합니다.
     • 사용 예: element.setAttribute('src', 'newImage.jpg');
   • removeAttribute():
     • 노드의 속성을 삭제합니다.
     • 사용 예: element.removeAttribute('alt');
   • hasAttribute():
     • 노드에 특정 속성이 존재하는지 확인합니다.
     • 사용 예: element.hasAttribute('src');

이벤트 처리

이벤트를 다룰 때는 다음과 같은 기능들이 있습니다:

1. addEventListener():
   • 노드에 이벤트 핸들러를 등록합니다.
   • 이벤트가 발생할 때 실행할 함수를 지정할 수 있습니다.
   • 캡처링: 이벤트가 상위 노드에서 하위 노드로 전파되는 단계.
   • 버블링: 이벤트가 하위 노드에서 상위 노드로 전파되는 단계.
   • 사용 예: 
   • javascript
     코드 복사
     element.addEventListener('click', function() { alert('Clicked!'); }, false); // false면 버블링, true면 캡처링
2. preventDefault():
   • 이벤트의 기본 동작을 취소합니다. 예를 들어, 링크 클릭 시 페이지 이동을 방지합니다.
   • 사용 예: event.preventDefault();
3. stopPropagation():
   • 이벤트 전파를 중단합니다. 즉, 더 이상 상위 또는 하위 노드로 이벤트가 전파되지 않도록 합니다.
   • 사용 예: event.stopPropagation();

---

노드 추가 및 삭제

노드를 동적으로 추가하거나 삭제할 수 있는 방법은 다음과 같습니다:

1. createElement():
   • 새로운 요소 노드를 생성합니다.
   • 사용 예: const newDiv = document.createElement('div');
2. appendChild():
   • 생성된 노드를 부모 노드에 추가합니다. 항상 마지막 자식으로 추가됩니다.
   • 사용 예: parentElement.appendChild(newDiv);
3. insertBefore():
   • 특정 위치에 새 노드를 추가합니다.
   • 사용 예: parentElement.insertBefore(newDiv, referenceNode);
4. removeChild():
   • 특정 노드를 삭제합니다.
   • 사용 예: parentElement.removeChild(childNode);

스타일 다루기

노드의 스타일을 조작할 때는 다음과 같은 메소드가 있습니다:

1. style 프로퍼티:
   • 노드에 적용된 CSS 스타일을 읽거나 변경합니다.
   • CSS 스타일 이름은 camelCase로 작성해야 합니다.
   • 사용 예: element.style.backgroundColor = 'red';
2. getComputedStyle():
   • 노드의 최종 스타일을 읽어올 때 사용합니다. 외부 스타일 시트의 스타일도 포함합니다.
   • 사용 예:
     javascript

     코드 복사

     const styles = getComputedStyle(element); const color = styles.color; // 노드의 글자색 읽기