정의
- Document Object Model
- XML이나 HTML 문서의 태그들을 JavaScript를 통해 객체로 조작할 수 있도록 API를 제공하는 인터페이스
DOM 객체의 구성요소
- property = DOM 객체의 변수 HTML 태그의 속성
- method = DOM 객체의 함수
- collection = DOM 객체의 배열
- eventListener = HTML 태그의 이벤트 리스너
- style = HTML 태그의 CSS
데이터 타입
- document = 웹 페이지 그 자체를 의미하는 객체이자 DOM 트리의 최상위 객체
- element = DOM 트리에서 XML이나 HTML 태그를 가리키는 객체
- nodeList = element의 배열 (Array와는 다르지만 list[0]처럼 index를 활용하여 element에 접근가능)
- attribute = HTML 태그의 속성을 나타내는 객체
- namedNodeMap = element들의 속성들의 담은 배열
종류
- Document Node = 웹 페이지 그 자체를 의미하는 객체이자 DOM 트리의 최상위 루트 노드 (document를 통해 접근)
- Element Node = 모든 HTML 요소(태그) 노드 (body, p, input, span 등)
- Attribute Node = 모든 HTML 요소들의 속성 노드
- Text Node = HTML의 모든 텍스트
DOM 요소 선택 메소드
- document.getElementsByTagName(태그명) = 해당 태그명을 가진 요소 모두 선택
- document.getElementsByClassName(클래스명) = 해당 클래스명을 가진 요소 모두 선택
- document.getElementsByName(속성값) = 해당 name 속성값을 가진 요소 모두 선택
- document.getElementById(아이디명) = 해당 아이디명을 가진 요소 선택
- document.querySelector(선택자) = 해당 선택자로 선택되는 요소 중 맨 앞 순서 선택
- document.querySelectorAll(선택자) = 해당 선택자로 선택되는 요소 모두 선택하여 nodeList로 반환 (Array X)
※ 으로 nodeList와는 다르게 됨
※ 선택자(Selector)로 id명, class명, tag명 입력 가능
ex) document.getElementById('A').style.color = 'gold'; => id가 A인 태그의 글자색 금색으로 설정
document.getElementsByClassName('A')[1].style.textAlign = 'center';
=> 클래스명이 A인 태그중 인덱스 번호 1인 태그의 텍스트를 가운데 정렬 설정
HTMLCollection VS nodeList
- getElementsBy~는 반환 타입 = HTMLCollection
- querySelectorAll()는 반환 타입 = nodeList
- HTMLCollection은 DOM이 변경되면 반환되는 Collection도 자동으로 업데이트
- nodeList는 DOM이 변경되어도 업데이트 없이 그대로
- HTMLCollection은 foreach 문 사용 불가
- nodeList는 foreach 문 사용 가능
- HTMLCollection, nodeList 둘 다 인덱스로 요소 접근 가능
DOM 텍스트 메소드
- innerHTML = 해당 HTML 내용 전체 추출 (XSS에 취약)
- innerText = 해당 HTML 요소 내부의 텍스트만 추출
- textContent = 해당 HTML 요소 내부의 텍스트만이 아닌 요소 내부의 또 다른 요소의 텍스트까지 모두 추출
ex) const aTag = document.getElementById('aTag');
aTag.innerHTML = '<a href="H">링크</a>'; => 웹 페이지에 하이퍼링크 생성 및 '링크' 텍스트 출력
aTag.innerText = '<a href="H">링크</a>'; => 웹 페이지에 하이퍼링크 생성 X, '<a href="H">링크</a>' 텍스트 출력
DOM 요소 속성 메소드
- hasAttribute(속성) = 지정한 속성을 가지고 있는지 true/false 반환
- getAttribute(속성) = 지정한 속성에 대한 속성값 반환
- setAttribute(속성, value) = 지정한 속성에 대한 속성값 수정
- removeAttribute(속성) = 지정한 속성 삭제
- attributes = 속성들을 모아 nameNodeMap 객체 반환
DOM 노드 조회 메소드
- nodeName = 노드명 반환
- nodeValue = 노드값 반환
- nodeType = 노드 타입 반환
DOM 요소 생성/수정 메소드
- createElement() = 요소 생성
- createTextNode() = 텍스트 노드 생성
- appendChild() = 선택한 요소에 자식 요소 추가
ex) const h3 document.createElement("h3") = <h3></h3> 생성
h3.innerHTML = 'B';
document.body.appendChild(h3) = <h3>B</h3>
- removeChild() = 선택한 요소에 자식 요소 제거
- remove() = 해당 요소 제거
- replace(a, b) = 해당 요소에서 b를 a로 변경
댓글