JS - 문서 객체 모델, DOM

문서 객체 : 브라우저 객체 모델에 속하여 있는 구성 요소에 속하는 객체 중에서 DOCUMENT 객체

문서 객체 모델의 생성 : 웹 브라우저가 HTML 문서를 해석하고, 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성됨. 그리고 생성한 문서 객체 모델을 웹 브라우저에 표시함. 따라서 웹 브라우저에 표시되는 HTML 문서는 내부적으로 무넛 객체 모델을 해석해서 보이게 됨.

문서 객체 모델은 트리 구조를 가진다. 따라서 이를 DOM 트리 라고 부름

 

DOM(Document Object Model, 문서 객체 모델) : HTML, XML 문서의 Programminginterface로 HTML과 JavaScript가 상호작용 할 수 있도록 하는 도구이다. 

 

ex.

 

DOM API를 이용해 DOM 구조에 접근 할 수 있다.

 

구조가 들여쓰기 형태와 유사

document의 자식으로 DOCTYPE, html 

html의 자식으로 head, body

head의 자식으로 title, meta (meta의 자식으로 charset속성) (title자식으로 text)

body의 자식으로 h1(h1자식으로 text), a(a의 자식으로 href속성) 

 

+ dom visualizer로 형태 확인 가능

실제로는 줄바꿈을 위한 엔터도 text노드로 추가됨

 

주요 노드 타입

타입	설명
문서 노드 (Node.DOCUMENT_NODE)	최상위 document 객체의 노드 타입
요소 노드 (Node.ELEMENT_NODE)	h1, p 태그와 같은 요소의 노드 타입
속성 노드 (Node.ATTRIBUTE_NODE)	href, src와 같은 속성의 노드 타입
텍스트 노드 (Node.TEXT_NODE)	텍스트에 해당하는 노드타입
주석 노드 (Node.COMMENT_NODE)	주석에 해당하는 노드타입

 

노드 선택하기

1. 속성으로 노드 선택하기

구분	속성	설명
모든 노드 탐색	parentNode	부모 노드를 반환
	childNodes	모든 자식 노드를 반환
	firstChild	첫 번째 자식 노드를 반환
	lastChild	마지막 자식 노드를 반환
	previousSibling	이전 형제 노드를 반환
	nextSibling	다음 형제 노드를 반환

 

요소 노드 : 태그를 기반으로 만든 노드

구분	속성	설명
요소 노드 탐색	parentElement	부모 요소 노드를 반환
	children	자식 요소 노드를 반환
	firstElementChild	첫 번째 자식 요소 노드를 반환
	lastElementChild	마지막 자식 요소 노드를 반환
	previousElementSibling	이전 요소 노드를 반환
	nextElementSibling	다음 요소 노드를 반환

 

단점 : 최상위의 document로 부터 탐색해야함 (코드가 복잡해지면 불편)

 

2. 메서드로 노드 선택하기

- 속성값과 태그명을 사용하는 메소드 (get 메소드)

메서드 형식	설명
getElementById(<id 속성값>)	id 속성값과 일치하는 요소 노드를 1개만 선택
getElementsByClassName(<class 속성값>)	class 속성값과 일치하는 요소 노드를 모두 선택
getElementsByTagName(<태그명>)	태그명과 일치하는 요소 노드를 모두 선택

 

3. query 메서드 (권장)

메서드 형식	설명
querySelector(<CSS 선택자>)	매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택
querySelectorAll(<CSS 선택자>)	매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택

 

노드 조작하기

1. 콘텐츠 조작하기

속성	설명
textContent	요소 노드의 모든 텍스트에 접근합니다. (맨 뒤 공백 인식)
innerText	요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근합니다. (맨 뒤 공백 인식 불가)
innerHTML	요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근합니다. (태그를 이용한 삽입 가능)

 

2. style 조작하기

const pEl = document.getElementById("text");

pEl.style.color = 'red';

css에서 -가 들어가있는 속성명은 camel case로 작성해야함 (background-color → backgroundColor)

 

클래스 속성 조작

pEl.classList.add("styleSet1") 으로 클래스 추가 가능

pEl.classList.remove("styleSet1") 으로 클래스 삭제 가능 (값만 삭제됨 클래스 속성자체는 유지)

pEl.classList.toggle("styleSet1") 으로 클래스 토글 가능

 

사용자 정의 데이터 속성 조작 → dataset속성 사용

el.dataset.cnt

el.dateset.snt = 50;

 

HTML 요소의 표준 속성, 사용자 정의 속성 조작 → attribute 사용

aEl.getAttribute("href");

aEl.setAttribute("href", "https://www.google.com");

aEl.removeAttribute("href");

 

노드 추가하기

구분	메서드	설명
노드 생성	createElement()	요소 노드를 생성
	createTextNode()	텍스트 노드를 생성
	createAttribute()	속성 노드를 생성
노드 연결	<기준 노드>.appendChild(<자식 노드>)	기준 노드에 자식 노드를 연결
	<기준 노드>.setAttributeNode(<속성 노드>)	기준 노드에 속성 노드를 연결

 

만들어진 속성에 값 할당 → value 사용

ex. hrefAttr.value = 'https://www.naver.com';

 

ex.

aEl.appendChild(textNode);

document.body.appendChild(aEl);

 

노드 삭제하기 (삭제할 노드의 부모노드에서 삭제해야함)

removeChild(삭제할 요소노드)

ex. hEl.parentNode.removeChild(hEl); 

 

폼과 관련된 document

const formEls = document.forms;를 이용하여 한번에 선택 가능

form태그에 name 속성이 있는 경우 document.frm3과 같이 선택 가능

frmEl.elements.name, frmEl.elements[1] 등으로 접근 가능

value 속성 추가시

frmEl.elements.uname.value로 value값을 가져올 수 있음

document.frm1.uname.value = '변경'; 과 같이 값을 변경할 수 있음

 

+ 노드 탐색(.forms[0].elements[0].children)으로 반환된 객체는 foreach 사용 불가, querySelectorAll()은 foreach 사용가능

Array.Prototype.forEach.call를 사용하여 가능하긴 함