내 남자의 길~!

문서객체모델(Document Object Model, DOM)은 HTML과 XML 문서에 대한 프로그래밍 인터페이스
문서에 대한 구조적 정보를 제공하고 문서 구조나 외양 및 내용을 프로그램에서 접근할수 있는 방법 제공

DOM 노드의 유형
1. Node.ELEMENT_NODE는 엘리먼트 노드 유형에 대한 상수
2. Node.ATTRIBUTE_NODE는 애트리뷰트 노드 유형에 대한 상수
3. Node.TEXT_NODE는 텍스트 노드 유형에 대한 상수
4. Node.DOCUMENT_NODE는 문서 노드 유형에 대한 상수

다른 노드 유형들도 많이 있지만 주로 이 네가지 유형을 다루기 때문에 예시 하지 않는다.

nodeType 속성
DOM 노드 유형에 대해 상수로 정의 되어 있으므로 모든 노드에서 사용할수 있는 nodeType 속성을
사용하여 위 상수와 비교 함으로서 노드 타입을 알수 있다.
var someNode = document.documentElement.firstChild; if (someNode.nodeType == Node.ELEMENT_NODE) { alert("We've found an element node named " + someNode.nodeName); } else if (someNode.nodeType == Node.TEXT_NODE) { alert("It's a text node; the text is " + someNode.nodeValue); } else if (someNode.nodeType == Node.ATTRIBUTE_NODE) { alert("It's an attribute named " + someNode.nodeName + " with a value of '" + someNode.nodeValue + "'"); }

Internet Explorer는 자바스크립트에서 Node 상수를 사용할때 에러를 보고 한다.
Internet Explorer 7.0부터 이러한 문제를 정정했다 하지만 보편적으로 사용하는 6.0에서는 정상작동 하지 않는다.
따라서 Node 사용을 피해야 할것이다. 그냥 이런 것이 있다고만 알아 두도록 하자.

' http://www.meadroid.com의 ScriptX 공개 프린트 컴포넌트로 상당히 많은 기능이 있으나
무료로 사용할수 있은 기능은 아래와 같고.  그 외의 기능은 라이센스가 필요하다.

1. Select 객체

   리스트박스를 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
   그렇기 때문에 Select 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

   • Select 속성

     속성	의미
     name	리스트박스의 이름지정
     size	리스트박스에서 밖으로 보이는 목록의수
     value	리스트 박스의 목록에 설정할 값 지정
     selected	목록이 선택된 상태로 만든다.
     multiple	리스트 박스에서 하나이상 선택할 것인지를 지정

   • Select 객체의 특성

     특성	의미
     name	리스트박스의 이름
     length	리스트박스에 포함되어 있는 목록의수
     type	type에 입력된값(select)
     selectedIndex	리스트 박스에서 현재 선택된 목록의 인덱스
     options	리스트박스에 포함된 목록 정보의 배열
     options[i].index	각 목록의 인덱스
     options[i].text	각 목록의 문자열
     options[i].value	각 목록에 할당되어 있는 값
     options[i].prototype	옵션 메뉴에 새로운 특성을 만들기 위한 것
     options[i].selected	각 목록이 현재 선택되어 있는지의 여부
     options[i].defaultSelected	각 목록이 처음 선택되어 있는지의 여부

   • Select 객체의 이벤트 핸들러

     이벤트 핸들러	의미
     onChange	다른 목록을 선택 했을때 발생하는 이벤트 핸들러

     예제1

     실행화면

     <script> function foods(mira) { var sel = "선택된 음식 \n\n" for(i = 0;i if(mira.food.options[i].selected == true) { sel += mira.food.options[i].text + "\n" } } alert(sel) } </script> <form> 좋아하는 음식을 선택해 주세요. <select name="food" size=6 multiple> <option value="김치찌게">김치찌게 <option value="된장찌게">된장찌게 <option value="해물탕">해물탕 <option value="짜장면">짜장면 <option value="짬뽕">짬뽕 <option value="피자">피자 <option value="냉면">냉면 </select> <input type="button" value="선택" onclick="foods(this.form)"> </form>

     <FORM>좋아하는 음식을 선택해 주세요. 김치찌게된장찌게해물탕짜장면짬뽕피자냉면 <INPUT onclick="foods(this.form)" type="button" value="선택"> </FORM>

     예제2	실행화면
     <script> function colch(mirage) { document.bgColor = mirage.color.options[mirage.color.selectedIndex].value } </script> <form> 배경색바꾸기 <select name="color" size=5 onChange=colch(this.form)> <option value="white">화이트 <option value="ivory">아이보리 <option value="lavender">라벤더 <option value="pink">핑크 <option value="lightblue">라이트블루 <option value="gold">골드 <option value="aqua">아쿠아 </select> </form>	<FORM>배경색바꾸기 화이트아이보리라벤더핑크라이트블루골드아쿠아 </FORM>

