자바스크립트 정리

window-------------frame    ---form-----------texarea      navigator-----plugin
           --------document-----------layer       ---test                  -----mimetype
           --------location        ---link        ---fileupload
           --------history         ---image       ---password
                                   ---area        ---hidden
                                   ---anchor      ---submit
                                   ---applet      ---reset
                                   ---plugin      ---radio
                                                  ---checkbox
                                                  ---button
                                                  ---select--------------option

#########################
개체(Object) : 개체라는 말은 상당히 추상적이다. 이 개념을 알려면 "객체지향"을 공부해야 한다. 이 과에서 의미한 개체는 HTML 문서, 브라우저 윈도우, 날짜/시간과 같은 것을 의미하며 일반적으로 개체는 그 개체가 할 수 있는 일을 정의한 메소드와 그 개체의 특징을 나타내는 속성으로 구성된다.
###  date : Date는 시스템의 날짜와 시간을 얻기 위한 개체이다. 이 개체를 생성하는 방법은 다음과 같다 :

Nameofobject = new Date();
###  document : 이것은 해당 자바스크립트를 포함하고 있는 HTML 문서를 참조할 수 있는 개체를 의미한다.
###  location : Location은 특정 URL을 지징하는 개체이다. 다음과 같은 형식으로 사용된다:

parent.location='index.html'
(location이란 속성도 있는데 사용법이 서로 틀리다는 것을 기억하기 바란다.)
###  window : window는 브라우저 화면을 참조할 수 있는 개체이다.

#########################
메소드(Method) : 메소드는 어떤 개체로 하여금 어떻게 행동할지를 알려주는 하나의 명령을 의미한다.
alert() : alert는 window 개체 또는 하이퍼텍스트 링크내에서 대화 상자를 만들기 위해 사용되는 메소드이다. alert문의 괄호 안에 있는 텍스트를 대화 상자에 보여주고 OK 버튼이 함께 제공되며 사용자가 계속 진행하기 위해서는 이 버튼을 눌러야만 한다.
getMonth() : Date 개체의 메소드로 현재 월을 0~11 사이의 숫자로 반환한다.
getDate() : Date 개체의 메소드로 현재 날짜를 1~31 사이의 숫자로 반환한다.
getYear() : Date 개체의 메소드로 현재 연도를 0~99 사이의 숫자로 반환한다. (인터넷 익스플로러 5 이상에서는 4자리 숫자를 반환한다)
getFullYear() : Date 개체의 메소드로 현재 연도를 네자리 숫자로 반환한다. (넷스케이프 4.0 이상, 인터넷 익스플로러 3.x 이상에서 사용할 수 있다)
getDay() : Date 개체의 메소드로 현재 요일을 1~7 사이의 숫자로 반환한다.
getHours() : Date 개체의 메소드로 현재 시간을 0~23 사이의 숫자로 반환한다.
getMinutes() : Date 개체의 메소드로 현재 분을 0~59 사이의 숫자로 반환한다.
getSeconds() : Date 개체의 메소드로 현재 시간을 0~59 사이의 숫자로 반환한다.

Write() : Write 메소드는 Document 개체가 웹 페이지 상에 텍스트를 표시할 수 있도록 해주는 메소드이다.

#########################
속성(Properties) : 속성은 개체의 한 특징 또는 그 개체의 일부를 의미한다. 예를 들어 브라우저 윈도우의 상태 표시줄은 window 개체의 속성이며 windows.status로 참조된다. (표시형식 : 개체이름.속성이름)

bgColor : bgColor는 document 개체의 속성으로 HTML 문서의 배경색을 의미한다.
parent : parent는 특별히 프레임과 함께 자주 사용되는 속성으로 특정 프레임을 가리킬 때 사용된다. 만일 프레임 밖에서 사용된다면 브라우저 전체 윈도우를 가리키게 된다.
status : status는 window 개체의 속성으로 브라우저 화면의 왼쪽 하단에 위치한 상태 표시줄을 의미한다.

#########################
에러(Error) : 에러 또는 오류 메시지 창은 스크립트 안에 뭔가 문제가 있을 경우 발생한다. 크게 두 가지 종류가 있는데 구문(Syntax) 오류와 런타임(RunTIme) 오류이다.
구문 오류(Syntax Error) : 스크립트 안에 잘못된 철자가 있거나 컴퓨터가 인식하기 어려운 텍스트가 있을 경우, 자바스크립트 문법에 어긋난 경우 발생한다.
런타임 오류(Run-Time Error) : 런타임 오류는 잘못된 자바스크립트 명령어를 사용했을 때 발생한다.

