• 목록

• 페이스북 공유
• 트위터 공유

[ 용어설명 ]

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

• • [ 객체 선택 ]

    • 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);