2. Option 객체
   • Option 객체 만들기

     option_name = new Option( optionText , optionValue , defaultSelected , selected )

     optionText : 옵션 메뉴에 나타날 문자열
     optionValue : 옵션 메뉴를 선택했을때 리턴되는 값
     defaultSelected : 옵션 메뉴를 초기에 선택된 상태로 만들 것인지 아닌지를 지정
     selected : 옵션 메뉴가 선택되어 있는지 아닌지를 가리킨다.

     예제3

     실행화면

     <script> function mirage8(form) { var option1 = new Option("자두","optiontest1",true) form.test2.options[form.test2.length] = option1 } function mirage9(form) { if(form.test2.value != "") { form.test2.options[form.test2.selectedIndex] = null } else { alert("제거할 대상을 선택하세요") } } </script> <form> <select name="test2" size=7> <option value="optiontest1"> 사과 <option value="optiontest2"> 앵두 <option value="optiontest3"> 감 <option value="optiontest4"> 수박 </select> <input type="button" value="추가" onclick="mirage8(this.form)"> <input type="button" value="제거" onclick="mirage9(this.form)"> </form>

     <FORM> 사과앵두감수박 <INPUT onclick="mirage8(this.form)" type="button" value="추가"> <INPUT onclick="mirage9(this.form)" type="button" value="제거"> </FORM>

3. FileUpLoad 객체
   • FileUpLoad 객체의 특성

     특성	의미
     name	파일업로드 입력양식 이름
     value	파일업로드 입력양식에 입력된 파일이름

     예제4	실행화면
     <script> function fileinfor(form) { if(form.fileup.value != "") { mirage = window.open("","","status=no,scrollbars=yes") mirage.document.write("<img src=" + form.fileup.value + ">" ) } else { alert("이미지를 선택하세요") } } </script> <form name=form6> 이미지 파일보기<input type="file" name="fileup"> <input type="button" value="보기" onclick="fileinfor(this.form)"> </form>	<FORM name="form6">이미지 파일보기<INPUT type="file" name="fileup"> <INPUT onclick="fileinfor(this.form)" type="button" value="보기"> </FORM>

     [출처] [16]입력양식3|작성자 붉은매

Button 객체
버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Button 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

Button 객체의 특성
특성 의미
name  버튼 입력양식의 이름 
value  버튼 입력양식에 입력한 값 
type  type택에 입력된값(button) 

Button 객체의 메소드
메소드 의미
click()  버튼을 클릭시키는 메소드 

Button 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  버튼을 클릭하는 순간 실행되는 이벤트 핸들러 
onMouseDown  마우스 버튼을 눌렀을때 실행되는 이벤트 핸들러 
onMouseUp  마우스 버튼을 놓았을때 실행되는 이벤트 핸들러 

Submit 객체
데이터 보내기 버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Submit 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

Submit 객체의 특성
특성 의미
name  데이터 보내기 버튼 입력양식의 이름 
value  데이터 보내기 버튼 입력 양식에 입력한 값 
type  type에 입력된 값(submit) 

Submit 객체의 메소드
메소드 의미
click()  데이터 보내기 버튼을 클릭시키는 메소드 

Submit 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  데이터 보내기 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 

Reset 객체
리셋 버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Reset 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

Reset 객체의 특성
특성 의미
name  리셋 버튼 입력양식의 이름 
value  리셋 버튼 입력양식에 입력한 값 
type  type에 입력된 값(reset) 

Reset 객체의 메소드
메소드 의미
click()  리셋 버튼을 클릭시키는 메소드 

Reset 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  리셋 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 

Checkbox 객체
체크박스를 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Checkbox 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

Checkbox 객체의 특성
특성 의미
name  체크박스의 이름 
value  체크박스에 할당할 값 
type  type에 입력된 값(checkbox) 
checked  체크박스가 체크 되었는지의 여부 
defaultChecked  체크박스가 처음 체크 되었는지의 여부 

Checkbox 객체의 메소드
메소드 의미
click()  체크박스를 클릭시키는 메소드 

Checkbox 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  체크박스를 클릭하는 순간에 실행되는 이벤트 핸들러 

Radio 객체
라디오 버튼을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Radio 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

Radio 객체의 특성
특성 의미
name  라디오 버튼의 이름 
value  라디오 버튼에 할당할 값 
type  type에 입력된 값(radio) 
checked  라디오 버튼이 체크 되었는지의 여부 
defaultChecked  라디오 버튼이 처음 체크 되었는지의 여부 
length  그룹안에 포함되어 있는 라디오 버튼의 수 

