메인메뉴 바로가기

HOME으로 가기


Javascript

기본문법 | 이벤트핸들러 및 DOM객체 모음

본문

[ 용어설명 ]

  • 네이티브 객체 : 자바스크립트 내에 미리 만들어진 객체
                                ex) Date, Array, Math...
  • 호스트 객체 : 자바스크립트 실행환경에서 만들어진 객체
                              ex) 웹브라우저에서 제공하는 객체
                                    form, image, element
    • 노드(node) : DOM 스크립팅을 사용하여 페이지의 객체를 접근할때
                               각 연결된 객체들이 요소들로 이루어지며 이를 노드라 말한다.
                               ex) 노드종류 : element node, text node, attribute node...
       

      [ 객체 지정 ]

      • document.getElementById("아이디명"); //객체
      • document.getElementsByName("이름명"); //배열형식
      • document.getElementsByTagName("태그명"); //배열형식 

      • document.querySelector('선택자');   //다중선택자일때 해당하는 첫번째 요소
      • document.querySelectorAll('선택자'); //다중선택자일때 해당하는 모든 요소 (배열형식)

       

       

      [ 이벤트 핸들러 ]

      • onerror="this.src='./out/thumb/no.gif'" 
      • onclick="this.src.viewer();"

       

      [ 메소드 & 프로퍼티 ]

  • 객체.getAttribute(속성); 
  • 객체.setAttribute(속성, 값); 

    객체.removeAttribute(속성); 
  • 객체.childNodes : 객체의 모든 자식요소를 포함하는 배열 리턴.
    ex) var oldLi = ul_id.childNodes; //배열로 저장
               alert(oldLi.length); //배열갯수가 나옴.
  • 객체.NodeType : 객체의 타입을 반환, 요소(1), 속성(2), 텍스트(3)
    ex) var nType = document.createElement("IMG");
               alert(nType.nodeType); //1이 나옴.
  • 객체.nodeName : 객체의 요소명을 반환. (요소명은 대문자로 인식)
    ex) var nType = document.createElement("IMG");
               alert(nType.nodeName); //"IMG" 나옴.
     
  • 객체.nodeValue : 객체(노드)의 child node에 있는 텍스트노드를 말함. 
    ex)  <-ul id="ul_pMenu"->
                          <-li->undo
                          <-li->edit<-/li->
                          <-li->copy
           <-/ul->
           var list = document.getElementById("ul_pMenu");
                alert(list.childNodes[0].childNodes[1].nodeValue); //"edit" 나옴.
  • 객체.firstChild : == 객체.childNodes[0];
  • 객체.lastChild : == 객체.childNodes[this.childNodes.length-1];
  • 객체.createElement : 새 요소 생성
    ex) var  newElement = document.createElement("DIV");
          newElement.setAttribute('id', 'div_pMenu');
          document.body.appendChild(newElement);
  • 객체.removeChild : 객체 내의 자식요소 삭제
    ex) var oldLi = ul_id.childNodes;
          if(oldLi.length > 0){
             for(var i=oldLi.length-1; i >= 0 ;i--){
                 ul_id.removeChild(oldLi[i]);
             }
          } 
     
  • 객체.hasChildNodes();   요소에 자식 노드가 있는지 확인
    ex) alert(list.hasChildNodes()); // false
     
  • 객체.appendChild : 객체 내의 자식요소 추가
    ex) obj = ul_id.appendChild(document.createElement("li"));
  • 객체.createTextNode : 텍스트노드를 생성.
    ex) var txt = document.createTextNode("안녕하세요.");
          div_sMenu.appendChild(txt);
  • 객체.insertBefore : 객체 내에 새로운 요소를 타켓요소 앞에 추가한다.
    ex) ul_id.insertBefore(newElement,targetElement);
  • 객체.insertAfter : 객체 내에 새로운 요소를 타켓요소 뒤에 추가. (함수)
    함수) function insertAfter(newE, trgE){
              var parent = trgE.parentNode;
              if(parent.lastChild ==trgE){
                parent.appendChild(newE);
              }else{
                parent.insertBefore(newE, trgE.nextSibling);
              }
            }
     
  • 객체.ownerDocument; 현재 요소를 포함하는 최상위 문서개체.
     
  • 객체.parentNode : 현재 객체(노드)의 부모객체(노드).
    ex) var parent = trgE.parentNode;
  • 객체.nextSibling: 현재 객체(노드)의 다음에 위치한 형제객체(노드).
     
  • 객체.previoustSibling: 현재 객체(노드)의 이전에 위치한 형제객체(노드).
     
  • 객체.cloneNode(); 객체(노드)의 복제.
    ex) var li01 = document.getElementById('list');
          var li01clone = li01.cloneNode(true);


[이벤트 중단]
event.preventDefault();  //현재 이벤트의 기본 동작을 중단.
event.stopPropagation();  //현재 이벤트가 상위로 전파되지 않도록 중단.
event.stoplmmediatePropagation()  //현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단.
return false;  //  = event.preventDefault();와 같음. (단, 제이쿼리에서는 event.stopPropagation(); 까지 포함 . 

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기