방송대 방통대 HTML5웹프로그래밍 11강 - DOM과 BOM - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 11강 - DOM과 BOM

웹 문서를 객체로 다루는 DOM과 브라우저 환경을 제어하는 BOM의 개념을 학습한다. 요소 선택과 변경, 노드 삽입·삭제, 성능 최적화부터 주소·방문 기록·클립보드·타이머 활용까지 자바스크립트의 핵심 브라우저 API를 체계적으로 정리한다.

1. DOM과 BOM의 관계

DOM: 문서를 다루는 객체 모델

DOM(Document Object Model)은 브라우저가 HTML 문서를 읽어 각 요소를 트리 구조의 객체로 만든 것이다. HTML 요소, 속성, 텍스트를 각각 노드로 표현하므로 자바스크립트는 특정 노드를 찾고 내용을 바꾸거나 새로운 노드를 추가·삭제할 수 있다. DOM은 단순한 자료 구조가 아니라 자바스크립트가 HTML 문서와 대화하기 위한 표준 인터페이스이다.

BOM: 브라우저를 다루는 객체 모델

BOM(Browser Object Model)은 웹 페이지 내용 바깥의 브라우저 창과 환경을 다루는 API 모음이다. 최상위 객체는 window이며, 문서를 나타내는 document도 실제로는 window의 자식이다. 주소를 다루는 location, 방문 기록을 다루는 history, 브라우저와 장치 정보를 제공하는 navigator 등이 여기에 포함된다.

구분	DOM	BOM
대상	HTML 문서와 화면 요소	브라우저 창과 실행 환경
대표 객체	document	window
주요 작업	요소 선택, 내용·속성·스타일 변경, 노드 삽입·삭제	주소 이동, 방문 기록, 장치 정보, 팝업, 타이머
관계	window.document처럼 BOM의 큰 틀 안에 DOM 문서가 존재한다.

시험에서는 DOM은 문서 조작 도구, BOM은 브라우저 환경 제어 도구라는 차이와 window가 최상위 객체라는 관계를 구분해야 한다.

2. DOM 트리와 화면 렌더링

노드와 부모·자식 구조

DOM 트리는 문서의 포함 관계를 반영한다. 최상위의 document 아래에 html이 있고, 그 아래에 head와 body가 놓인다. 요소는 자식 요소와 텍스트를 가질 수 있으며, 텍스트는 보통 트리의 끝인 리프에 위치한다. 속성도 노드로 표현되지만 요소의 일반적인 자식 노드처럼 다루지는 않는다.

document
└─ html
   ├─ head
   │  └─ title ─ "DOM 학습"
   └─ body
      ├─ h1 ─ "DOM 트리 구조"
      └─ p.description
         └─ strong ─ "DOM 트리"

화면이 그려지는 세 단계

1. 브라우저가 HTML을 파싱하여 문서 구조를 나타내는 DOM을 만든다.
2. CSS를 읽어 각 요소에 적용할 스타일을 계산한 CSSOM을 만든다.
3. DOM과 CSSOM을 결합해 실제로 화면에 그릴 요소만 포함하는 렌더 트리를 구성한다.

자바스크립트가 DOM을 수정하면 브라우저는 화면 배치와 픽셀을 다시 계산해야 할 수 있다. 이러한 리플로우와 리페인트가 지나치게 자주 발생하면 화면이 느려지므로, 여러 요소를 한꺼번에 추가하는 방식과 같은 성능 최적화가 필요하다.

DOM 조작은 선택 → 내용·속성·스타일 변경 → 이벤트 연결 순서로 이해하면 쉽다. 화면 출력 결과를 DOM 요소를 통해 관리하면 자바스크립트의 로직과 CSS의 표현도 분리하기 좋다.

3. DOM 요소 선택

단일 요소 선택

