⏰ 2024.11.19 (D+29)
1. DOM API로 노드 추가
📁 DOM09_1.html 참고
💡 사용자가 입력한 행(row)과 열(column)에 따라 동적으로 HTML 테이블을 생성하여 특정 위치에 추가
⚙️ 주요 동작
- 행과 열 입력값으로 <table> 생성
- 동적으로 <tr>과 <td>를 추가
- 최종 테이블을 원하는 위치에 삽입
🌟 결과
사용자 입력값에 따라 동적으로 HTML 테이블 생성
2. DOM API로 노드 삭제
📁 DOM09_2.html 참고
💡 테이블에서 선택된 체크박스에 해당하는 행 삭제
⚙️ 주요 동작
- querySelectorAll('input[type=checkbox]:checked')로 선택된 체크박스 찾기
- 체크된 요소의 조부모 노드(<tr>)를 찾아 remove() 호출
🌟 결과
- 체크된 행 삭제, 다른 행은 유지
3. DOM API로 노드 이동
📁 DOM09_3.html
💡 리스트 항목(<li>)을 선택해 위 또는 아래로 이동
⚙️ 주요 동작:
1) HTML 구조
- <ul>: 여러 <li>로 구성된 목록
- "위로" 버튼: 선택된 <li>를 위로 이동
- "아래로" 버튼: 선택된 <li>를 아래로 이동
2) 클릭한 메뉴 확인
- ul.onclick으로 클릭 이벤트 감지
- 클릭한 <li>를 li 변수에 저장, 배경색 변경
3) 이동 버튼 동작
- 위로 이동:
- li.previousElementSibling으로 이전 항목 찾기
- insertAdjacentElement('afterend', previous)로 위치 변경- 아래로 이동:
- li.nextElementSibling으로 다음 항목 찾기
- insertAdjacentElement('beforebegin', next)로 위치 변경4) 예외 처리
- 첫 번째 항목에서 위로 이동 시, "이전 메뉴가 없어요" 경고
- 마지막 항목에서 아래로 이동 시, "다음 메뉴가 없어요" 경고
🌟 결과:
- 사용자가 클릭한 리스트 항목을 위나 아래로 이동 가능
- 실시간으로 DOM 노드 위치 변경
4. DOM API로 노드 복제 및 데이터 추가
📁 DOM09_4.html
💡 기존 <tr> 요소를 복제하여 서버에서 받은 데이터를 테이블에 동적으로 추가
⚙️ 주요 동작:
1) 기존 노드 복제
- cloneNode(true)로 기존의 <tr> 요소를 깊은 복제로 복제
- 복제한 노드에서 텍스트 값을 dummy 배열의 데이터로 채움
2) 템플릿 활용
- template 태그와 importNode() 메서드를 사용하여 템플릿에서 복제하여 데이터 추가
3) 데이터:
- dummy 배열에서 데이터가 제공되며, 각 항목은 테이블에 동적으로 추가
🌟 결과:
- cloneNode()와 importNode()를 사용하여 기존 데이터를 기반으로 동적 테이블 추가
5. DOM API로 다양한 방법으로 노드 가져오기
📁 DOM09_5.html
💡 getElementsByTagName, getElementsByName, getElementsByClassName 등을 사용하여 다양한 방식으로 DOM 요소를 가져오고 조작
⚙️ 주요 동작
1) 태그명으로 얻기
- getElementsByTagName('input')을 사용하여 모든 <input> 요소를 가져옴
- 체크된 <input>의 값을 추출하여 콘솔에 출력
2) 이름(name) 속성으로 얻기
- getElementsByName('inter')을 사용하여 체크박스 상태를 토글.
3) 클래스명으로 얻기
- getElementsByClassName('portal')을 사용하여 해당 클래스명을 가진 모든 요소를 가져오고, 텍스트 콘텐츠를 출력
4) 이미지 변경
- setAttribute 또는 src 속성을 변경하여 이미지를 교체
5) 전화번호 복사
- <select>와 <input> 값을 복사하여 다른 필드로 전달
🌟 결과:
- 다양한 방식으로 DOM 요소를 탐색하고 동적으로 값을 가져오거나 수정할 수 있음
- checkbox, input, class, id를 활용한 다양한 DOM 조작
6. 주요 DOM API 사용 정리
| API | 설명 |
|---|---|
createElement('태그명') |
새로운 HTML 태그 생성 |
createTextNode('텍스트') |
텍스트 노드 생성 |
append(), prepend() |
부모 노드의 끝/앞에 노드 추가 |
querySelector, querySelectorAll |
CSS 선택자로 요소 선택 |
outerHTML |
노드의 HTML 형식을 문자열로 가져오기 |
remove() |
해당 노드를 삭제 |
parentElement |
부모 요소를 찾음 |
insertAdjacentElement |
기준 요소를 기준으로 위치를 지정하여 노드 삽입 |
previousElementSibling |
이전 형제 노드(태그 노드만) |
nextElementSibling |
다음 형제 노드(태그 노드만) |
getElementsByTagName() |
태그명으로 노드를 가져옴 |
getElementsByName() |
name 속성으로 노드를 가져옴 |
getElementsByClassName() |
클래스명으로 노드를 가져옴 |
cloneNode() |
노드를 복제 |
importNode() |
외부 DOM에서 노드를 복제하여 현재 DOM에 삽입 |
