메뉴 건너뛰기

Dev tips

JavaScript HTMLElement 객체/ Event

taknim 2008.08.18 20:22 조회 수 : 9691 추천:2344

http://blog.naver.com/rakis77/70022030743

 


               --- HTMLElement 객체의 프로퍼티 ---

 

 all              ⓔ     특정한 HTMLElement 객체에 포함된 모든 태그들의 컬렉션
 align           ⓔ    Block 효과를 가지는 태그의 align 속성을 가리키는 객체의 속성
 className         스타일시트의 Selector로 사용하기 위해 태그에 사용된 class 속성의 값
 children      ⓔ    특정한 태그에 1차적으로 포함되어 있는 HTMLElement 객체들의 컬렉션


 clientHeight         객체에 적용된 여백과 테두리, 스크룰바를 제외한 높이
 clientWidth   ⓔ    객체에 적용된 여백과 테두리, 스크룰바를 제외한 너비
 clientLeft     ⓔ    HTMLElement 객체의 기준위치로부터의 왼쪽 간격(테두리선 두께)
 clientTop    ⓔ    HTMLElement 객체의 기준위치로부터의 위쪽 간격(테두리선 두께)
 dir                      글씨가 오른쪽 혹은 왼쪽부터 써지도록 설정 ("ltr" 혹은 "rtl")


 disabled             HTMLElement 객체의 상태를 사용할 수 없도록 할 것인지의 여부설정
 id                       HTMLElement 객체의 스타일을 적용하기 위해 태그에 사용된 ID 속성
 innerHTML          종료태그를 가진 태그의 마크영역에 포함된 태그를 포함한 문자열
 innerText     ⓔ     종료태그를 가진 태그의 마크영역에 포함된 태그를 제외한 문자열
 outerText     ⓔ     해당 요소에 포함된 태그를 제외하는 모든 문자열
 outerHTML   ⓔ     해당 요소의 시작과 끝태그까지를 포함하는 전체 문자열


 style                  태그에 사용된 STYLE 속성으로서 객체로 취급된다.
 tagName            HTMLElement 객체를 만들어낸 태그의 이름(예 H1, input, div 등)
 this                    해당 html 태그에서 자기 자신의 HTMLElement 객체를 참조
 title                    태그의 title 속성으로 마우스포인터가 왔을 때 나타낼 설명 문자열


 sourceIndex    ⓔ   HTMLElement 객체를 document.all[index]로 접근할 때의 index 값
 parentElement ⓔ   HTMLElement 객체를 포함하고 있는 부모객체를 참조한다.
 offsetParent           HTMLElement 객체의 기준 위치를 결정하는 부모 HTMLElement 객체
 offsetHeight           HTMLElement 객체와 그 내용물을 포함하는 전체 높이
 offsetWidth            HTMLElement 객체와 그 내용물을 포함하는 전체 너비
 offsetLeft              HTMLElement 객체의 왼쪽 좌표로서 부모객체에 상대적인 x 축 기준점
 offsetTop             HTMLElement 객체와 위쪽 좌표로서 부모객체에 상대적인 y 축 기준점
 readyState    ⓔ    HTMLElement 객체의 메모리 로딩상태를 표현(uninitialized ~ complete)


 scrollHeight   ⓔ    스크롤되는 HTMLElement 객체의 스크롤된 부문을 포함하는 전체 높이
 scrollWidth    ⓔ    스크롤되는 HTMLElement 객체의 스크롤된 부문을 포함하는 전체 너비
 scrollLeft       ⓔ    스크롤되는 HTMLElement 객체의 왼쪽으로 스크롤된 부문의 픽셀값
 scrollTop      ⓔ    스크롤되는 HTMLElement 객체의 위쪽으로 스크롤된 부문의 픽셀값

 

           ※  ⓔ 는 Explorer 에서만 지원되는 컬렉션.

 

 

 

 

 

        ----  Collection 의 종류------

 

 all            ⓔ     HTML 문서에 포함된 모든 태그를 배열로 접근하는 컬렉션
 applets           <applet> 태그의 HTMLElment 객체 컬렉션
 anchors          <a>  태그에 name 속성이 사용된 Anchor 객체의 컬렉션


 cells        ⓔ     <table> 에 포함된 <td><th> 태그의 HTMLElement 컬렉션
 children    ⓔ     html 문서에서 태그들의 포함관계에서 자식 객체의 컬렉션
 childNodes       DOM 의 특정노드에 포함된 자식 노들의 노드리스트 컬렉션
 elements         <Form>  태그의 내부에 사용되는는 입력양식 객체들의 컬렉션


 embeds           <embed> 태그의 HTMLElement 객체 컬렉션
 images            <img>   태그의 HTMLElement 객체 컬렉션
 filters      ⓔ      특정      태그의 style 속성에 사용한 필터객체의 컬렉션
 frames             <frame> 혹은 <iframe> 태그로 정의되는 프레임 컬렉션
 links                <a href=""> <area href="">태그로 정의되는 링크 컬렉션

 embeds           <embed> 태그의 HTMLElement 객체 컬렉션
 images            <img>   태그의 HTMLElement 객체 컬렉션
 filters      ⓔ      특정      태그의 style 속성에 사용한 필터객체의 컬렉션
 frames             <frame> 혹은 <iframe> 태그로 정의되는 프레임 컬렉션
 links                <a href=""> <area href="">태그로 정의되는 링크 컬렉션


 options          <select> 태그에 포함되는 <option> 태그의 컬렉션
 plugins          <embed>  태그로 만들어지는 멀티미디어 파일의 컬렉션
 scripts            <script> 태그로 만들어지는 스크립터 공간의 컬렉션
 stylesheets      <LINK> <STYLE> 태그로 만들어지는 스타일시트 컬렉션             
            
      ※  ⓔ 는 Explorer 에서만 지원되는 컬렉션.


  all 컬렉션.
    <html>
       <head><title> 제목 </title> </head>
        <body>
            <img src="../aa.gif">
        </body>
     </html>

   document.all[0]= <html>  document.all[1]= <head>
   document.all[2]= <title> document.all[3]= <body>
   document.all[4]= <img>
  
    ID 속성을 사용하면 Document 객체의 all 컬렉션을 이용해서
    특정 HTMLElement 객체을 참조할  수 있다.

     document.all[index]  document.all["name"]
     document.all("name") document.all.name     document.all["ID"]

 

 


                    --  Event 의 종류 --

 

  Abort            이미지를 읽어 들이는 일이 도중에 중단될 때 발생하는 이벤트
 BeforeCopy   글씨를 복사하기 위해서 오른쪽 마우스나 CTR+C를 누를 때 발생하는 이벤트
 BeforeCut      글씨를 잘라내기 위해서 오른쪽 마우스나 CTR+x를 누를 때 발생하는 이벤트
 beforePaste   글씨를 붙여넣기 위해서 오른쪽 마우스나 CTR+v를 누를 때 발생하는 이벤트
 
 AfterPrint         브라우저에서 인쇄 버튼을 클릭하면 인쇄영역이 활성화된 후에 발생
 BeforePrint      브라우저에서 인쇄 버튼을 클릭하면 인쇄영역이 활성화되기 전에 발생
 BeforeUnload   문서가 메모리에서 해제될 때  Unload 이벤트보다 일찍 발생하는 이벤트

 
 Blur             특정 객체로부터 포커스가 빠져나갈 때 발생하는 이벤트
 Change       입력양식에서 값이 바뀌게 되는 순간에 발생하는 이벤트
 Click           마우스로 특정 객체를 클릭할 때 발생하는 이벤트
 
 ContextMenu  팝업메뉴를 보기 위해 오른쪽 마우스를 클릭 할때 발생하는 이벤트
 Copy             팝업메뉴의 "복사" 항목을 누르거나 CTR+C를 누를 때 발생하는 이벤트
 Cut                팝업메뉴의 "잘라내기" 항목을 누르거나 CTR+x 를 누를 때 발생하는 이벤트
 DblClick          마우스를 더블클릭했을 때 발생하는 이벤트
 
 Drag            드래그 동안에 드래그를 시작한 객체에서 계속해서 발생하는 이벤트
 DragStart     드래그를 시작한 객체에서 최초에 발생되는 Dragstart 이벤트
 DragEnter    드래그 도중에 만나는 객체의 영역으로 들어가는 순간에 발생하는 이벤트
 DragOver     드래그 도중에 만나는 객체의 영역에서 계속해서  발생하는 이벤트
 DragLeave    드래그 도중에 만나는 객체의 영역에서 벗어나는 순간에 발생하는 이벤트
 DragEnd      드래그가 끝났을때 드래그를 시작한 객체에서 발생하는 Dragend 이벤트
 
 Drop             드래그가 끝났을때 드래그를 끝낸 객체에서 발생하는 Drop 이벤트
 Error             문서나 이미지를 Loading 하다가 에러가 발생할때 의 이벤트
 Focus           특정 객체가 포커스를 얻을 때 발생하는 이벤트

 KeyDown      키보드를 눌러서 글씨가 써지기 전에 최초의 순간에 발생하는 이벤트
 KeyPress      키보드를 눌러서 글씨가 써지기 직전에 발생하는 이벤트(Netscape는 최초)
 KeyUp           키보드를 떼어내는 순간에 발생하는 이벤트

 

 Load              window에 문서의 내용이 새롭게 Loading 되면 발생하는 이벤트
 Mousedown    문서영역의 특정 객체를 마우스로 누를 때 발생하는 이벤트
 MouseEnter    
