DOM(Document Object Model) 개요
DOM이란?
- 웹 페이지의 HTML문서 구조를 객체로 표현하기 위한 계층구조로서, 문서를 나타내는 최상위 객체는 document 객체이다.
- 웹 페이지가 로드될 때, 웹 브라우저는 페이지의 DOM을 생성하고 트리 구조로 관리한다.
각각을 노드(node)라고 하며 엘리먼트 노드, 텍스트 노드, 속성 노드가 있다. - DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준안이다.
- DOM은 HTML과 XML 문서에 대한 응용 API로서 문서를 구조적(계층적인 트리 구조)으로 정리하여 문서의 내용과 시각적인 형태를 변경할 수 있도록 지원한다.
HTML 문서의 DOM 표현 방법
이미지 출처: commons.wikimedia.org/wiki/File:DOM-model.svg
- node 속성
| 속성 | 기능 |
| firstChild | 첫 번째 자식 노드의 요소를 반환 |
| lastChild | 마지막 자식 노드의 요소를 반환 |
| nextSibling | 현재 자식 노드에서 같은 레벨의 요소 다음 자식 노드를 반환 |
| nodeName | 노드의 이름 반환 |
| nodeType | 1은 요소, 2는 속성, 3은 내용으로 노드의 타입을 반환 |
| nodeValue | 내용에 노드 값을 지정 |
| ownerDocument | 노드가 소속되어 있는 문서의 최상위 요소를 반환 |
| parentNode | 현재 노드가 소속되어 있는 요소를 반환 |
| previousSibling | 현재 자식 노드와 같은 레벨 요소의 이전 자식 노드를 반환 |
- node 메소드
| 메소드 | 기능 |
| appendChild(새로운 노드) | 자식 노드의 리스트 끝에 새 노드를 추가 |
| cloneNode(옵션) | 노드를 복사 |
| hasChildNodes() | 노드가 자식이면 true |
| getAttribute(속성 이름) | 현재 노드의 속성 값을 반환 |
| hasAtrribute() | 노드에 속성이 정의되어 있는 경우 Boolean 값 반환 |
| hasChildNodes() | 노드에 자식 노드가 정의되어 있는 경우 Boolean 값 반환 |
| insertBefore(새로운 노드, 현재 노드) | 자식 목록에 새로운 노드 삽입 |
| removeChild(자식 노드) | 자식 목록에 현재 노드 삭제 |
| setAttributeNode(속성 참조) | 현재 노드에 속성을 생성하거나 지정 |
- 부모와 자식 노드 관계
DOM을 이용한 핵심 작업
- 자바스크립트를 이용한 페이지의 모든 태그 변경 가능
- 자바스크립트를 이용한 페이지의 모든 속성 변경 가능
- 자바스크립트를 이용한 페이지의 모든 CSS 스타일 변경 가능
- 자바스크립트를 이용한 페이지의 모든 이벤트 처리 가능
DOM 핵심 API
- 순회
childNodes, firstChild, lastChild, nextSibling, previousSibling - 선택
getElementById(), getElementsByTagName() - 결과(HTML)를 배열 형태로 가져 옴(HTMLCollection)
getElementsByClassName(),
querySelector() - 괄호 안에 CSS의 선택자처럼 값을 넣어야 함(id 쓸 경우 #id, class 쓸 경우 .클래스명),
querySelectorAll() - 결과가 여러 개 나올 때(클래스 등) 사용, 결과를 배열로 얻어 옴 - 생성 및 추가/삭제
createElement() - 엘리먼트(태그) 추가, createTextNode() - 텍스트 노드 추가, appendChild(), removeChild(),
createAttribute(), setAttribute(), getAttribute() - 내용 저장 및 조회: innerHTML, innerText
innerText를 쓰면 그냥 문자로 저장되고, innerHTML을 쓰면 태그로 적용된다.
<br>같이 HTML 태그를 쓰고 싶은 경우 innerHTML을 사용한다.
input type의 값에 접근할 때는 innetText가 아닌 value를 사용한다.
document.getElementById("id").innerText="text값 설정";
-> id값이 "id"인 document의 태그 사이에 "text값 설정"에 써 준 글자를 넣어 준다.
javascript:함수명()으로 body태그에서 script의 함수를 호출할 수 있다.
DOM 객체 접근 방법
1. 직접 접근 방법
- id값으로 접근: 결과가 Node형태로 리턴
document.getElementById("id값")
- 태그명으로 접근: 결과를 배열 형태로 얻어 옴(NodeList)
document.getElementsByTagName("tag명")
※ Elements임에 주의!
- class 속성으로 접근: 결과를 배열 형태로 얻어 옴(NodeList)
document.getElementsByClassName(class명)
- CSS selector 사용:
document.querySelectorAll(selector) - 일치하는 모든 요소를 찾아 결과를 배열 타입으로 받아 옴
document.querySelector(selector) - 뒤에 id값을 넣어서 id에 해당하는 요소를 하나만 얻어올 때 사용
※ querySelector류는 괄호 안에 선택자 값을 넣어야 함(id 쓸 경우 #id, class 쓸 경우 .클래스명)에 주의!!
2. 노드 워킹 접근 방법
상대적인 위치로 접근하는 방법이다.(첫 번째 자식, 마지막 자식, 형제 등)
DOM과 이벤트 처리를 사용할 때 주의할 점
DOM이 완전히 로드된 후 자바스크립트 코드가 실행되도록 해야 한다.
<head> 태그 내에 적어 준 스크립트 코드와 외부 파일로 불러온 자바스크립트는 HTML DOM이 생성되기 전에 실행되어, DOM에 접근이 불가능하다.
이를 해결하기 위해서는,
1) 스크립트 코드를 </body> 태그 직전(body 태그 맨 끝)에 작성하거나,
2) 페이지가 완전히 로딩된 후 스크립트 코드가 실행되도록 window.onload = init; 을 사용한다.
* jQuery에서는 $(document).reade(함수) 를 사용한다.
Form 객체
- 폼은 웹의 핵심으로, 브라우저(클라이언트)에서 서버에 입력 데이터를 전송하는 역할을 담당한다.
- 자바스크립트에서는 HTML폼에 form 객체가 상호작용할 수 있도록 지원되며, document 객체의 속성으로 설정된다.
document.forms[]배열을 통해 접근할 수 있다.
폼 이벤트 핸들러
- onSubmit() - 사용자가 데이터를 전송했을 때 발생
- onReset() - 리셋 버튼을 클릭했을 때 발생
폼 컨트롤의 종류
모든 폼 컨트롤에 해당하는 객체가 제공되므로, 속성과 메소드를 사용할 수 있다.
예) text 컨트롤에 대한 INPUT TEXT 객체가 제공된다.
|
입력 형식 |
속성 |
기능 설명 |
|
button |
name, id |
사용자의 입력을 위한 버튼을 작성한다. |
|
text |
name, id, size, maxlength |
사용자의 입력을 위한 텍스트박스 생성 size는 텍스트박스의 길이, maxlength는 허용되는 문자의 최대 길이 |
|
textarea |
name, id, size, rows, cols |
다중 라인을 입력할 수 있는 영역을 나타낸다. rows와 cols는 박스의 크기를 나타낸다. |
|
password |
name, id, value |
textbox와 같이 입력 시 데이터를 감춘다. *는 입력문자를 대신하여 나타낸다. |
|
checkbox |
name, id, value |
□을 나타내어 체크하면 true로 인식한다. name과 value로 다중 지정이 가능하다.(중복 선택 가능) |
|
radio |
name, id, value |
⊙를 나타내며, 여러 개 중 한 개만 체크 가능하다. |
|
select |
name, id, option, size, multiple |
popup 메뉴와 스크롤 박스를 나타낸다. 한 개만 지정할 수 있다. 다중 속성은 스크롤 박스에서만 가능하다. ? |
|
file |
name, id |
서버에 제공되느 파일 목록을 나타낸다. |
|
hidden |
name, id, value |
화면에 나타내는 이름과 value값을 감추어 준다. |
|
submit |
name, id, value |
클릭한 경우 서버에 정보를 전송한다. |
|
image |
src, name, id, value, align |
submit 버튼과 같은 기능을 하며, 문자 대신 이미지를 나타낸다. 이미지의 파일 이름을 src 속성으로 나타낸다. |
|
reset |
name, id, value |
폼에서 Reset을 누르면 입력 필드가 지워진다. |
- 전송 시 발생하는 이벤트: onsubmit
'전송' 버튼을 누르면 action에 적어 준 경로인 target.html로 이동하면서 브라우저창에 "target.html 입니다."가 출력된다.
이때 console창에 잠시 "호출됨" 메시지가 떴다가 사라진다.
그런데 submit이 실행되면서 페이지가 이동하기 때문에, 제대로 처리되었는지 확인이 어렵다.
이를 확인하기 위해서
1) submit을 막는 event.preventDefalut()를 사용할 수 있다.
event.preventDefault()를 사용하면 페이지가 이동하지 않는다.(전송 금지)
또는 2) return false 를 사용해 submit을 막을 수 있다.
- form에 action을 빼고, 함수 내에 변수.action="target.html"로 지정해서 사용 가능하다.
- select - onchange(안에 선택한 것이 변경된 경우)
xxx()함수가 호출되어 콘솔창에 id="fruits"의 value 값이 출력된다.
- 함수 호출 시 this 를 인자로 넘겨준다.( document.getElementsById("quantity"))
--> 이렇게 this 키워드로 해당 객체를 넘겨주면 s(인자값).value로 value에 바로 접근이 가능하다.
- this.value
value를 직접 인자로 넘겨줄 수도 있다.
- onkeyup(키보드의 키가 눌렀다 떨어질 때)
- checkbox 폼(주로 onclick 이벤트 사용)을 사용할 경우 여러 개의 값이 선택될 수 있기 때문에 getElementById의 value로는 접근이 불가능하다.
--> getElementsByName("name")를 사용하면 해당 이름을 가진 객체들을 배열로 얻어 온다.
console.log로 arr을 찍어 보면 배열이 출력되는데, 첫 번째 요소(사과)의 삼각형을 눌러 보면
checked가 'true'로 나타남을 볼 수 있다.(checkbox 폼은 체크된 요소를 true로 인식하기 때문)
- JSON 객체 저장, 출력하기
person이라는 이름의 JSON 객체를 생성, key:value 쌍으로 데이터를 저장한다.
JSON 객체 출력 시에는 key값을 이용해 접근 가능하다.(결과 담은 배열.key로 접근)
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] splice()와 slice() (0) | 2021.03.23 |
|---|---|
| [JavaScript] 이벤트 처리(event handling) (0) | 2020.09.13 |
| [JavaScript] 함수 (0) | 2020.09.13 |
| [JavaScript] 문장(Statement) (0) | 2020.09.13 |
| [JavaScript] 연산자 (0) | 2020.09.13 |
댓글