document.querySelector('selector')는 CSS 선택자와 일치하는 첫 번째 요소를 반환한다. 아이디뿐 아니라 클래스, 속성, 자식 선택자 등 복합 조건을 그대로 사용할 수 있어 실무에서 널리 사용한다. getElementById('id')는 고유한 아이디 하나만으로 요소를 찾을 때 간결하고 의미가 분명하다.

const header = document.querySelector('.main-nav > li.active');
const modal = document.getElementById('loginModal');

다중 요소 선택

querySelectorAll('selector')은 조건에 맞는 모든 요소를 NodeList로 반환한다. NodeList는 배열과 비슷하지만 완전한 배열은 아니다. 다만 forEach()를 바로 사용할 수 있으므로 여러 요소를 같은 방식으로 처리하기 편리하다.

const buttons = document.querySelectorAll('.btn-group button');
buttons.forEach(button => {
  button.disabled = true;
});

querySelector()는 첫 요소 하나, querySelectorAll()은 모든 일치 요소를 담은 NodeList를 반환한다. 특정 영역 안에서만 찾으려면 form.querySelectorAll('input')처럼 탐색 기준 요소에서 호출한다.

4. 이벤트 연결과 입력값 처리

HTML과 자바스크립트의 분리

HTML 속성에 onclick이나 onchange를 직접 쓰는 방식은 기존 코드를 이해할 때는 필요하지만 유지보수에는 불리하다. 실무에서는 요소를 선택한 뒤 addEventListener()로 이벤트를 연결한다. 사용자 입력에는 작업을 마친 뒤 발생하는 change보다 입력 즉시 발생하는 input 이벤트가 실시간 화면에 적합하다.

const userInput = document.querySelector('#userInput');
const output = document.querySelector('#resultView');

userInput.addEventListener('input', () => {
  output.textContent = userInput.value;
});

여러 입력 요소와 이벤트 위임

여러 입력값을 합칠 때는 NodeList를 Array.from()으로 배열로 바꾸고 map()과 join()을 이용할 수 있다. 각 입력 요소에 리스너를 하나씩 붙이는 대신 부모 폼에 리스너 하나를 등록하고 event.target을 확인하는 이벤트 위임도 가능하다.

const values = Array.from(inputs).map(input => input.value);
resultView.textContent = '입력 내용: ' + values.join(', ');

infoForm.addEventListener('input', event => {
  if (event.target.tagName === 'INPUT') updateDisplay();
});

alert()는 사용자의 작업 흐름을 막는다. 결과 영역의 textContent를 갱신하면 작업을 방해하지 않는 비차단형 인터페이스를 만들 수 있다.

5. 요소 내용 수정: textContent와 innerHTML

textContent

textContent는 요소 안의 텍스트를 읽거나 설정한다. 태그가 포함된 문자열을 넣어도 HTML로 해석하지 않고 순수한 글자로 출력한다. HTML 파싱 과정이 없어 빠르고, 사용자 입력에 포함된 악성 마크업을 실행하지 않으므로 안전하다.

innerHTML

innerHTML은 요소 내부의 HTML 마크업을 읽거나 설정한다. 문자열 속 태그를 실제 노드로 변환하므로 복잡한 구조를 한 번에 넣기 편하지만, 신뢰할 수 없는 입력을 그대로 사용하면 보안 공격에 취약하다.

구분	textContent	innerHTML
처리 방식	문자열을 순수 텍스트로 처리	문자열을 HTML로 파싱
태그 문자열	태그 기호까지 그대로 표시	실제 요소로 생성
보안	사용자 입력 출력에 권장	신뢰할 수 있는 데이터에만 제한적으로 사용
성능	HTML 파싱이 없어 상대적으로 빠름	파싱과 노드 생성 비용이 발생

element.textContent = '<b>안녕</b>'; // 태그 문자열 그대로 표시
element.innerHTML = '<b>안녕</b>';   // 굵은 글씨 요소 생성

사용자가 입력한 값은 원칙적으로 textContent로 출력한다. innerHTML은 데이터의 출처와 내용을 신뢰할 수 있을 때만 사용한다.

