[JS] 브라우저 객체 모델(BOM) - Document

Document 객체는 최상위 객체인 window객체의 하위 객체로 문서에 대한 모든 정보를 관리하는 객체이다.

속성

nodeName : 노드 이름
nodeType : 특정 노드의 형식을 지정
nodeValue : 텍스트 노드의 문자열 값
childNodes : 하위 노드의 리스트
firstChild : 하위 노드 리스트 중 첫번째 노드
lastChild : 하위 노드 리스트 중 마지막 노드
parentNode; 자신의 부모 노드
nextSibling : 자신의 다음 형제노드
previousSibling : 자심의 바로 앞 형제 노드
innerHTML : 태그의 내용

메소드

open() : HTML문서에 데이터를 보낼 준비를 하거나 데이터를 모두 전송했음을 알림

close() : open()로 열려진 문서를 닫아 주는 역할

clear() : 브라우저에 나타난 문서를 지움

write() : 지정된 문서의 데이터를 출력

writeln() : 지정된 문서의 데이터를 출력
createElement(tagName) : 요소 노드를 생성
createTextNode(text) : 텍스트 노드를 생성
appendChild(node) : 객체에 노드를 연결
item(index) : 객체배열 중 해당하는 이덱스 객체 리턴
getElementById(id) : id를 가진 태그(객체)를 리턴
getElementsByName(name) : name을 가진 태그의 배열 리턴
getElementsByTagName(tagName) : tagName과 일치하는 태그의 배열 리턴
getAttribute(String attrName) : 속성값 검색
setAttribute(String attrName, String attrValue) : 속성값 설정
removeChild(child) : 자식노드 제거
insertBefore(Nod new, Node target) : target 엘리먼트의 형제로 앞에 추가(특정 위치 앞)
replaceChild(Node new, Node old) : 자식노드교체
hasChildNodes() : 자식 노드 여부 검사
cloneNode(boolean deep) : 노드복사

다음은 Document 객체의 하위 객체에 대해 알아보자.

Image 객체

<img>태그의 정보를 가진 객체

속성

name : 이미지 객체의 이름

src : 이미지의 URL 주소

lowsrc : 이미지의 URL 주소를 나타내며 해상도가 낮은 이미지를 전송할 때 사용

height : 이미지의 높이

width : 이미지의 넓이

border : 이미지의 테두리

complete : 이미지를 모두 전송받았는지를 알림(boolean)

Form 객체

<form>태그의 정보를 가진 객체로써 폼안에 데이터를 접근하기 위해 많이 사용된다.

속성

action : 서버 CGI 프로그램의 URL을 지정

elements : Form입력 양식에 대한 객체 정보들의 배열

enctype : 서버 CGI 프로그램에 보낼 데이터의 타입을 지정

method : 데이터 전송방식(get, post 등)

target : 처리된 결과를 출력할 윈도우 또는 프레임

length : Form 객체의 갯수

name : Form의 이름

핸들러

onSubmit : 사용자가 입력 양식의 데이터를 서버로 전송할 때 사용되는 이벤트 핸들러

onReset : 입력 양식을 초기화 할 때 사용되는 이벤트 핸들러

메소드

submit() : 입력 양식의 데이터를 서버로 전송할 때 사용

reset() : 입력 양식을 초기화 할 때 사용

---------------------------------------------------------------------------------

Form 객체에는 <input>태그의 타입으로 하위 객체들이 있다. text, button, checkbox, radio, select, textarea, password, hidden 이 하위 객체들의 종류다. 하나씩 살펴보자.

text 객체

문자열을 입력할 때 사용되는 객체이다.

속성

name : 객체의 이름

id : 객체의 id

value : 객체의 값

defaultValue : 관리자에 의해 미리 지정된 객체의 값

type : text객체임을 지정

메소드

focus() : 포커스를 얻음

blur() : 포커스를 잃음

select() : 입력된 값을 선택

핸들러

onFocus : 포커스가 text 객체 안으로 이동할 때 발생

onBlur : 포커스가 text 객체 밖으로 이동할 때 발생

onSelect : text 객체에 입력된 문자열을 선택할 때 발생

onKeypress : text 객체 내에서 키보드를 눌렀을 때 발생

onChange : text 객체에 입력한 문자열이 변경할 때 발생

checkbox 객체

여러 개의 선택 항목 중에서 하나 이상의 항목을 선택하는 객체

속성

checked : 선택여부 지정

name, value, type은 텍스트와 동일

핸들러

onClick : 객체를 클리할 때 발생

radio 객체

여러 개의 선택 항목 중에서 하나의 항목을 선택할 때 사용되는 객체

속성

defaultChecked : 디폴트로 선택되었음을 지정

length : 객체의 갯수

checked, name, value, type은 checkbox와 동일

핸들러

checkbox와 동일

select 객체

여러 개의 목록 중에서 하나 이상을 선택할 때 사용되는 객체

option 객체를 하위객체로 가진다.

속성

selectedIndex : 현재 선택된 목록의 인덱스

options : 목록 정보 배열

options[i].index : 각 목록의 인덱스

options[i].value : 각 목록에 할당된 값

options[i].text : 각 목록에 할당된 문자열

options[i]. selected : 각 목록이 선택되어 있는지 여부

options[i].defaultSelected : 각 목록이 처음 선택되어 있는지 여부

핸들러

onChange : 다른 목록을 선택할 때 발생

textarea 객체

text객체의 속성, 메소드, 핸들러 동일하며 다른 점은 줄바꾸기가 가능하다.

password 객체

입력한 글자를 "*"와 같은 문자로 표현

hidden 객체

시각적으로 표현되지 않은 감추어진 데이터 전송시에 사용