특정객체에  마우스가 들어오는 최초의 순간에 발생하는 이벤트

 MouseMove    문서영역의 특정 객체에서 마우스를 움직일 때 발생하는 이벤트
 MouseOut       문서영역의 특정 객체에서 마우스가 벗어날 때 발생하는 이벤트
 MouseOver     문서영역의 특정 객체 위에 마우스가 올려져 있을 때 발생하는 이벤트
 MouseUp        마우스 버튼을 뗐을 때 발생하는 이벤트
 MouseWheel  
문서영역의 특정 객체에서 마우스휠을 움직일 때 발생하는 이벤트

 

 Move         윈도우, 프레임같은  객체를 움직이기 시작하는 순간에 발생하는 이벤트
 Paste        팝업메뉴의 "붙여넣기" 항목을 누르거나 CTR+x를 누를 때 발생하는 이벤트
 Reset        입력양식의 Reset 버튼을 눌러서 내용이 초기화될 때 발생하는 이벤트
 Resize       윈도우, 프레임 , HTMLElement 객체의 크기가 변경될 때 발생하는 이벤트

 

 Scroll          문서나 Textarea와 같은 객체에서 내용을 스크롤시킬 때 발생하는 이벤트
 Select         입력양식에 입력된 문자나 Option 객체를 선택했을 때 발생하는 이벤트
 SelectStart   문서 일부를 복사하기 위애 내용을 선택하는 최초의 순간에 발생하는 이벤트
 Submit        입력양식의 Submit 버튼을 눌러서 내용이 전송되기 직전에 발생하는 이벤트
 Unload        문서 정보가 메모리에서 해제되려는 순간에 발생하는 이벤트

 

 

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

     Text 입력요소에 적용되는 IME-MODE의 속성값

 

active        IME-MODE를 활성화 시켜서 한글이 입력되도록  한다(한/영 변환키 사용가능).

inactive     IME-MODE를 불활성화 시켜서 영문이 입력되도록 한다(한/영 변환키 사용가능).

disabled    IME-MODE를 사용 할 수 없도록 하영 영문만 입력할 수 있는 상태로 만든다.

                 (한/영 변환키를 사용해도 한글 전환이 되지 않는다).

auto          기본값으로 현재 한/영 키의 상태로 입력되도록 한다.

  

<Explorer 5.5이상 전용>

     <input type="text" style="IME-MODE:active">

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