6. 요소 속성과 사용자 정의 데이터

직접 프로퍼티 접근과 속성 메서드

표준 속성은 element.src, element.value, element.disabled처럼 DOM 프로퍼티에 직접 접근하는 방식이 간결하다. HTML의 class는 자바스크립트에서 className, for는 htmlFor로 이름이 달라진다는 점에 주의한다.

setAttribute(속성명, 값)과 getAttribute(속성명)은 표준 속성과 사용자 정의 속성을 모두 같은 형식으로 다루는 범용 방식이다. 속성을 제거할 때는 removeAttribute(속성명)을 사용한다. disabled 같은 불리언 속성은 빈 문자열을 설정해도 존재하는 것으로 처리된다.

const image = document.querySelector('img');
image.src = 'new-image.jpg';
image.setAttribute('alt', '교체된 이미지');
const currentSrc = image.getAttribute('src');
image.removeAttribute('width');

data-*와 dataset

data-* 속성은 화면에 직접 드러내지 않을 데이터를 HTML 요소에 저장할 때 사용한다. 자바스크립트에서는 dataset 프로퍼티로 읽고 쓴다. 하이픈 뒤의 단어는 낙타체로 변환되므로 data-product-code는 dataset.productCode가 된다. 가져온 값은 숫자처럼 보여도 항상 문자열이다.

<button data-name="아메리카노" data-price="4500"
        data-product-code="CF-001">주문</button>

const button = document.querySelector('button');
console.log(button.dataset.name);        // "아메리카노"
console.log(button.dataset.productCode); // "CF-001"

data-*는 게시글 번호, 탭 이름, 상품 코드처럼 이벤트 처리에 필요한 정보를 요소와 연결하는 데 유용하다. 계산에 사용할 값은 Number() 등으로 명시적으로 변환해야 한다.

7. 요소 스타일과 클래스 조작

style, className, classList 비교

element.style은 인라인 스타일을 직접 설정한다. 마우스 좌표처럼 계산된 값을 즉시 반영할 때 유용하지만 자바스크립트와 디자인이 섞이고 우선순위가 높아 유지보수가 어렵다. CSS 속성명은 backgroundColor, borderRadius처럼 낙타체로 작성한다. 또한 style로 읽을 수 있는 것은 인라인으로 지정된 값에 한정된다.

className은 클래스 문자열 전체를 바꾸므로 기존 클래스가 사라질 수 있다. 반면 classList는 특정 클래스만 안전하게 조작한다. add(), remove(), toggle(), contains()를 제공하며 상태 전환에 가장 권장되는 방식이다.

const box = document.querySelector('#box');
box.classList.add('active');
box.classList.remove('hidden');
box.classList.toggle('selected');
if (box.classList.contains('active')) {
  console.log('활성 상태');
}

로직은 자바스크립트, 디자인은 CSS에 둔다. 자바스크립트는 classList로 상태 클래스만 켜고 끄는 구조가 가장 안전하고 유지보수하기 쉽다.

8. DOM 요소 생성과 삽입

삽입의 기본 단계

새 요소는 객체 생성 → 내용 삽입 → 속성·스타일 설정 → 실제 DOM에 부착의 순서로 만든다. document.createElement('태그명')은 메모리에 요소 객체를 만들 뿐 화면에는 아직 표시하지 않는다. 마지막에 부모 요소에 부착해야 DOM 트리와 화면에 반영된다.

const list = document.querySelector('#subjectList');
const item = document.createElement('li');

item.textContent = 'HTML5 웹프로그래밍';
item.classList.add('item');
item.setAttribute('aria-label', 'HTML5 웹프로그래밍 신청 취소');
list.appendChild(item);

삽입 위치를 정하는 메서드

• appendChild(node): 부모의 마지막 자식으로 노드 하나를 추가한다.
• append(...items): 마지막에 노드나 문자열을 하나 이상 추가한다.
• prepend(node): 부모의 첫 번째 자식으로 추가한다.
• before(node), after(node): 기준 요소의 바로 앞이나 뒤에 추가한다.

