[JavaScript] 문서 객체 모델 - DOM, Node , 폼(form)

DOM

 

문서 객체 모델(DOM, Document Object Model)은 웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조이다.

DOM은 트리 구조로 생성되는데, 이를 DOM 트리라고 한다.

DOM 트리는 document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 트리 형태로 구성되는데, 이들을 각각 노드(node)라고 한다. 각 노드는 부모, 자식, 형제 관계가 형성된다. 

 

*DOM 트리를 구성하는 노드 타입

타입	설명
문서 노드(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	다음 요소 노드를 반환한다.

 

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

메서드	설명
getElementById(<id 속성값>)	id 속성값과 일치하는 요소 노드를 1개만 선택한다.
getElementsByClassName(<class 속성값>)	class 속성값과 일치하는 요소 노드를 모두 선택한다.
getElementsByTagName(<태그명>)	태그명과 일치하는 요소 노드를 모두 선택한다.
querySelector(<CSS 선택자>)	매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택한다.
querySelectorAll(<CSS 선택자>)	매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택한다.

 

 

노드 조작

 

1. 콘텐츠 조작하기

속성	설명
textContent	노드 요소의 모든 텍스트에 접근한다.
innerText	노드 요소의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근한다.
innerHTML	노드 요소의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근한다.

 

2. 스타일 조작하기

요소 노드는 style 속성으로 스타일(CSS)을 지정할 수 있다.

<노드>.style.<CSS 속성명> = <속성값>;

 

3. 클래스 조작하기

classList 속성의 add(), remove() 메서드로 class 속성을 조작할 수 있다.

<노드>.classList.add(class 속성값);
<노드>.classList.remove(class 속성값);

 

4. 데이터 속성 조작하기

dataset 속성으로 HTML 문서에서 data-* 속성을 조작할 수 있다.

<노드>.dataset;

 

5. 메서드로 속성 조작하기

메서드	설명
<노드>.getAttribute("속성명");	속성값을 가져온다.
<노드>.setAttribute("속성명", "속성값");	속성값을 설정한다.
<노드>.remoteAttribute("속성명");	속성을 삭제한다.

 

 

노드 추가/삭제

 

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

 

 

폼(form)

 

1. form 태그 선택하기

*document 객체의 forms 속성을 사용하면 모든 form 태그를 참조하는 HTMLCollection 객체가 반환된다. 반환된 HTMLCollection 객체를 사용해 화면에 있는 form 요소 노드를 선택할 수 있다.

*form 태그의 name 속성값으로 form 요소 노드를 선택할 수 있다.

 

2. 폼 요소 선택하기

*form 요소 노드의 elements 속성은 하위 노드의 폼 요소를 반환한다. 반환된 객체를 사용해 개별 폼 요소 노드에 인덱스로 접근할 수 있다.

*폼 요소의 name 속성값으로 폼 요소 노드에 바로 접근할 수 있다.

 

3. 폼 요소의 입력값 다루기

*한 줄 입력 요소, 여러 줄 입력 요소는 value 속성을 참조하면 입력한 값을 가져올 수 있고, value 속성에 값을 할당하면 새로운 값을 설정할 수 있다.

*체크박스 요소와 라디오버튼 요소는 checked 속성으로 체크 또는 선택 상태를 확인할 수 있고, checked 속성에 true를 할당하면 체크 또는 선택 상태를 기본으로 설정할 수 있다.

*콤보박스 요소는 selected 속성으로 항목의 선택 상태를 확인할 수 있고, selected 속성에 true를 할당하면 항목을 선택 상태로 설정할 수 있다.

*파일 업로드 요소는 FileList 객체를 사용해 요소의 값을 가져올 수 있다.