JS 대 dom 조작 패 키 징 간단하게 실현

이 글 은 주로 JS 가 dom 작업 패 키 징 을 간단하게 실현 하 는 것 을 소개 하 였 으 며, 다음은 바로 코드 를 올 립 니 다.

  
  


//duquery
(function(w){//        ，      window  
  function duquery(id){//    ，   new   ，  
    function Duquery(id){//   
      this.ele=document.getElementById(id);//id      
      return this;//    
    };
    Duquery.prototype.html=function(val){//        html   
      this.ele.innerHTML=val;
      return this;//    ，        
    };
    Duquery.prototype.attr=function(key,val){//         
      this.ele.setAttribute(key,val);
      return this;
    };
    Duquery.prototype.css=function(key,val){//         
      this.ele.style[key]=val;
      return this;
    };
    Duquery.prototype.on=function(event,fun){
      this.ele.addEventListener(event,fun,false);
      return this;
    };  
    return new Duquery(id);// new  ，      
  };
  
  duquery.wait=function(time,fun){//        ，          
    setTimeout(fun,time);
  };  
  duquery.each=function(arr,callback){//          
    for(var key in arr){
      callback(key,arr[key]);
    };
  };  
  w.$$=w.duquery=duquery;//              ，     
  
})(window);
//code
window.onload=function(){
  //       
  $$("aa").attr("bb","456").css("height","200px");
  $$.wait(5000,function(){$$("aa").html("  ")});
  $$("aa").on("click",function(){
    $$("aa").html("  ").css("color","#ffa");
  });
  $$.each([1,2,3,4,5,6],function(index,val){
    if(val==3){
      alert(val);
    }else{
    };
  });
};

js 상용 DOM 작업 을 공유 합 니 다. 코드 는 다음 과 같 습 니 다.

열심히 공부 하 다

/ / DOM 대상 방법 & \ # 13;

/ / getElement ById 는 지정 한 ID 가 있 는 요 소 를 되 돌려 줍 니 다 & \ # 13;

/*var byid = document.getElementById("getId");
alert(byid.value); //id & \ # 13 가 져 오기;

/ / getElementsByTagName 지정 한 탭 이름 을 가 진 모든 요 소 를 포함 하 는 노드 목록 (집합 / 노드 배열) & \ # 13;

var tagname = document.getElementsByTagName("input");
alert(tagname[0].value); //id & \ # 13 가 져 오기;

/ / createElement 요소 노드 만 들 기 & \ # 13;

var myform = document.getElementById("myform");
var e = document.createElement("input"); //input 요소 만 들 기 & \ # 13;

e.type="button"; //input 의 type 정의 값 & \ # 13;
e. value = "히히 하하"; /input 의 value 정의 값 & \ # 13;

/ / appendChild () 새 하위 노드 를 지정 한 노드 에 추가 합 니 다 & \ # 13;

myform.appendChild(e); //form 에 만 든 input 폼 추가 & \ # 13;

/ / insertBefore () 지정 한 하위 노드 앞 에 새 하위 노드 를 삽입 합 니 다 & \ # 13;

document.body.insertBefore(e,myform); //input 을 form 앞 에 추가 하기 & \ # 13;

/ / createAttribute () 속성 노드 만 들 기 & \ # 13;

var att=document.createAttribute("class");
att.value="democlass";

/ / setAttributeNode () 방법 에 새로운 속성 노드 추가 & \ # 13;

document.getElementsByTagName("input")[0].setAttributeNode(att);

/ / createElement 요소 노드 만 들 기 & \ # 13;

var newel = document.createElement("p");

/ / createteTextNode () 방법 으로 새로운 텍스트 노드 만 들 기 & \ # 13;

newtext=document.createTextNode('xixihaha');

/ / appendChild () 새 하위 노드 를 지정 한 노드 에 추가 합 니 다 & \ # 13;

newel.appendChild(newtext);

/ / appendChild () 새 하위 노드 를 지정 한 노드 에 추가 합 니 다 & \ # 13;

myform.appendChild(newel);

/ / setAttribute () 는 속성 이 존재 하지 않 는 상황 에서 새로운 속성 을 만 들 수 있 습 니 다. 우 리 는 이 방법 으로 새로운 속성 & \ # 13 을 만 들 수 있 습 니 다.

x=document.getElementsByTagName("input");
x[0].setAttribute("asdasd","first");

/ / replace Child () 방법 은 노드 를 교체 하 는 데 사 용 됩 니 다 & \ # 13;

/ / 첫 번 째 매개 변 수 는 새로운 노드 & \ # 13 입 니 다.
/ / 두 번 째 매개 변 수 는 오래된 노드 (교체 할 노드) & \ # 13;

var y1=document.getElementsByTagName("input")[1];
var y2=document.getElementsByTagName("input")[2];

myform.replaceChild(y2,y1);

/ / removeChild () 방법 으로 지정 한 노드 삭제 & \ # 13;

/ / 삭제 할 노드 를 찾 았 을 때 parentNode 속성 과 removeChild () 방법 으로 이 노드 를 삭제 할 수 있 습 니 다 & \ # 13;
var span1=document.getElementsByTagName("span")[0];

span1.parentNode.removeChild(span1);
*/

이상 은 js 가 DOM 과 관련 된 상용 조작 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.