[JavaScript]문서 객체 모델(DOM)

JS의 객체 중 마지막은 문서 객체 모델(DOM)로, 최상위 객체 window의 하위 객체인 document 객체를 말한다. 이 역시 window는 생략 가능하며, html에서 onclick 이벤트로 사용될 수 있다.

 

문서 객체 모델(DOM)

DOM도 BOM과 작성 순서는 똑같고 BOM 자리에 대신 document가 들어가는 window.document.하위객체.속성(또는 기능) 형태로 쓴다. html 문서 내의 구성원들을 표현하며, 속성으로는 페이지 이름(document.title), 주소값(document.location), 배경색(document.bgColor), 글자색(document.fgColor) 등이 있다. 또한 이미지, 태그, 폼 등도 객체이기 때문에 document.객체명 으로 쓸 수 있다. 만약 객체명이 없거나 모르는 상태라면, 객체는 배열로 저장되기 때문에 객체명 대신 객체[인덱스] 를 쓰기도 한다. 예를 들어 여러 image 중 첫 이미지 name이 img1이면 document.img1 형태로, name을 모르는 경우 document.images[0] 형태로 쓴다.

 

아래는 document객체를 사용한 여러 가지 예시다. document객체의 속성을 출력하거나(fun1) 배경색을 입력받고(fun2), 이미지를 변경하며(change1, change2), form의 action 페이지를 바꾸는 동시에 button을 submit으로 동작하게 하는(fun3) 함수를 JS에서 작성했다. 참고로 submit 버튼은 onclick 이벤트를 넣을 수 없다.

여기서 이미지 파일은 꼭 같은 폴더에 있어야 한다. document 속성을 누르면 페이지 정보가 나오고, radio 버튼에 따라 배경색이 변경되거나, 마우스를 올리고 내렸을 때 그림이 바뀐다. 그리고 전송하기를 누르면 location.html이 아닌 history.html로 submit이 된다.

 

회원가입

마지막으로 아래는 회원가입 폼인데, document객체를 사용한 JS코드와 함께 쓴 것이다. fun() 함수를 써서 아이디, 비밀번호 등 입력값이 없으면 false값을 리턴하여 submit이 불가능하게 만들었다. 특정 값이 입력되지 않았을 때는 값을 입력하라는 경고창과 함께 페이지가 넘어가지 않는다.

비밀번호 확인 칸은 위에 입력한 비밀번호와 같아야 하고, 주민등록번호는 앞자리 6자, 뒷자리 7자를 정확히 입력해야 넘어가며, 뒷자리가 어떤 숫자로 시작하느냐에 따라 자동으로 성별이 선택되게 만들었다.

 

참고사항으로 배열, 폼, 선택상자같은 document의 하위 객체에서 속성은 src, name, value, type, method 등이 있고, 기능은 focus, blur, submit 등이 있다.

이렇게 웹 페이지를 만드는 데 필요한 javascript 부분은 끝났다. JS의 함수를 HTML 코드에 결합시키는 방법은 많이 쓰기 때문에 계속 연습이 필요하다. html, css, javascript는 정적 페이지를 만드는 것이고, 동적 페이지를 사용하기 위한 JSP를 이제 학습하면 된다.