동적으로 만든 항목이 많다면 각 항목마다 삭제 리스너를 붙이기보다 부모 목록에 이벤트를 위임하고 event.target을 확인하면 코드가 단순해진다.

9. appendChild와 append, 삭제와 교체

appendChild()와 append()

구분	appendChild()	append()
인자	노드 하나	노드와 문자열 여러 개
문자열	직접 추가 불가, 텍스트 노드로 만들어야 함	자동으로 텍스트 노드로 변환
반환값	추가한 노드	undefined
호환성	구형 브라우저까지 폭넓게 지원	Internet Explorer는 지원하지 않음

요소 삭제

element.remove()는 선택한 요소가 자신을 직접 삭제하는 현대적 방식이다. parent.removeChild(child)는 부모가 특정 자식을 지정해 삭제하는 고전적 방식이다.

replaceChildren()

element.replaceChildren()을 인자 없이 호출하면 모든 자식을 비운다. 새 노드를 전달하면 기존 자식을 모두 제거한 뒤 전달한 노드들로 한 번에 교체한다. 삭제와 추가를 하나의 동작으로 처리하므로 장바구니나 목록 전체를 갱신할 때 명확하다.

cart.replaceChildren();                 // 모든 자식 비우기
cart.replaceChildren(newItem1, newItem2); // 새 목록으로 교체

10. DocumentFragment와 렌더링 최적화

DocumentFragment는 여러 DOM 요소를 임시로 모아 두는 가벼운 가상 컨테이너이다. 메모리에만 존재하고 실제 DOM 트리에 속하지 않으므로 반복문 안에서 요소를 빠르게 조립할 수 있다. 완성된 Fragment를 실제 DOM에 한 번 부착하면 내부 노드들이 이동하고 Fragment는 다시 비게 된다.

const list = document.querySelector('#myList');
const fragment = document.createDocumentFragment();

for (let i = 1; i <= 1000; i++) {
  const item = document.createElement('li');
  item.textContent = `댓글 ${i}`;
  fragment.appendChild(item);
}

list.appendChild(fragment);

실제 목록에 항목을 하나씩 직접 추가하면 매번 화면 갱신이 시도될 수 있다. Fragment 안에서 먼저 1,000개를 구성한 뒤 한 번만 부착하면 DOM 변경을 묶어 처리하여 리플로우와 리페인트 부담을 줄일 수 있다.

DocumentFragment의 핵심은 여러 노드를 메모리에서 조립한 뒤 실제 DOM에 한 번만 반영하는 것이다. 부착 후에는 Fragment 자체가 아니라 내부 노드가 DOM으로 이동한다.

11. window 객체와 브라우저 창

window는 모든 BOM 객체의 부모이자 브라우저 창 자체를 나타낸다. alert(), confirm(), prompt() 같은 전역 함수와 타이머 함수도 window의 기능이다. 현재 뷰포트 크기는 window.innerWidth와 window.innerHeight로 확인할 수 있다.

const width = window.innerWidth;
const height = window.innerHeight;

새 창과 브라우저 정책

window.open()은 새 창이나 탭을 열지만, 페이지가 로드되자마자 자동 실행하면 팝업 차단 대상이 되기 쉽다. 사용자의 클릭 이벤트 안에서 호출해야 비교적 안정적으로 동작한다. 브라우저는 보안과 사용자 경험을 위해 창 이동이나 크기 변경도 제한할 수 있으므로, 실무에서는 모달이나 내부 라우팅을 사용하는 경우가 많다.

button.addEventListener('click', () => {
  window.open('notice.html', '_blank', 'width=500,height=400');
});

BOM 기능은 브라우저 환경과 보안 정책의 영향을 받는다. API가 존재한다고 해서 모든 상황에서 사용자의 허용 없이 실행되는 것은 아니다.

12. location과 history 객체

