JavaScript DOM 조작 및 템플릿 리터럴 핵심 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, JavaScript 초보자

(기초 개념과 실무 적용 중심)

핵심 요약

• DOM 조작 4가지 방법

- document.getElementById(), document.querySelectorAll() 등으로 요소 선택

- textContent, innerHTML으로 내용 업데이트

- createElement() + appendChild()로 요소 생성 및 추가

- remove()로 요소 삭제

• JS 기반 속성 추가

- setAttribute()를 사용해 태그의 href 속성 설정 가능

• 템플릿 리터럴 활용

- 백틱()으로 다중 줄 문자열 및 변수 삽입(${변수}`) 가능

섹션별 세부 요약

1. DOM 요소 선택

• document.getElementById('id'): 특정 ID의 요소 선택
• document.querySelectorAll('.class'): 클래스명으로 요소 선택 (CSS 선택자 지원)
• document.getElementsByTagName('tag'): 태그명으로 요소 선택
• document.querySelector()를 사용해 특정 컨테이너 내 요소 선택 가능

2. DOM 요소 업데이트

• textContent: HTML 태그 제거한 텍스트로 내용 변경
• innerHTML: HTML 구조 포함한 문자열로 내용 변경 (보안 주의)
• style.color / style.fontSize 등으로 CSS 스타일 직접 조작

3. DOM 요소 생성

• document.createElement('tag'): 새로운 요소 생성
• classList.add()로 클래스 추가 후 appendChild()로 DOM에 추가
• grid.appendChild(newCard)처럼 특정 컨테이너 내부에 추가 가능

4. DOM 요소 삭제

• element.remove(): 요소 자체 삭제
• parent.removeChild(child): 부모 요소에서 자식 제거 (기존 방식)

5. JS 기반 속성 추가

• setAttribute('href', 'url'): 태그의 href 속성 JS로 설정
• HTML 파일에 태그를 직접 작성하지 않고 전체 조작 가능

6. 템플릿 리터럴

• 백틱()으로 작성된 문자열에 변수 삽입: ${변수}`
• 다중 줄 문자열 생성 가능 (예: HTML 코드 내부에 텍스트 삽입)
• ' + 변수 + ' 방식보다 가독성 향상

결론

• DOM 조작 시 querySelector/createElement/appendChild 등 기본 메서드를 익히고,
• 템플릿 리터럴(${})을 사용해 HTML 문자열 생성 시 변수 삽입을 간결하게 처리하세요.
• 보안을 위해 innerHTML은 필요 시만 사용하며, textContent를 우선적으로 활용해야 합니다.