[TypeScript] 24장 - DOM 조작

728x90

✅ 1. DOM

타입스크립트에 DOM 조작은 기본 자바스크립트와 동일하나, 정적 타입 검사를 통해 더욱 안전하게 다룰 수 있습니다.

const title = document.getElementById('title');

if (title) {
  title.innerText = 'Hello TypeScript DOM!';
}

 npx tsc typescript-dom.ts // js로 변환

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="title"></h1>
    <script src="./typescript-dom.js"></script> // 변환된 스크립트 불러오기
  </body>
</html>

✅ 2. Document 인터페이스

📌 2-1. Document.getElementById

const button = document.getElementById('btn') as HTMLButtonElement;
button.addEventListener('click', () => {
  alert('버튼 클릭!');
});

npx tsc element.js

var btn = document.getElementById('btn');
btn.addEventListener('click', function () {
    alert('버튼 클릭!');
});

반환 타입: HTMLElement | null
특정 태그 속성 접근 시 as HTMLButtonElement 같은 타입 단어가 필요함

📌 2-2. Document.createElement

var div = document.createElement('div');
div.innerText = '새로운 Div!';
document.body.appendChild(div);

npx tsc 파일이름

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>createElement Example</title>
  </head>
  <body>
    <script src="create.js"></script>
  </body>
</html>

새로운 DOM 요소를 생성 시 사용
반환 타입은 HTMLElement (정확히는 HTMLDivElement 등)

✅ 3. Node 인터페이스

📌 3-1. Node.appendChild

const ul = document.createElement('ul');
const li = document.createElement('li');
li.innerText = 'Item 1';
ul.appendChild(li);
document.body.appendChild(li);

npx tsc 파일이름

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Node Append</title>
  </head>
  <body>
    <script src="append.js"></script>
  </body>
</html>

모든 DOM 요소는 Node 인터페이스를 상속
appendChild는 노드를 자식으로 추가할 때 사용

✅ 4. children vs childrenNodes

// index.ts
const list = document.getElementById('list');

if (list) {
  console.log(list.children); // HTMLCollection (요소 노드만)
  console.log(list.childNodes); // NodeList (텍스트, 주석 포함 모든 노드)
}

children: HTML 요소 노드만 포함 (HTMLCollection)
childNodes: 텍스트, 주석, 요소 등 모든 노드 포함 (NodeList)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Children vs ChildrenNodes</title>
  </head>
  <body>
    <ul id="list">
      <li>아이템 1</li>
      <li>아이템 2</li>
      <!-- 주석 -->
      텍스트
    </ul>

    <script src="./childrens.js"></script>
  </body>
</html>

children.length = 2, children.length = 4

✅ 5. querySelector와 querySelectorAll 매서드

📌 5-1. querySelector

const input = document.querySelector<HTMLInputElement>('#username');
const button = document.querySelector<HTMLButtonElement>('#btn');

button?.addEventListener('click', () => {
  alert(`입력값: ${input?.value}`);
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>QuerySelector-All</title>
  </head>
  <body>
    <input id="username" type="text" placeholder="이름을 입력해주세요" />
    <button id="btn">확인</button>

    <script src="selector.js"></script>
  </body>
</html>

제네릭 <HTMLInputElement> 사용 시 타입 단어 불필요함
null 가능성이 있으므로 ?. 옵셔널 체이닝 자주 사용

📌 5.2. queryselectorAll

const items = document.querySelectorAll<HTMLElement>('ul > li');
items.forEach((item) => {
  console.log(item.innerHTML);
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>QuerySelector-All</title>
  </head>
  <body>
    <ul>
      <li>아이템 A</li>
      <li>아이템 B</li>
    </ul>

    <script src="selectorall.js"></script>
  </body>
</html>

반환 타입: NodeListOf<T>
forEach 사용 가능

GitHub - Koras02/typescript-bloging

Contribute to Koras02/typescript-bloging development by creating an account on GitHub.

github.com