☁️ goormTIL | JavaScript #10

매루·2025년 9월 15일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

8/67

📅 2025-09-15

➡️ JavaScript에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓

🔎 학습 리마인드

📌 DOM 조작

💡 DOM(Document Object Model)이란?

HTML 문서를 객체(트리)로 표현한 것
- Document === HTML / Object === 객체
- javascript HTML을 조작 할 수 있게 가공해 놓은 데이터
노드(Node) : 문서 , 요소, 텍스트
요소(Element) : 태그로 만들어진 노드(<div>, <a> 등)

💡 HTML에 있는 태그를 가져오기

document.getElementsByTagName(선택자)
- 지정한 태그명을 가진 모든 요소를 HTMLCollection(유사 배열) 형태로 반환
document.getElementById(선택자)
- 문서 내에서 해당 ID를 가진 첫 번째 요소를 단일 객체(Element)로 반환
document.getElementsByClassName(선택자)
- 지정한 클래스를 가진 모든 요소를 HTMLCollection(유사 배열) 형태로 반환
document.querySelector(선택자)
- 지정한 CSS 선택자와 일치하는 첫 번째 요소를 반환 (없으면 null)
document.querySelectorAll(선택자)
- 지정한 CSS 선택자와 일치하는 모든 요소를 NodeList(유사 배열) 형태로 반환

📌 이벤트

💡 이벤트란?

사용자가 브라우저에서 하는 모든 행동

.addEventListener로 이벤트 등록(클릭 했을 때)

document.querySelector(".btn").addEventListener("click", function () {
  // 여기에 코드 작성
  document.querySelector(".btn").innerHTML = "눌렀다!";
});

📌 변수와 상수

💡 변수란?

데이터(data)를 저장하기 위한 프로그램에 의해 이름을 할당받은 메모리 공간
var, let, const 세 가지 방법으로 선언할 수 있음

변수를 선언한다 == 내가 이 저장소 쓸게~
할당한다 == 내가 이 저장소에 이거 넣을게~

💡 `var`

함수 스코프를 가지며 재선언과 재할당이 가능
같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않음
가장 마지막에 선언한 값으로 변수가 덮어씌워짐
선언과 초기화 (맨 처음 할당) 이 한번에 일어남 ← undefined

💡 `let`

블록 스코프( { } )를 가지며, 재선언이 불가능하지만 재할당은 가능
선언만 되고 초기화는 안됨

💡 `const`

블록 스코프를 가지며, 재선언과 재할당이 불가능. 반드시 선언과 동시에 초기화해야 함
const로 선언된 걸 상수 (변하지 않는 값)이라고 표현

🌊 Deep Dive

🤔 DOM으로 텍스트 변경하기 (innerText, textContent, innerHTML)

innerText
- 화면에 보이는 텍스트만 가져오거나 변경
  - 화면에 표시되지 않는 텍스트(display: none 등)는 가져오지 않음
- ❗ HTML 태그는 문자열로 인식
textContent
- Node 속성으로 해당 노드가 가지고 있는 텍스트 값을 그대로 가져옴 (숨겨진 텍스트도 포함)
- ❗ HTML 태그는 문자열로 인식
innerHTML
- HTML 포함 전체 내용 가져오기/변경, 태그와 스타일 그대로 적용 가능

<div id='content'>
  안녕~ 
  <span style='display:none'>숨겨진 텍스트</span>
</div>

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

// 사용자에게 보여지는 텍스트만 가져옴
console.log(content.**innerText**); // 안녕~

// 숨겨진 텍스트까지 포함해서 텍스트값을 모두 다 가져옴
console.log(content.**textContent**); // 안녕~ 숨겨진 텍스트

// html 전체를 다 가져옴
console.log(content.**innerHTML**); // 안녕~ <span style='display:none'>숨겨진 텍스트</span>

🤔 HTMLCollection와 NodeList

HTMLCollection
- 유사 배열 객체, 인덱스로 접근 가능
- DOM의 변경 사항을 실시간으로 반영
- 순회 가능: for...of 가능, forEach는 직접 사용 불가
- getElementById, getElementsByTagName, getElementsByClassName
- 동적 요소 관리에 유리
NodeList
- 유사 배열 객체, 인덱스로 접근 가능
- 정적이며 DOM의 변경 사항을 실시간으로 반영하지 않음
- 순회 가능: for...of, forEach 가능 (브라우저 호환성 주의)
- querySelector, querySelectorAll
- 안정적인 스냅샷이 필요할 때 유리