#########################
이벤트 핸들러(Event Handlers) : 이벤트 핸들러는 HTML 코드에 내장되는 자바스크립트 명령어다. 사용자와 웹 페이지 사이의 상호 작용을 위해 HTML 코드와 함께 사용된다.
onBlur : onBlur는 사용자가 select, text, textarea 폼 요소에 있다가 그 요소에서 벗어나게 될 때 발생하는 이벤트 핸들러이다. 즉, 사용자가 그 아이템에 대한 포커스를 잃을 때 발생한다.
onChange : onChange는 사용자가 select, text, textarea 폼 요소에 있는 텍스트를 변경한 후 그 요소를 떠날 때 발생하게 된다.
onClick : onClick은 사용자가 링크와 같은 오브젝트를 클릭할 때 발생한다.
onFocus : onFocus는 사용자가 select, text, textarea 폼 요소를 선택할 때 발생한다. 즉 사용자가 그 폼 요소에 포커스를 맞출 때 발생한다.
onLoad : onLoad는 웹 페이지가 열릴 때 발생하는 이벤트로 HTML의 BODY 태그 안에서 사용된다.
onMouseOver : onMouseOver는 사용자가 링크 위에 마우스를 올려 놓았을 때 발생하는 이벤트 핸들러이다.
onSelect : onSelect는 사용자가 text, textarea 폼 요소에 있는 텍스트의 일부 또는 전체를 선택할 때 발생한다.
onSubmit : onSubmit은 submit 버튼 폼 요소를 사용자가 틀릭할 때 발생한다.
onUnLoad : onUnload는 사용자가 웹 페이지를 떠날 때 발생하는 이벤트로 HTML의 BODY 태그 안에서 사용된다.

