자바스크립트 문서 객체 모델 (DOM)
florent의 개발 적응기
이 글의 주요 내용
[HTML, CSS, JavaScript 내 속성 및 값 표현 방식]
[웹사이트에 JavaScript 추가하기]
[HTML 요소를 다루는 두 가지 ‘속성’, Attribute, Property]
[문서 객체 모델 (DOM)]
[문서 객체 모델 (DOM)이란?]
[DOM 요소의 속성(property)과 메서드(method)]
[코드 체이닝(Chaining)]
[DOM의 HTML 요소 선택 메서드]
[DOM의 유사 배열 객체: HTMLCollection, NodeList, DOMTokenList]
[for … of 반복문]
[DOM 조작시 주의사항]
[DOM의 클래스 선택 메서드]
[classList]
[textContent vs innerHTML]
[DOM으로 HTML의 속성(attribute) 조작하기]
[HTML, CSS, JavaScript 내 속성 및 값 표현 방식]
[웹사이트에 JavaScript 추가하기]
웹사이트에 JavaScript를 추가할 때 <script>를 추가가 필요하며, 스크립트 위치는 성능과 기능에 영향을 미치기 때문에 위치를 신경써야 함
그렇기 때문에, 웹사이트의 주요 기능을 담당하는 코드들과 관련된 경우 </body> 태그 앞에 두는 것이 권장됨
비동기 로딩 옵션: async와 defer 속성을 사용하여 스크립트 로딩 최적화가 가능
[HTML 요소를 다루는 두 가지 ‘속성’, Attribute, Property]
[문서 객체 모델 (DOM)]
[문서 객체 모델 (DOM)이란?]
문서 객체 모델(Document Object Model)이란, HTML 문서를 프로그래밍적으로 조작할 수 있게 해주는 인터페이스
즉, DOM = 웹페이지의 구조를 표현하는 객체 기반 (모델 DOM은 모든 요소를 트리 모델로 변환)
JavaScript를 사용하여 DOM을 통해 동적으로 페이지 내용을 변경 가능
[DOM 요소의 속성(property)과 메서드(method)]
요소(element)는 ‘속성’과 ‘메서드(methods)’를 가짐
DOM 조작시 메서드는는 함수처럼 작동하여 값을 반환할 수 있으며, 개발자가 ‘=’를 사용하여 직접 값을 할당할 수 있음
속성: 객체의 특성을 설명 (예: innerHTML, style, firstChild) ⇒ 속성 예시: innerHTML, style, firstChild
메서드: 객체가 수행할 수 있는 동작 (예: click(), appendChild(), setAttribute()) ⇒ 메서드 예시: click(), appendChild(), setAttribute()
활용 예시
[코드 체이닝(Chaining)]
체이닝은 ‘.’을 사용하여 이뤄지며, 각 '.'은 이전 요소나 객체의 속성 또는 메서드에 접근 → 왼쪽에서 오른쪽으로 순차적으로 평가
체이닝의 구성 요소: 객체 (예: document, body) → 속성 (예: firstElementChild, style) → 메서드 (예: getElementById())
“어떤 대상의(객체) 어떤 특징에 대해(속성) 어떤 행동을 해라(메서드)”
"어떤 대상의(객체)": DOM 요소, JavaScript 객체, 또는 그 안의 하위 객체/요소
"어떤 특징에 대해(속성)": 그 대상의 특정 속성이나 특성, ex: style, innerHTML, className 등
"어떤 행동을 해라(메서드)": 그 대상에 대해 수행할 수 있는 동작, ex: appendChild(), remove(), addEventListener() 등
메서드가 객체를 반환하는 경우 뒤에 속성 및 메서드를 다시 체이닝하거나, 속성값을 반환하는 경우 또 메서드를 체이닝하는 등 연속적인 메서드 호출도 가능
모든 메서드나 속성이 체이닝을 지원하는 것은 아니며, 메서드가 undefined나 null을 반환하면 추가 체이닝은 오류를 발생
자주 사용하는 긴 체인은 변수에 저장하여 재사용하는 것이 좋음 ex. let targetElement = document.body.firstElementChild.lastElementChild;
[DOM의 HTML 요소 선택 메서드]
getElementById(): HTML에서 지정된 id 속성을 가진 단일 요소를 찾아 반환 (각 ID는 유일하므로 단일 객체 반환)
getElementsByClassName(), getElementsByTagName(): 지정된 클래스 이름이나 태그 이름을 가진 요소들을 실시간 HTMLCollection으로 반환
querySelector(): CSS 선택자로 첫 번째 일치 요소 선택
querySelectorAll(): CSS 선택자로 일치하는 모든 요소 선택, 정적 NodeList 반환
복합 선택자 사용 가능: 태그, #id, .class 등을 조합
CSS 요소 속성 상세: https://www.w3schools.com/jsref/dom_obj_style.asp 참조
[DOM의 유사 배열 객체: HTMLCollection, NodeList, DOMTokenList]
실시간 업데이트가 반영되는 경우 - HTMLCollection, DOMTokenList
실시간 업데이트가 반영되지 않는 경우 - NodeList
[for … of 반복문]
of는 반복 가능한 객체(ex. HTMLCollection, NodeList, Array 등)의 각 요소를 순회할 때 사용되며, 각 반복에서 '변수'에 현재 요소의 값을 할당
[DOM 조작시 주의사항]
HTMLCollection은 실시간으로 업데이트되므로 루프 사용 시 주의 필요
요소 집합 수정 시 개별 요소를 지정해야 함 (예: elements[0].style.color = "red")
[DOM의 클래스 선택 메서드]
[classList]
classList: 클래스 값을 유사 배열 객체(DOMTokenList)로 반환
classList.add("class1", "class2", ...): 요소에 하나 이상의 클래스를 추가
classList.remove("class1", "class2", ...): 요소에서 하나 이상의 클래스를 제거
classList.toggle("class"): 클래스가 없으면 추가하고, 있으면 제거, 두 번째 인자로 불리언 값을 전달하여 강제로 추가/제거할 수 있음
classList.contains("class"): 지정된 클래스가 요소에 존재하는지 확인
classList 기능을 사용하면 기존 CSS 코드에 따라 요소의 스타일을 동적으로 변경
[textContent vs innerHTML]
textContent는 요소의 모든 텍스트 콘텐츠를 반환하며, 숨겨진 요소의 텍스트도 포함
innerHTML은 요소 내부의 HTML 마크업을 포함한 모든 콘텐츠를 가져옴
textContent를 설정하면 텍스트만 추가되고 HTML 태그는 이스케이프 처리(Escaping, 특정 문자나 문자열을 다른 형태로 변환하여 무효화시키는 과정)
innerHTML을 설정하면 HTML 코드를 파싱하여 추가하므로 새로운 요소를 동적으로 생성할 수 있음
보안 주의: innerHTML은 XSS 공격에 취약할 수 있으므로 사용자 입력을 직접 삽입하여 처리할 때는 주의가 필요
[DOM으로 HTML의 속성(attribute) 조작하기]
getAttribute("name"): 지정된 이름의 속성 값을 반환
setAttribute("name", "value"): 지정된 이름의 속성을 주어진 값으로 설정, 속성이 없으면 새로 생성
hasAttribute("name"): 지정된 속성의 존재 여부를 확인하여 Boolean 값 반환 (true/false)
removeAttribute("name"): 지정된 속성을 제거
데이터 속성(data-*)은 dataset 프로퍼티를 통해 직접 접근하고 조작할 수 있음
