[멋쟁이 사자처럼 프론트엔드 스쿨] 37일차 TIL - DOM, querySelector, closest, textContent

🍰 드디어 DOM 파트!

🍴 DOM(Document Object Model)

: 웹 페이지의 구조화된 표현을 정의하는 프로그래밍 인터페이스. 

• HTML 또는 XML 문서의 모든 요소를 객체로 나타냄
• 자바스크립트를 통해 이 객체들을 조작할 수 있게 함
• 웹 페이지의 내용, 구조, 스타일 동적으로 변경 가능
• 트리 구조로 구성됨
• 각 노드는 문서의 한 부분을 나타냄

🍴 자식 노드 탐색

childNodes

• 현재 노드의 모든 자식 노드(NodeList) 반환
• 요소 노드, 텍스트 노드, 주석 노드 포함

firstChild

• 현재 노드의 첫 번째 자식 노드 반환

lastChild

• 현재 노드의 마지막 자식 노드 반환

🍴 DOM 컬렉션

: HTML 문서에서 여러 요소를 그룹으로 다루기 위해 제공되는 객체들의 집합

1. for...of를 사용할 수 있음
2. 배열 메서드를 쓸 수 없음
3. DOM 컬렉션은 읽는 것만 가능함

🍴 요소 검색하기

• querySelector - 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소 반환
• querySelectorAll - 자식 요소 중 주어진 CSS 선택자에 대응하는 요소 모두를 반환
• closest - 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소 찾음

🍴 textContent

: 요소 내의 텍스트에 접근. <태그>는 제외하고 텍스트만 추출.