추가 노트 - 자바스크립트로 DOM 조작하는 방법 (필수 요소)

자바스트립트를 활용해서 DOM(Document Object Model) 조작할 때 필수적인 것들을 알려드리겠습니다. DOM을 활용해서 HTML의 각 요소들을 동적으로 불러오고 변경할 수 있습니다.

1. getElementById: 특정 ID를 가진 HTML 요소를 찾는 데 사용됩니다.

let element = document.getElementById('myId');

2. getElementsByTagName: 특정 태그 이름을 가진 HTML 요소를 찾는 데 사용됩니다. 이 메서드는 해당하는 모든 요소의 NodeList를 반환합니다.

let elements = document.getElementsByTagName('div');

3. getElementsByClassName: 특정 클래스를 가진 HTML 요소를 찾는 데 사용됩니다. 이 메서드는 해당하는 모든 요소의 NodeList를 반환합니다.

let elements = document.getElementsByClassName('myClass');

4. querySelector: CSS 선택자를 사용하여 HTML 요소를 찾는 데 사용됩니다. 이 메서드는 일치하는 첫 번째 요소만 반환합니다.

let element = document.querySelector('.myClass');

5. querySelectorAll: CSS 선택자를 사용하여 HTML 요소를 찾는 데 사용됩니다. 이 메서드는 일치하는 모든 요소의 NodeList를 반환합니다.

let elements = document.querySelectorAll('.myClass');

6. innerText, innerHTML: HTML 요소의 텍스트 또는 HTML 내용을 가져오거나 설정하는 데 사용됩니다.

let content = element.innerText;
element.innerHTML = '<b>New content</b>';

7. style: HTML 요소의 CSS 스타일을 조작하는 데 사용됩니다.

element.style.color = 'red';

8. addEventListener: HTML 요소에 이벤트 핸들러를 추가하는 데 사용됩니다.

element.addEventListener('click', function() {
  alert('Element was clicked!');
});

9. createElement, appendChild, removeChild: 새 HTML 요소를 생성하거나, 요소를 다른 요소의 자식으로 추가하거나, 자식 요소를 제거하는 데 사용됩니다.

let newElement = document.createElement('div');
element.appendChild(newElement);
element.removeChild(newElement);

여기서 appendChild( ) 메서드는 주어진 자식 노드를 특정 부모 노드의 마지막 자식으로 추가하는데 사용됩니다.

이들은 자바스크립트 DOM 조작에 있어서 기본적이면서도 중요한 요소들입니다. 이 외에도 더 고급적인 기능들이 있지만, 대부분의 상황에서 충분할 것입니다.