location: 주소 정보와 이동

location은 현재 문서의 URL을 읽고 다른 주소로 이동하거나 새로고침할 때 사용한다. location.href로 이동하면 방문 기록이 남고, location.replace()는 현재 기록을 새 주소로 교체하므로 뒤로 가기로 이전 페이지에 돌아가기 어렵다. 로그인 후 리다이렉트나 결제·로그아웃 처리처럼 이전 페이지 복귀를 막아야 할 때 구분해서 사용한다.

location.href = 'https://example.com/home';
location.replace('https://example.com/login');
location.reload();

쿼리 문자열은 location.search로 얻고 URLSearchParams로 편리하게 분석할 수 있다.

const params = new URLSearchParams(location.search);
const query = params.get('query');

history: 방문 순서와 이동

history는 사용자가 방문한 페이지의 기록을 스택 구조로 관리한다. back(), forward(), go(-2)로 기록상의 위치를 이동하며, go(0)은 현재 페이지를 다시 불러오는 것과 유사하게 동작한다. 화면 전체를 다시 받지 않고 필요한 부분만 바꾸는 SPA에서도 방문 상태를 관리하는 중요한 객체이다.

location은 어디에 있고 어디로 갈지라는 주소 중심, history는 어디를 거쳐 왔는지라는 방문 순서 중심의 객체이다.

13. navigator와 클립보드

navigator는 브라우저와 사용자 장치에 관한 정보를 담는다. 브라우저 종류나 운영체제를 판별할 수 있지만, 기기별 화면 대응에는 문자열 판별보다 CSS 미디어 쿼리를 사용하는 추세이다. 실무적으로 중요한 기능 중 하나는 navigator.clipboard를 이용한 텍스트 복사와 읽기이다.

navigator.clipboard.writeText(textToCopy)
  .then(() => console.log('복사 성공'))
  .catch(error => console.error('복사 실패', error));

navigator.clipboard.readText()
  .then(text => {
    pasteArea.value = text;
  })
  .catch(error => console.error('읽기 실패', error));

클립보드 API는 비동기로 동작하므로 성공은 then(), 실패는 catch()에서 처리한다. 읽기 작업은 특히 민감하므로 사용자의 허용, 보안 컨텍스트, 브라우저 정책에 따라 거부될 수 있다. 현재 페이지 주소를 복사할 때는 location.href를 writeText()에 전달한다.

복사·붙여넣기 기능은 반드시 실패 가능성을 고려해야 한다. 권한 거부나 오류가 발생했을 때 사용자에게 이해할 수 있는 안내를 제공한다.

14. setTimeout과 setInterval

비동기 타이머의 공통 원리

setTimeout()과 setInterval()은 자바스크립트의 메인 스레드를 지정 시간 동안 멈추게 하지 않는다. 브라우저가 타이머를 관리하고, 시간이 지나면 콜백을 태스크 큐에 넣는다. 메인 실행 스택이 비었을 때 콜백이 실행되므로 지정 시간은 정확한 실행 시각이 아니라 최소 대기 시간에 가깝다.

구분	setTimeout()	setInterval()
실행 횟수	지정 시간 후 한 번	지정 간격마다 반복
대표 용도	지연 메시지, 팝업 닫기, 예약 실행	시계, 카운트다운, 자동 슬라이드
취소 함수	clearTimeout(id)	clearInterval(id)

const timeoutId = setTimeout(() => {
  console.log('3초가 지났습니다.');
}, 3000);

const intervalId = setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 1000);

clearTimeout(timeoutId);
clearInterval(intervalId);

타이머 설계의 주의점

setInterval()은 취소하지 않으면 계속 반복되므로 종료 조건과 clearInterval()을 함께 설계해야 한다. 시작 버튼을 여러 번 눌러 중복 타이머가 만들어지지 않도록 ID가 null인지 확인하고, 정지할 때 ID를 다시 초기화한다. 스톱워치는 Date.now()의 차이로 실제 경과 시간을 계산하고 padStart()로 표시 형식을 맞출 수 있다.

