콘텐츠 변경: textContent, innerHTML, classList

textContent 읽기와 쓰기

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — 주의해서 사용하기

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText와 textContent 비교

classList — 클래스 추가 및 제거

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

강제 매개변수를 사용한 toggle

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

속성 읽기와 설정

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

data-* 속성

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

스타일 속성

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

계산된 스타일 읽기

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

title과 meta 태그 수정

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

빠른 확인

복습: DOM 수정