#########################
주석(Comment) : 주석은 더블 슬래쉬(//)로 표시한다. 주석 처리하고 싶은 텍스트의 왼쪽 옆에 "//" 표시를 해주면 된다. "//"는 // 표시의 오른 쪽에 있는 라인 전체를 주석 처리하는 것이다. 만일 주석 처리하고 싶은 줄이 여러 줄이라면 // 대신 시작을 "/*"로 끝을 "*/"로 막아 주면 된다. 즉, /*와 */ 사이에 있는 모든 내용이 주석 처리 된다는 것이다.

#########################
컴마(comma : ",") : 자바스크립트 이벤트 핸들러를 동시에 여러 개 사용하고자 할 때 컴마(,)를 사용한다.

###################################################################################
window.alert('내용');//경고창
prompt('내용',초기값);//입력값 받기
confirm('내용');//확인,취소
print();//현 윈도우를 인쇄하고자 할 때

parseInt(변수); 소수점자리 그냥 버림
parseFloat(변수);
Math.ceil(변수); 소수점자리없앤정수(소수점자리 값 올림)
Math.floor(변수); 소수점자리없앤정수(소수점자리 값 내림)
Math.round(변수); 소수점자리없앤정수(소수점자리 값 반올림)

var test;
var myArray = new Array();
var myArray = new Array(5);
var myArray = new Array('1','2','5','4','3');
myArray[0] = '1';
myArray[0][0] = '1';

if(비교값1){처리내용1}elseif(비교값2){처리내용2}else{비교값3};
논리연산자 && (AND), || (OR), ! (NOT)
연산기호 ==,<,>,<=,>=,!=
switch (비교내용) {
 case '1':
  처리내용1; break;
 case '2':
  처리내용2; break;
 default:
  처리내용3; break;
}

function 함수명(초기값){ 처리내용; 리턴값; }
return 반환값;

for(i=0;i<5;i++){처리내용}
while(i<5){처리내용};

isNaN(변수); -> 숫자 false 문자 true

length -> 문자열의 길이
myArray.length; -> 변수길이
myArray.sort();
var myString = new String("나는 String 개체입니다");
var lengthOfString = myString.length;
charAt(위치값) -> 문자열에서 한문자 선택
charCodeAt(위치값) -> 문자열에 한문자 코드값
myString = String.fromCharCode(65,66,67); -> 문자 코드를 문자열로 변환 (ABC)
indexOf('앞부분 부터 찾을문자');
lastIndexOf('뒷부분 부터 찾을 문자') -> 문자열의 위치를 반환, 없을 경우 -1반환
substr(시작위치,복사할문자수); -> 문자열의 일부분 복사하기
substring(시작위치,끝위치);
myDate.toString(); -> 숫자를 문자열로 반환
myString.toLowerCase(); -> 문자열의 소문자 변환
myString.toUpperCase(); -> 문자열의 대문자 변환

Math.PI 파이값
Math.floor((Math.random() *  6) + 1); -> 1~6사이에 난수를 발생한다.
Math.pow(제곱근, 변수) -> 제곱 Math.pow(4,2) = 16
Math.abs(변수); -> 절대값

concat() -> var TestArray = TestA.concat(TestB); TesTA와 TestB에 배열을 결합
slice() -> var slicedArray = TestA.slice(1,3); TestA에 인덱스1에서 부터 인덱스 3까지를 가져온다.
join() -> var TestString = TestA.join("<br>"); TestA를 문자열로 변환 1<br>2<br>5<br>4<br>3...
sort() -> TestA.sort(); 배열을 순서대로 정렬
reverse() -> TestA.reverse(); 배열을 역순으로 정렬

var myDate = new Date();
var myDate = new Date(949278000000);
var myDate = new Date("1 jan 2003");
var myDate = new Date(2000,0,31,15,35,20,20); 2000년 1월 31일 35분 20초 20밀리
getDate() -> myDate.getDate(); 날짜를 반환
getDay() -> myDate.getDay(); 요일을 정수로 반환
getMonth() -> myDate.getMonth(); 월을 정수로 반환
getFullYear() -> myDate.getFullYear; 년을 네 자리 수로 반환
setDate() -> myDate.setDate(27); 날짜를 설정
setMonth() -> myDate.Month(1); 월을 설정
setFullYear() -> myDate.setFullYear(2003); 년을 설정
myDate.getHours(); 시간
myDate.getMinutes(); 분
myDate.getSeconds(); 초
myDate.getMilliseconds; 밀리

window.location;
window.location.replace(URL);
window.location.href(URL);
window.location.reload();

window.history; window.history.go(-1); window.history.go(1); window.history.go(3);

window.navigator

window.screen;
window.screen.height;//화면 높이
window.screen.width; //화면 너비
window.screen.colorDepth;//사용가능한 색상수
window.screen.pixelDepth;//한 픽셀당 비트수

window.document;
window.document.bgColor = "skyblue";
window.document.write('내용');
window.document.forms[인덱스]
window.document.form1.length;
window.document.images[이름명]
window.document.images[이름명].src = "값.gif"
window.document.images[이름명].value = "처리이름"
window.document.links[인덱스]
window.document.links[인덱스].onclick = "이름명";

window.defaultStatus = '하이' -> 상태 표시줄 메시지-항상 보여주기 위한 상태표시줄 메시지

window.status = '하이' -> 상태 표시줄 메시지

onLoad="처리내용";//웹페이지 열때//body,frameset(여러개의 프레임의 경우)
onunload="처리내용";//웹페이지 닫을때//body,frameset
onresize="처리내용";//윈도우나 프레임의 크기를 바꾸었을 때

onclick="처리내용";//클릭했을 때
onmouseup="처리내용";//마우스 버튼을 눌렀다 놓았을 때
onmousedown="처리내용";//마우스 버튼을 눌렀을 때
onmouseover="처리내용";//링크 위로 마우스가 지나갔을 때
onmouseout="처리내용";//마우스가 링크나 특정 영역 안에 있다가 나갔을 때
onmousemove="처리내용";//마우스를 움직였을 때
onmouseup="처리내용";//마우스 버튼을 눌렀다 놓았을 때

onfocus="처리내용";//포커스를 맞출 때 발생한다.
onblur="처리내용";//포커스를 잃을 때
onreset="처리내용";//입력 양식에서 취소reset시켰을 때
onsubmit="처리내용";//submit버튼을 누를 때
onselect="처리내용";//텍스트를 블럭 지정할때
onchange="처리내용";//내용이 바뀔때

onkeydown="처리내용";//키를 입력했을 때
onkeypress="처리내용";//키를 눌렀을 때
onkeyup="처리내용";//키를 눌렀다 놓았을 때

window 객체의 메소드
blur();//특정 객체의 포커스 없애기
click();//입력 양식이나 링크를 마우스로 클릭했을 때
focus(); -> txtAge.focus();//특정 개체에 포커스가 가도록 만들기
select(); -> txtAge.select();//입력 양식의 한 필드 블록 지정했을 때

onabort -> 이미지의 로딩을 취소할 때 발생한다.
onerror -> 페이지를 로딩하면서 오류가 생길 때 발생한다.
//이미지나 문서가 전송되는 도중에 네트웍이 끊어지거나 시스템이 다운되는 등의 여러가지 이유로 에러가 생겼을 때

**********************************************************************************************
**********************************************************************************************
Button 개체
이벤트 - onblur, onclick, onfocus, onmousedown, onmouseup
프로퍼티 - form, name, type, value
메서드 - blur(), click(), focus()

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CheckBox 개체
이벤트 - onblur, onclick, onfocus
프로퍼티 - checked, defaultChecked, form, name, type, value

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
document 개체//body,head,title태그 안
이벤트 - onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmouseup
프로퍼티
- alinkColor(링크를 클릭했을 때 나타나는 색), vlinkColor(이전에 방문했던 링크를 표시하는 색),linkColor(문서에서 링크를 표시하는 색), links(문서에 있는 링크들의 배열)
-anchors (문서에 있는 표식들의 배열), applets(문서에 있는 자바애플릿의 배열),embeds(문서에 있는 플러그인들의 배열), form_name, forms(문서에 있는 입력양식들의 배열), images(문서에 있는 이미지들의 배열) ->.length로 배열 [0]...
-bgColor, fgColor(문서의 전경색),cookie(클라이언트의 pc에 저장된 정보), domain(현재 문서의 도메인 이름), lastModified(문서가 마지막으로 수정된 날짜), referrer(링크로 현재 문서에 왔을 때 이전 문서의 url위치), title(문서의 제목), URL(문서의 URL주소)
메서드 - close()(문서에 데이타를 출력하는 것을 마무리), open()(문서에 데이타를 출력하기 위해 준비시키는 것), write()(문서에 데이타 출력), writeln()(문서에 데이터 출력(줄바꾸기 포함))

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
history 개체
프로퍼티 - length
메서드 - back(), forward(), go()

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
img 개체
이벤트 - onabort, onerror, onload
프로퍼티 - border, complete, height , hspace, lowsrc, name, src, vspace, width
**********************************************************************************************
**********************************************************************************************
window.document.form1.textarea1.value;
window.document.form1.radio1[인덱스].checked = true;
window.document.form1.radio1[인덱스].checked = false;
window.document.form1[인덱스].type == "checkbox"; -> form1에 checkbox형인 체크박스

var myNewOption = new Option("TheText","TheValue","TheTest");
document.form1.selectObject.option[0] = myNewOption; -> 항목설정
document.form1.selectObject.option[0] = null; -> 항목제거
document.form1.selectObject.options[2].text == 수요일;
document.form1.selectObject.options[2] == null;
form1.secondDay.options[form1.secondDay.selectedIndex].value
form1.firstDay.options[nowDate.getDate() - 1].selected = true;

secondDate.valueOf(); -> 1970년 1월 1일부터 date개체에 저장한 시각까지의 시간을 밀리초 단위로 반환

window.name -> 프레임의 윈도우 객체 이름
window.parent; -> 프레임의 부모의 윈도우가 가지고 있는 window개체에 접근//프레임에서 현재프레임의 상위 프레임
window.parent.location.href -> 현재윈도우의 부모의 주소
var formobject = window.parent.parent.fraMenu.document.form1;
formobject.choosePage.selectedIndex = linkIndex;

window.top; -> 최상위 프레임에 접근(현재 프레임의)
window.parent.parent.fraMenu.document.form1.choosePage.selectedIndex = linkIndex;
window.top.fraMenu.document.form1.choosePage.selectedIndex = linkIndex;
window.top.location.relace("myPagename.htm"); -> 최상위 페이지 수정
return window.top.addPage(window.location.href);

window.self; -> 현재 window 개체의 참조를 반환

window.open("파일명","target","width=크기,height=크기,left=위치,top=위치, directories=yn,copyHistory=yn,location=yn,resizable=yn,scrollbars=yn,status=yn,toolbar=yn"); -> 새창열기
width=크기 -> 새윈도우의 폭
height=크기 -> 새윈도우의 높이
left=위치 -> 윈도우의 위치를 왼쪽 끝을 기준
top=위치 -> 윈도우의 위치를 위쪽 끝을 기준
directories=yn -> 디렉토리 버튼을 보여준다. (연결)익스플로러 연결도구모음, 익스플로러 전용yew||no
copyHistory=yn -> 윈도우의 히스토리를 복사
location=yn -> 주소 입력창
resizable=yn -> 사용자가 윈도우의 크기를 조정 유무
scrollbars=yn -> 스크롤바 사용 유무
status=yn -> 상태 표시줄
toolbar=yn -> 툴바

window.close; -> 창닫기

window.opener; -> 기존 윈도우의 window 개체의 참조를 반환한다.//open()메소드로 윈도우를 열였을 때 호출한 윈도우
window.opener.document.bgcolor = "RED";
window.opener.document.form1.text1.value;

newWindow.resizeTo(350,200);
newWindow.moveTo(100,400);

newWindow.resizeBy(100,200);
newWindow.moveBy(20,50);

var myString = "A,B,C";
var myTextArray = myString.split(','); -> myTextArray[0]="A",myTextArray[1]="B",myTextArray[2]="C"

var myString = "본 행사는 5월 21일에 개최합니다";
var myCleanedUpString = myString.replace("5월","6월"); -> 본 행사는 6월 21일에 개최합니다

var myString = "1234567890";
alert (myString.search("7")); -> 6을 출력;

var myString = "1997, 1998, 1999, 2000, 2001, 2002";
myMatchArray = myString.match("2000");
alert(mymatchArray.length); -> myMatchArray = ('2000','2000','2001','2002')

RegExp() -> 정규식 생성자
var myRegExp =new RegExp("\\b'|'\\b");
/검색내용/gi -> g 전체를 검색, i 대소문자 구분하지 않음
\d -> 0부터 9사이의 숫자
\D -> 숫자가 아닌 모든 문자
\w -> A-Z,a-z,0-9,언더스코어 문자_와 같은 모든 단어문자
\W -> 단어 문자가 아닌 모든 문자
\s -> 탭,개행문자,캐리지 리턴, 폼 피드,수직 탭등 모든 공백 문자
\S -> 공백 문자가 아닌 모든 문자
.  -> 모든 단일 문자
[...] -> 중괄호 안에 있는 모든 문자중의 하나
[^...] -> 중괄호 안의 문자를 제외한 모든 문자
1-880-888-5474와 일치하는 정규식 -> /\d-\d\d\d-\d\d\d-\d\d\d\d/

{n} -> n개의 앞 요소와 일치한다.
{n,} -> n개 이상의 앞 요소와 일치한다.
{n,m} -> n개 이상 m개 이하의 앞 요소와 일치한다.
? -> 0개나 1개의 앞 요소와 일치한다.
+ -> 1개 이상의 앞 요소와 일치한다.
* -> 0개 이상의 앞 요소와 일치한다.
1-880-888-5474와 일치하는 정규식 -> /\d-\d{3}-\d{3}-\d{4}/

처음 /와 마지막 /는 이 사이에 있는 문자가 정규식임을 자바스크립트에게 알려준다.

/Paula?/ -> a가 있을수도 있고 없을 수도 있다.

^ -> 맨처음
$ -> 마지막
\b -> 단어 경계에 일치
\B -> 단어 경계가 아닌 위치에 일치

var myRegExp = /(\d{4}/g;
myString = myString.replace(myRegExp,"the year $1") -> the year 1999, the year 2000,...

한번실행후 끝
window.setTimeout("처리내용",시간); -> myTimerID = window.setTimeout("alert('시간 끝')",3000); 3초후 실행,고유한 식별아이디 반환
clearTimeout(myTimerID);

일정 시간 간격을 두고 연속적으로 실행
myTimerID = setInterval("myFunction()",5000);
clearInterval(myTimerID);

document.body.scrollWidth / 10; -> 윈도우의 내부 폭을 픽셀 단위로 알아내기

document.cookie = "UserName=홍길동;expires=Tue, 28 Dec 2010 00:00:00;";
var expireDate =new Date();
expdate.setTime(expireDate.getTime() + 1000 * 3600 * 24 * 30); // 30일
expireDate.setMonth(expireDate.getMonth()+6); -> 만기일 설정
document.cookie = "UserName=홍홍홍;expires=" + expireDate.toGMTString() + ";";
document.cookie = "UserName=홍홍홍;expires=" + expireDate.toGMTString() + ";path=/mystore;"; <- /mystore 디렉토리에서도 접근 가능

escape(변수);
unescape(변수);

setCookie("Name","Bob","","");
setCookie("Age","101","","");
alert(document.cookie);

var expireDate =new Date();
expireDate.setMonth(expireDate.getMonth()+12); -> 만기일 설정
setCookie("Name","Bob","/mystore",expireDate.toGMTString());

--동적 HTML--
<div id="div1">내용</div>
<p id="mypara">단락</p>
document.all["mypara"];
mypara.innerText="hi~~~~~~~~~~";
mypara.style.color='red';

mypara.style.left = 값+"px";
mypara.innerHTML; -> 인라인수준
div1.outerHTML; -> 블록수준

beforeBegin -> 시작 태그 바로 앞
afterBegin  -> 태그 바로 다음
beforeEnd   -> 종료 태그 바로 앞
afterEnd    -> 종료 태그 바로 다음
div1.insertAdjacentHTML("beforeBegin","<BR>");

이벤트
event.screenX
event.screenY
event.button -> 0 안누름 1 왼쪽누름 2 오른쪽누름 3 왼쪽오른쪽누름 4 가운데 누름 5왼쪽가운데누름 6오른쪽가운데누름 7 버튼3개다누름

fromElement, srcElement, toElement

var xPos = parseInt( srcElement.offsetLeft );
var yPos = parseInt( srcElement.offsetTop );
srcElement.width;
srcElement.tagName;
srcElement.RollOver; -> <TD ID="WoodOak" RollOver Rollout CLASS="TDMenu"....>
srcElement.backgroundColor = "blue";
menuToHide.contains(event.toElement)

<LAYER> -> 페이지 내 레이어에 포함되지 않은 컨텐츠 '앞'에 보이지 않는 사각형의 화면 공간을 만든다.
<ILAYER> -> 상대 위치로 지정하며 위치를 바꿀 수 있는 인라인 레이어를 생성한다.

<LAYER ID="myLayer1" LEFT="100" TOP="250">
 <H3>Layer에 있는 컨텐츠</H3>
 <P>Layer에 있는 단락</P>
</LAYER>

<ILAYER ID="myLayer1" LEFT="100" TOP="250">
 <H3>ILayer에 있는 컨텐츠</H3>
 <P>ILayer에 있는 단락</P>
</ILAYER>

자바스크립트에서의 참조법은 document 개체를 통해서 레이어의 ID를 쓰면된다.
document.myLayer1.left = 200;
document.myLayer1.top = 200;
document.myILayer1.bgColor = "red";
myLayer1.MoveTo(200,150); -> 인자에서 지정한 화면의 한 지점으로 태그를 이동
myLayer1.Moveby(200,150); -> 넘겨받은 인자만큼 태그를 이동

<LAYER ID="myLayer1" LEFT="100" TOP="250" Z-INDEX="1"> -> 레이어의 순서는 각자의 Z-INDEX 속성에서 결정한다. 기본값 0
myLayer1.zIndex=1;//레이어의 순서 지정
myLayer1.moveAbove(myLayer2);  //레이어를 위로 이동
myLayer2.moveBelow(myLayer1);  //레이어를 아래로 이동

DOM개체
Node -> 도큐먼트 내의 모든 노드는 자신만의 Node개체를 가지고 있다.
NodeList -> 이 개체는 모든 Node개체의 목록이다.
NamedNodepMap -> 이 개체는 인덱스가 아니라 이름으로 모든 Node개체에 접근할 수 있도록 한다.

document.getElementById(idvalue) -> 요소의 ID속성의 값을 넘겨받았을 때 요소의 참조(노드)를 반환한다.
<h1 id="heading1">제목입니다</h1>
<script language="javascript">
 var H1Element = document.getElementById("heading1");
 H1Element.style.fontFamily="궁서체";
</script>
 -> 제목의 폰트가 궁서체로 변경됨

<script language="javascript">
 var TDElement0 = document.getElementByTagName("TD").item(0);
 var TDElement1 = document.getElementByTagName("TD").item(1);
 TDElement0.style.fontFamily="바탕체";
 TDElement1.style.fontFamily="바탕체";
</script>
 -> 따옴표 안에 "< >" 없이 쓴다. <TD>

document.documentElement.tagName; -> 요소의 태그명을 설정하거나 반환 (최상위 HTML>

Node 개체의 프로퍼티
firstChild -> 요소의 첫번째 자식 노드를 반환
lastChild -> 요소의 마지막 자식 노드를 반환
previousSibling ->
어떤 요소에서 현재 자식 노드와 같은 수준에 있는 이전 자식 노드를 반환
nextSibling -> 어떤 요소에서 현재 자식 노드와 같은 수준에 있는 다음 자식 노드를 반환
ownerDocument -> 노드를 포함하고 있는 도큐먼트의 루트 노드를 반환
parentNode -> 트리 구조에서 현재 노드를 포함하고 있는 요소를 반환
nodeName -> 노드의 이름을 반환
nodeType -> 노드의 형식을 숫자로 반환
nodeValue -> 노드의 값을 평범한 텍스트의 형태로 설정
<script language="javascript">
 var H1Element = document.getElementById("heading1");
 H1Element.style.fontFamily="궁서체";
 var PElement = H1Element.nextSibling;
 PElement.style.fontFamily="궁서체";
</script>

Node 개체의 메서드
appendChild(new node) -> 자식 노드의 목록의 끝에 새로운 node 개체를 추가한다.
cloneNode(child option) -> 인자로 제공한 node 개체와 똑같은 새로운 node 개체를 만든다. 이때 선택 사항으로 모든 자식 노드를 포함할 수도 있다.
hasChildNodes() -> 어떤 노드가 자식 노드를 가지고 있을 경우 true를 반환한다.
insertBefore(new node, current node) -> 자식 노드의 목록에서 현재 노드로 지정한 노드 앞에 새로운 node 개체를 추가한다.
removeChild(child node) -> node 개체의 자식 노드 목록에서 하나의 자식 노드를 제거한다.
replaceChild(new child, old child) -> 예전 자식 node 개체를 새로운 자식 node 개체로 바꾼다.

document 개체의 메서드
createElement(element name) -> 지정한 이름으로 요소 노드를 만든다.
createTextNode(text) -> 지정한 이름으로 텍스트 노드를 만든다.
CreateAttribute(attribute name) -> 지정한 이름으로 속성 노드를 만든다.

var newText;
var newElem;

newText = document.createTextNode("제목입니다")
newElem = document.createElement("H1")
newElem.appendChild(newText)
document.body.appendChild(newElem)

newText = document.createTextNode("단락에 있는 텍스트입니다")
newElem = document.createElement("P")
newElem.appendChild(newText)
document.body.appendChild(newElem)

Element 개체의 메서드(속성을 얻고 설정하기)
getAttribute(attribute name) -> 속성의 값을 반환한다.
setAttribute(attribute name, value) -> 속성의 값을 설정한다.
removeAttribute(attribute name) -> 속성의 값을 삭제하고 기본값으로 수정한다.

newElem.setAttribute("align","center");
newElem.getAttribute("align");

event 개체의 프로퍼티
bubbles -> 이벤트가 하나의 요소에서 다른 요소로 제어권을 넘겨줄 수 있는지의 여부를 알려준다.
cancelable -> 이벤트가 자신의 기본 작업을 취소할 수 있는지의 여부를 알려준다.
currentTarget -> 이벤트가 현재 이벤트 흐름의 어떤 단계에 있는지 알려준다.
eventPhase -> 이벤트가 현재 이벤트 흐름의 어떤 단계에 있는지 알려준다.
type -> 이벤트의 이름을 알려준다.

mouse 이벤트 개체의 프로퍼티
altKey -> 이벤트가 발생했을 때 Alt키가 눌렸는지의 여부를 알려준다.
button -> 어떤 마우스 버튼이 눌렸는지를 알려준다.
clientX -> 이벤트가 발생했을 때 브라우저 윈도우에서 마우스 포인터가 위치한 지점의 수평 좌표를 알려준다.
clientY -> 이벤트가 발생했을 때 브라우저 윈도우에서 마우스 포인터가 위치한 지점의 수직 좌표를 알려준다.
ctrlKey -> 이벤트가 발생했을 때 Ctrl키가 눌렸는지의 여부를 알려준다.
metaKey -> 이벤트가 발생했을 때 메타키가 눌렸는지의 여부를 알려준다.
screenX -> 이벤트가 발생했을 때 브라우저 윈도우에서 마우스 포인터의 화면 좌표의 원점에 상대적인 수평 좌표 위치를 알려준다.
screenY -> 이벤트가 발생했을 때 브라우저 윈도우에서 마우스 포인터의 화면 좌표의 원점에 상대적인 수직 좌표 위치를 알려준다.
shiftKey -> 이벤트가 발생했을 때 Shift키가 눌렸는지의 여부를 알려준다.

페이지에 AtiveX 컨트롤을 추가할려면 <OBJECT>태그를 써야 한다. <OBJECT> 태그에는 모든 컨트롤에 공통적인 2가지 중요한 속성이 있는데, 이는 CLASSID와 CODEBASE이다. CLASSID 속성은 컨트롤의 제작자가 컴파일 할 때 부여한 고유한 식별자이며, CODEBASE 속성은 ActiveX컨트롤을 찾을수 있는 URL을 가지고 있다.

바로 이러한 문제점 들 때문에 상속된 하위객체에 접근을 하기
위해서는 상속정의된 프로퍼티로 접근을 하는게 애러를 방지 한다는 것입니다.
즉, test_form.children[0] 혹은 test_form.lastChild 로 접근을 하면 콘트롤 할 수 있다는 것이죠...
이때 모든 윈도우 하위객체는 대부분 collection 에 all 프로퍼티와 element 객체에 하위구성요소에 대한 인서턴스 참조값들을
저장하게 되는데 이것으로 액세스 하면 문제 발생을 줄일 수
있다는 것입니다. 물론 글로벌 참조프로퍼티인 id 는 되도록이면
하위객체에 잘 사용하지 말고 window 객체 바로 밑 일 경우
this 로 접근이 가능하도록 사용을 하면 문제 해결에 도움이
될 듯 합니다.
그럼...

function debug(testNode) {
 var aa;
     for(key in testNode)
     {
         inputValue = testNode[key];
  aa += key + " : " + inputValue + "\r\n";
     }
 window.clipboardData.setData('Text', aa);
 alert('복사완료');
}

function debug2(testNode) {
 window.clipboardData.setData('Text', eval("document.all."+testNode+".outerHTML"));
 alert('복사완료');
}

-----------------------
 모든 마우스 이벤트 
-----------------------
onkeydown처럼 마우스를 눌렀을때는 onMouseDown이벤트가 발생합니다.
그외의 이벤트로는

onClick - 클릭했을때
onMouseOver - 마우스 포인터를 객체 위로 옮겼을 때 (꼭 누르지 않아도 됩니다)
onMouseOut - 마우스 포인터를 객체에서 다른곳으로 옮길때
onmouseup
oncontextmenu
onrowexit
onbeforepaste
onactivate
onmousemove
onmove
onselectstart
oncontrolselect
onkeypress
oncut
onrowenter
onmousedown
onpaste
onreadystatechange
onbeforedeactivate
onkeydown
onlosecapture
ondrag
ondragstart
oncellchange
onfilterchange
onrowsinserted
ondatasetcomplete
onmousewheel
ondragenter
onblur
onresizeend
onerrorupdate
onbeforecopy
ondblclick
onkeyup
onresizestart
onmouseover
onmouseleave
onmoveend
onresize
ondrop
onpage
onrowsdelete
onfocusout
ondatasetchanged
ondeactivate
onpropertychange
ondragover
onhelp
ondragend
onbeforeeditfocus
onfocus
onscroll
onbeforeactivate
onbeforecut
onclick
oncopy
onfocusin
onbeforeupdate
ondataavailable
onmovestart
onmouseout
onmouseenter
onlayoutcomplete
onafterupdate
ondragleave
onbeforeunload
onafterprint
onbeforeprint
onload
onselect
onunload

등등이 있습니다. 이것들 중 몇개는 모질라에서는 되지 않고 또 모질라에서만 되는 것들도 있습니다.

출처 : http://blog.naver.com/swtgm?Redirect=Log&logNo=140034422537