반복 작업은 재귀적인 setTimeout()으로도 만들 수 있다. 한 번의 작업이 끝난 후 다음 실행을 예약하므로 작업 간격을 제어하기 쉽고, 저장한 타이머 ID를 clearTimeout()에 전달해 멈출 수 있다.

타이머를 만들 때는 반드시 ID 저장, 중복 실행 방지, 적절한 시점의 해제를 함께 고려한다. 불필요한 타이머가 남으면 중복 동작이나 메모리 누수의 원인이 된다.

핵심 개념 정리

• DOM은 HTML 문서를 노드의 트리로 표현하며, 자바스크립트가 문서 요소를 선택하고 변경하는 인터페이스이다.
• 브라우저는 HTML로 DOM, CSS로 CSSOM을 만든 뒤 둘을 결합해 렌더 트리를 구성한다.
• querySelector()는 첫 요소, querySelectorAll()은 모든 일치 요소의 NodeList를 반환한다.
• 사용자 입력 출력에는 안전한 textContent를 우선하고, innerHTML은 신뢰할 수 있는 데이터에만 사용한다.
• 표준 속성은 직접 프로퍼티로, 범용 속성은 setAttribute()와 getAttribute()로 다룰 수 있다.
• data-*는 dataset으로 접근하며 값은 문자열이고 하이픈 이름은 낙타체로 변환된다.
• 상태에 따른 디자인 변경은 기존 클래스를 보존하는 classList가 권장된다.
• 새 노드는 생성·내용·속성 설정 후 DOM에 부착하며, 삭제에는 remove(), 전체 교체에는 replaceChildren()을 활용한다.
• appendChild()는 노드 하나를 추가하고 노드를 반환하지만, append()는 문자열과 여러 노드를 추가하고 undefined를 반환한다.
• DocumentFragment는 여러 노드를 메모리에서 조립해 실제 DOM에 한 번만 부착하는 최적화 도구이다.
• BOM의 최상위 객체는 window이며 그 아래에 document, location, history, navigator 등이 있다.
• location은 URL, history는 방문 순서, navigator는 브라우저·장치 기능을 담당한다.
• setTimeout()은 한 번, setInterval()은 반복 실행하며 각각 알맞은 clear* 함수로 해제한다.

DOM과 BOM 학습의 핵심은 객체 이름을 외우는 데 있지 않다. 문서의 요소를 찾고 안전하게 바꾸는 과정, 여러 변경을 효율적으로 반영하는 방법, 브라우저 기능이 보안과 사용자 정책 안에서 동작한다는 점을 연결해 이해해야 한다.

예상문제 20선

1. DOM에 대한 설명으로 가장 적절한 것은?

① 브라우저의 방문 기록만 저장하는 데이터베이스이다. ② HTML 문서를 노드의 트리 구조로 표현하여 자바스크립트가 조작하게 하는 인터페이스이다. ③ CSS 파일을 압축하는 전용 형식이다. ④ 네트워크 요청만 처리하는 서버 객체이다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
DOM은 브라우저가 HTML의 요소·속성·텍스트를 객체 노드로 바꾼 구조이며, 자바스크립트가 문서를 선택하고 변경하는 표준 인터페이스이다.

2. 웹 페이지가 화면에 그려지는 과정의 순서로 옳은 것은?

① 렌더 트리 → DOM → CSSOM ② CSSOM → 렌더 트리 → HTML ③ DOM → 화면 출력 → CSSOM ④ HTML로 DOM과 CSS로 CSSOM을 만든 뒤 둘을 결합해 렌더 트리를 구성한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
문서 구조인 DOM과 스타일 구조인 CSSOM이 결합되어 실제로 그릴 요소를 담은 렌더 트리가 만들어진다.

3. CSS 선택자와 일치하는 첫 번째 요소 하나를 반환하는 메서드는?

