3일차 | Notion

🧩 오늘 한 일

요소 선택

목적	메서드	설명
특정 ID 선택	`document.getElementById(id)`	가장 빠르고 많이 쓰임
클래스 선택	`document.getElementsByClassName(class)`	HTMLCollection 반환
태그 선택	`document.getElementsByTagName(tag)`	HTMLCollection 반환
CSS 선택자 사용	`document.querySelector(selector)`	첫 번째 일치 요소 반환
CSS 선택자 모두	`document.querySelectorAll(selector)`	NodeList 반환

요소 생성/추가

메서드	설명
`document.createElement(tag)`	새 HTML 요소를 만듦
`document.createTextNode(text)`	텍스트 노드 생성
`parent.appendChild(child)`	자식 노드를 부모에 추가
`parent.append(...nodes)`	여러 노드나 문자열을 한 번에 추가 (최신 문법)
`parent.prepend(...nodes)`	부모의 첫 번째 자식으로 추가
`element.insertBefore(newNode, referenceNode)`	특정 위치에 삽입
`element.insertAdjacentHTML(position, html)`	빠르게 HTML 조각 삽입 (`beforebegin`, `afterbegin`, `beforeend`, `afterend`)

요소 수정

메서드 / 속성	설명
`element.textContent`	텍스트만 변경 (HTML 무시)
`element.innerHTML`	내부 HTML 전체 변경 (주의: 성능 느림, XSS 위험)
`element.outerHTML`	요소 자체를 HTML 문자열로 교체
`element.setAttribute(name, value)`	속성 추가/수정
`element.getAttribute(name)`	속성값 가져오기
`element.removeAttribute(name)`	속성 제거
`element.style.property = value`	인라인 스타일 변경

이벤트

메서드	설명
`element.addEventListener(type, handler)`	이벤트 리스너 등록
`element.removeEventListener(type, handler)`	리스너 제거
`element.dispatchEvent(event)`	이벤트 수동 발생

🧠 배운 점 / 새로 알게 된 점

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>head에 script</title>
    <script>
      const button = document.getElementById('myButton');
      console.log('button:', button); // null
    </script>
  </head>
  <body>
    <button id="myButton">버튼</button>
  </body>
</html>

브라우저는 html 문서를 위에서부터 한 줄씩 읽으며 요소를 발견할 때마다 DOM 노드로 변환한다.

<html> 을 만나면 document 루트 노드를 만들고, <head> 를 만나면 head 노드를, <body> 를 만나면 body 노드를 생성한다.

이때, 브라우저가 HTML을 파싱하다가 <script> 를 만나면 잠시 DOM 생성을 멈추고 JS를 실행한 후, 다시 DOM 생성을 이어나간다.

즉, 브라우저가 <body>를 만나기 전에도 DOM 일부는 이미 생성 중이다.

그런데 <script>를 만나면 그 시점까지의 DOM만 존재하고, body 안의 요소들은 파싱이 안 된 상태이다. 따라서 위의 코드는 오류가 발생한다.