Radio 객체의 메소드
메소드 의미
click()  라디오 버튼을 클릭시키는 메소드 

Radio 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  라디오 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 

예제1 실행화면
<script language="javascript">
function sel(mirage) {
ans = mirage.value
alert(ans + "를 선택했습니다")
}
</script>
선택하세요
<form name=form5 action="">
<input type="radio" name="color1" value="사과" onClick="sel(this)">사과
<input type="radio" name="color1" value="배" onClick="sel(this)">배
<input type="radio" name="color1" value="앵두" onClick="sel(this)">앵두
</form>
 선택하세요
<FORM name="form5" action=""><INPUT onclick="sel(this)" type="radio" value="사과" name="color1">사과
<INPUT onclick="sel(this)" type="radio" value="배" name="color1">배
<INPUT onclick="sel(this)" type="radio" value="앵두" name="color1">앵두
</FORM>

[출처] [15]입력양식2|작성자 붉은매

1. Form 객체

   form택을 자바스크립트에서 접근하기 위한 객체로 document객체 하위에 속한다.

   • Form 객체의 특성

     특성	의미
     target	데이터를 서버로 보낸후 받아보는 결과를 어느 윈도우에서 받아 볼지를 지정
     action	압력한 데이터를 처리할 CGI 프로그램의 URL지정
     method	데이터를 어떤 HTTP 프로토콜로 보낼 것인지 지정한다
     encoding	CGI 프로그램에 보내질 데이터 타입을 지정한다
     elements	form택안에 있는 모든 입력양식을 배열로 저장

   • Form 객체의 메소드

     메소드	의미
     submit()	입력된 데이터를 서버로 보내기 위한 메소드
     reset()	입력양식을 리셋 시키는 메소드

   • Form 객체의 이벤트 핸들러

     이벤트 핸들러	의미
     onSubmit	데이터를 서버에 보내라는 명령을 내렸을때 실행되는 이벤트 핸들러
     onReset()	리셋버튼을 눌렀을때 실행되는 이벤트 핸들러

     예제1

     실행화면

     <script language="javascript"> <!-- function forminfor() { var mirage = "Action : " + document.form1.action + "\n" mirage += "Target : " + document.form1.target + "\n" mirage += "Method : " + document.form1.method + "\n" mirage += "encoding : " + document.form1.encoding + "\n" alert(mirage) } //--> </script> <form name="form1" action="http://mirage728.com.ne.kr" target=" _blank" method=post> <input type="button" value="form 정보" onclick="forminfor()"> <input type="submit" value="submit"> </form>

     <FORM name="form1" action="http://mirage728.com.ne.kr" method="post" target=" _blank"><INPUT onclick="forminfor()" type="button" value="form 정보"> <INPUT type="submit" value="submit"> </FORM>

     예제2	실행화면
     <script> function chform() { mirage = document.form2.elements[0].value if(mirage != "") alert(mirage + "님 홈 방문을 환영 합니다.\n\n좋은 시간 되세요..^^") else alert("이름을 입력해 주세요") } </script> <form name=form2> 이름을 입력해 주세요 <input type="text"> <input type="button" value="확인" onclick="chform()"> <input type="reset" value="취소"> </form>	<FORM name="form2">이름을 입력해 주세요 <INPUT> <INPUT onclick="chform()" type="button" value="확인"> <INPUT type="reset" value="취소"> </FORM>