① querySelector() ② querySelectorAll() ③ createElement() ④ replaceChildren()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
querySelector()는 CSS 선택자에 처음 일치하는 요소 하나를 반환한다. 모든 일치 요소가 필요하면 querySelectorAll()을 사용한다.

4. querySelectorAll()의 반환값에 대한 설명으로 옳은 것은?

① 언제나 HTML 문자열을 반환한다. ② 첫 번째 요소의 아이디만 반환한다. ③ 일치하는 요소들을 담은 NodeList이며 forEach()를 사용할 수 있다. ④ 항상 완전한 Array 객체를 반환한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
querySelectorAll()은 NodeList를 반환한다. 배열과 유사하지만 완전한 배열은 아니며 forEach()를 바로 적용할 수 있다.

5. 사용자가 입력한 문자열을 화면에 안전하게 출력할 때 가장 권장되는 속성은?

① textContent ② innerHTML ③ location.href ④ className

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
textContent는 태그 문자열을 HTML로 해석하지 않아 사용자 입력에 포함된 마크업이 실행되는 위험을 줄인다.

6. data-product-code="CF-001"을 dataset으로 읽는 표현은?

① element.dataset.product-code ② element.data.product.code ③ element.dataset.ProductCode ④ element.dataset.productCode

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
data-* 이름의 하이픈은 dataset에서 낙타체로 변환된다. 따라서 data-product-code는 dataset.productCode이다.

7. 특정 상태 클래스를 기존 클래스에 영향을 주지 않고 켰다 껐다 하는 데 가장 알맞은 것은?

① innerHTML ② classList.toggle() ③ location.reload() ④ history.forward()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
classList.toggle()은 클래스가 있으면 제거하고 없으면 추가한다. 기존 클래스 문자열 전체를 바꾸지 않아 상태 제어에 적합하다.

8. 새 DOM 요소를 화면에 표시하는 과정으로 가장 적절한 것은?

① 요소를 삭제한 뒤 URL을 새로고침한다. ② CSSOM을 지운 뒤 브라우저를 닫는다. ③ createElement()로 생성하고 내용·속성을 설정한 뒤 실제 DOM에 부착한다. ④ history.back()으로 생성한 뒤 confirm()으로 부착한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
새 요소는 먼저 메모리에 생성하고 내용·속성·스타일을 설정한 다음 부모 요소에 부착해야 실제 DOM과 화면에 나타난다.

9. append()의 특징으로 옳지 않은 것은?

① 문자열을 자동으로 텍스트 노드로 추가할 수 있다. ② 여러 노드와 문자열을 한 번에 받을 수 있다. ③ 반환값은 undefined이다. ④ 추가한 Node 객체를 반드시 반환한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
추가한 노드를 반환하는 것은 appendChild()이다. append()는 여러 항목과 문자열을 받을 수 있지만 반환값은 undefined이다.

10. 부모 요소의 모든 자식을 지운 뒤 새 노드들로 한 번에 교체하는 메서드는?

① getAttribute() ② replaceChildren() ③ querySelectorAll() ④ clearInterval()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
replaceChildren()은 인자 없이 호출하면 자식을 모두 비우고, 노드를 전달하면 기존 자식을 삭제한 뒤 새 노드들로 교체한다.

11. 많은 목록 항목을 추가할 때 DocumentFragment를 사용하는 주된 이유는?

① 메모리에서 노드를 조립한 뒤 실제 DOM에 한 번만 반영해 화면 갱신 부담을 줄이기 위해 ② 방문 기록을 영구 저장하기 위해 ③ 클립보드 권한을 자동으로 얻기 위해 ④ 모든 CSS 선택자의 우선순위를 높이기 위해

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
Fragment는 실제 DOM 밖에서 여러 노드를 모은 뒤 한 번에 부착하므로 반복적인 리플로우와 리페인트 부담을 줄일 수 있다.

12. BOM의 최상위 객체이자 브라우저 창 자체를 나타내는 것은?

