DOM과 배열의 JavaScript 활용
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 초보 개발자 및 웹 프론트엔드 학습자
핵심 요약
- DOM은 웹 페이지의 구조를 객체 트리로 표현하여 JavaScript가 HTML/CSS를 조작할 수 있도록 함
- 배열은 동적 크기의 순서 있는 데이터 컬렉션으로,
push()
,pop()
,includes()
등 다양한 메서드 제공 - 실제 예제로 DOM 조작(내용 변경, 버튼 이벤트)과 배열 사용(색상 변경, 카운터)을 구현
섹션별 세부 요약
1. DOM이란?
- 웹 브라우저가 제공하는 인터페이스로, HTML 문서를 트리 구조의 객체로 표현
document.getElementById()
와textContent
를 통해 HTML 요소의 내용을 동적으로 조작 가능- 예시 코드:
```javascript
let heading = document.getElementById("title");
heading.textContent = "Welcome to JavaScript DOM!";
```
2. DOM의 주요 기능
- 동적 콘텐츠 업데이트: 페이지 재로딩 없이 폼 검증, AJAX 응답 처리
- 사용자 상호작용: 버튼 클릭, 폼 제출 등의 이벤트 처리
- 크로스 플랫폼 호환성: 모든 브라우저에서 동일한 방식으로 문서 조작 가능
3. 배열의 특징과 사용법
- 동적 크기로 요소 추가/삭제 가능, 0 기반 인덱스 사용
- 리터럴 방식(
let b = [10, 20, 30]
)과new Array()
생성 가능 - 메서드 목록:
push()
,pop()
,shift()
,unshift()
,includes()
,slice()
등
4. 실무 예제: DOM 조작과 배열 활용
- 카운터 구현:
```javascript
let count = 0;
function increase() { count++; document.getElementById('result').innerHTML = count; }
```
- 배경색 변경 예제:
```javascript
let color = ["white", "blue", "yellow", "black"];
let num = Math.floor(Math.random() * color.length);
document.body.style.backgroundColor = color[num];
```
- 문제점:
changecolor()
함수에서let
키워드 누락,Math.random()
의 범위 계산 오류
결론
- DOM은 웹 페이지의 동적 조작을 위한 핵심 도구로,
getElementById()
,addEventListener()
등 기본 메서드를 숙지해야 함 - 배열은 데이터 처리에 유용하며,
push()
,slice()
등의 메서드를 통해 효율적으로 조작 가능 - 예제 코드 작성 시 문법 오류(예:
let
누락,Math.random()
범위 계산)를 주의 깊게 점검해야 함