2. Text 객체

   한줄짜리 문자열을 입력 받기 위한 형식으로 form 객체의 하위에 속한다.

   • Text 객체의 특성

     특성	의미
     name	텍스트 입력양식의 이름
     value	텍스트 입력양식에 입력한 값
     defaultValue	처음 input 택의 value에 입력했던 값
     type	input 택에서 type에 입력된 값

   • Text 객체의 메소드

     메소드	의미
     select()	텍스트 입력필드에 있는 모든 값 선택하기
     focus()	텍스트 입력필드안에 커서 넣기
     blur()	텍스트 입력필드안의 커서 제거하기

   • Text 객체의 이벤트 핸들러

     이벤트 핸들러	의미
     onSelect	마우스로 입력필드의 문자열을 선택했을 때
     onFocus	마우스나 탭으로 커서가 입력필드 안에 들어갔을 때
     onBlur()	마우스나 탭으로 커서가 입력필드 에서 나갔을때
     onChange	텍스트 입력양식의 값을 바꾸었을 때

     예제3

     실행화면

     <script> function mirage5(mir) { test = mir.tex1.value if(test == "") { alert("답을 입력해 주세요") mir.tex1.focus() } else if(test == "3" || test == "3번" || test == "삼" || test == "신기루") { alert("정답입니다.\n\n상품은 아직 마련하지 못했습니다..^^;" ) } else { alert("틀렸습니다.\n다시선택해 주세요.") mir.tex1.focus() mir.tex1.select() } } </script> 문제1) mirage는 무슨 뜻일까요..? 1 바보 2 미꾸라지 3 신기루 4 신발 <form name=form4> 정답: <input type="text" name="tex1"> <input type="button" value="확인" onclick="mirage5(this.form)"> </form>

     문제1) mirage는 무슨 뜻일까요..? 1 바보 2 미꾸라지 3 신기루 4 신발 <FORM name="form4">정답: <INPUT name="tex1"> <INPUT onclick="mirage5(this.form)" type="button" value="확인"></FORM> ※ 간단해석 input 버튼을 클릭하면 mirage5함수를 호출하는데 매개변수로 this.form을 함께 넘겨주고 있다. this란 객체 자기 자신을 가리키는 말로 this.form은 form객체 자신을 가리킨다. 위에있는 스크립트를 보면 mirage5함수의 매개변수에 this.form 이 아닌 mir로 되어있다. 위에있는 mir은 this.form을 담은 하나의 변수이다

     객체에 접근 할때는 매개변수에 들어있는(mir) 이름으로 접근하면 된다.
     mir(mirage5함수에 들어있는 매개변수로 this.form을 담고있는 form객체 자신이다).text1.value
     객체에 접근 할때는 상위 객체부터 하위객체로 . 을 구분으로 해서 써주면 된다.
     보통 최상위객체는 생략해도 상관없다.[(window.document.)mir.text1.value]

3. Textarea 객체

   여러줄을 입력할 수 있는 양식이다.
   텍스트 영역을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
   그렇기 때문에 Textarea 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

   • Textarea 속성

     속성	설명
     name	텍스트 영역의 이름지정
     rows	텍스트 영역의 높이
     cols	텍스트 영역의 너비
     wrap	글자가 우측 끝까지 갔을때 자동 줄바꿈할 것인지의 여부

   • Textarea 객체의 특성

     특성	설명
     name	텍스트 영역의 이름
     value	텍스트 영역에 입력한 값
     defaultValue	<textarea> </textarea> 사이에 들어간 글자
     type	input 택에서 type에 입력된값(textarea)

   • Textarea 객체의 메소드

     메소드	설명
     select()	텍스트 영역 안에 있는 모든값 선택하기
     focus()	텍스트 영역안에 커서 넣기
     blur()	텍스트 영역안에서 커서 제거하기

   • Textarea 객체의 이벤트 핸들러

     이벤트 핸들러	설명
     onSelect	마우스로 텍스트 영역에서 글을 선택했을 때
     onFocus	마우스나 탭으로 커서가 텍스트안에 들어갔을 때
     onBlur	마우스나 탭으로 커서가 텍스트 영역을 나갔을 때
     onChange	텍스트 영역의 값을 바꿨을 때
     onKeyDown	입력필드에서 키를 눌렀을때
     onKeyPress	입력필드에서 키를 눌렀을때
     onKeyUp	입력필드에서 키를 놓았을때

4. Password 객체

   글내용을 * 표시로 나타내서 주위의 다른 사람이 글내용을 볼수없게 하는 기능이다.
   암호 입력 양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
   그렇기 때문에 Password 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

   • Password 속성

     속성	설명
     name	암호 입력 양식의 이름지정
     value	암호 입력 양식에 미리입력할 문자열 지정
     type	password
     size	암호 입력양식의 가로 길이지정

   • Password 객체의 특성

     특성	설명
     name	암호 입력 양식의 이름지정
     value	암호 입력 양식에 입력한 값
     defaultValue	처음 value속성에 설정된 값
     type	type에 입력된값(password)

   • Password 객체의 메소드

     메소드	설명
     select()	암호 입력양식에 있는 모든값 선택하기
     focus()	암호 입력 양식안에 커서넣기
     blur()	암호 입력 양식안에서 커서 제거하기

5. Hidden 객체

   숨겨진 입력양식으로 사용자가 브라우저를 통해 볼수가 없다.
   숨겨진 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
   그렇기 때문에 Hidden 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

   • Hidden 속성

     속성	설명
     type	hidden
     value	숨겨진 입력양식에 저장할 문자열 지정
     name	숨겨진 입력양식의 이름지정

   • Hidden 객체의 특성

     특성	설명
     name	숨겨진 입력양식 이름
     value	숨겨진 입력양식에 입력한 값
     defaultValue	처음 value속성에 설정된 문자열
     type	type에 입력된값(hidden)