① history ② navigator ③ window ④ NodeList

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
window는 BOM의 최상위 객체이며 document, location, history, navigator 등이 그 아래에 놓인다.

13. 로그인 완료 후 이전 로그인 화면으로 뒤로 가기 어렵게 새 페이지로 이동하려면?

① location.reload() ② location.replace('새 주소') ③ history.forward() ④ navigator.clipboard.readText()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
location.replace()는 현재 방문 기록을 새 주소로 교체한다. 단순한 href 이동과 달리 이전 주소가 뒤로 가기 기록에 남지 않는다.

14. location과 history의 역할을 올바르게 비교한 것은?

① location은 스타일, history는 요소 내용을 관리한다. ② location은 클립보드, history는 타이머를 관리한다. ③ location은 장치 정보, history는 CSSOM을 관리한다. ④ location은 URL과 이동 주소, history는 방문 기록과 순서를 중심으로 관리한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
location은 현재 주소와 목적지를, history는 사용자가 거쳐 온 방문 기록상의 위치를 다룬다.

15. 현재 URL의 ?query=apple에서 apple 값을 얻는 코드로 옳은 것은?

① history.get('query') ② document.querySelector('query') ③ new URLSearchParams(location.search).get('query') ④ navigator.query

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
location.search로 쿼리 문자열을 얻고 URLSearchParams 객체의 get()으로 지정한 이름의 값을 읽는다.

16. 클립보드에 텍스트를 복사하는 메서드는?

① navigator.clipboard.writeText() ② location.writeText() ③ history.copy() ④ document.replace()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
navigator.clipboard.writeText()는 텍스트 복사 작업을 비동기로 수행하며 성공과 실패를 각각 처리해야 한다.

17. setTimeout()과 setInterval()의 차이로 옳은 것은?

① 둘 다 반드시 한 번만 실행된다. ② 둘 다 메인 스레드를 지정 시간 동안 멈춘다. ③ setTimeout()은 반복하고 setInterval()은 한 번 실행된다. ④ setTimeout()은 지연 후 한 번, setInterval()은 지정 간격마다 반복 실행한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
setTimeout()은 한 번 예약하고, setInterval()은 취소할 때까지 같은 간격으로 반복 예약한다.

18. 실행 중인 setInterval 타이머를 안전하게 중단하는 방법은?

① 반환된 타이머 ID를 저장해 clearInterval(id)에 전달한다. ② textContent를 빈 문자열로 바꾼다. ③ querySelectorAll()을 다시 호출한다. ④ location.href에 타이머 ID를 넣는다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
setInterval()이 반환한 ID를 보관해야 해당 반복 작업을 clearInterval()로 정확히 취소할 수 있다.

19. 스톱워치의 시작 버튼을 여러 번 눌러 중복 타이머가 생기는 것을 막는 방법은?

① 매번 새 window 객체를 생성한다. ② 시간을 항상 0으로 표시한다. ③ 타이머 ID가 null이 아닌 실행 중 상태라면 시작 함수를 바로 종료한다. ④ 모든 DOM 요소를 remove()한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
실행 중에는 타이머 ID가 존재한다. 시작 함수에서 이를 확인해 즉시 반환하고, 정지할 때 ID를 null로 초기화하면 중복 실행을 막을 수 있다.

20. BOM 기능을 사용할 때 고려해야 할 사항으로 가장 적절한 것은?

① 모든 팝업과 클립보드 읽기는 사용자 동작 없이 항상 허용된다. ② 팝업·클립보드 같은 기능은 보안과 사용자 경험 정책에 따라 차단되거나 권한이 필요할 수 있다. ③ 브라우저 정책은 BOM 동작과 전혀 관계가 없다. ④ BOM은 오직 CSS 파일 안에서만 사용할 수 있다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
브라우저는 보안과 UX를 위해 자동 팝업, 클립보드 읽기, 창 제어 등을 제한한다. 사용자 동작이나 권한 허용이 필요할 수 있다.