快捷導(dǎo)航

簡(jiǎn)單實(shí)現(xiàn)JS對(duì)dom操作封裝

更新時(shí)間：2015年12月02日 17:12:33 作者：透筆度_tbd

這篇文章主要介紹了簡(jiǎn)單實(shí)現(xiàn)JS對(duì)dom操作封裝，需要的朋友可以參考下

這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)對(duì)dom操作封裝，下面就直接上代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
</head>
<body>
  <div id="aa">測(cè)試</div>
</body>
<script type="text/javascript">
//duquery
(function(w){//定義立即執(zhí)行函數(shù)，傳入全局對(duì)象window  
  function duquery(id){//定義函數(shù)，實(shí)現(xiàn)去new的操作，  
    function Duquery(id){//定義類
      this.ele=document.getElementById(id);//id查找    
      return this;//返回對(duì)象
    };
    Duquery.prototype.html=function(val){//利用原型添加設(shè)置html的方法
      this.ele.innerHTML=val;
      return this;//返回對(duì)象，執(zhí)行后可鏈?zhǔn)讲僮?
    };
    Duquery.prototype.attr=function(key,val){//添加設(shè)置屬性的方法
      this.ele.setAttribute(key,val);
      return this;
    };
    Duquery.prototype.css=function(key,val){//添加設(shè)置樣式的方法
      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處理，返回實(shí)例對(duì)象
  };
  
  duquery.wait=function(time,fun){//添加延時(shí)靜態(tài)方法，可通過(guò)函數(shù)名直接使用
    setTimeout(fun,time);
  };  
  duquery.each=function(arr,callback){//添加遍歷迭代靜態(tài)方法
    for(var key in arr){
      callback(key,arr[key]);
    };
  };  
  w.$$=w.duquery=duquery;//類追加到全局對(duì)象自定義屬性上，可直接調(diào)用
  
})(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{
    };
  });
};
</script>
</html>

再為大家分享一個(gè)js常用DOM操作，代碼如下

<html>
 
<head></head>
<body>
 
<form id="myform">
<input type="text" value="獲取id" id="getId" >
 
<input type="button" value="huhu" id="getId1" >
<span>努力學(xué)習(xí)</span>
 
</form>
 
<script>
//DOM 對(duì)象方法
 
//getElementById返回帶有指定 ID 的元素
 
/*var byid = document.getElementById("getId");
alert(byid.value);      //獲取id
 
//getElementsByTagName返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點(diǎn)列表(集合/節(jié)點(diǎn)數(shù)組)
 
var tagname = document.getElementsByTagName("input");
alert(tagname[0].value);    //獲取id
 
//createElement創(chuàng)建元素節(jié)點(diǎn)
 
var myform = document.getElementById("myform");
var e = document.createElement("input");    //創(chuàng)建input元素
 
e.type="button";                //給input的type定義值
e.value="嘻嘻哈哈";                //給input的value定義值
 
//appendChild() 把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)
 
myform.appendChild(e);              //往form里添加創(chuàng)建好的input表單
 
//insertBefore() 在指定的子節(jié)點(diǎn)前面插入新的子節(jié)點(diǎn)
 
document.body.insertBefore(e,myform);      //把input添加到form前面            
 
//createAttribute()創(chuàng)建屬性節(jié)點(diǎn)
 
var att=document.createAttribute("class");
att.value="democlass";
 
//setAttributeNode()方法添加新的屬性節(jié)點(diǎn)
 
document.getElementsByTagName("input")[0].setAttributeNode(att);
 
//createElement創(chuàng)建元素節(jié)點(diǎn)
 
var newel = document.createElement("p");
 
//createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)
 
newtext=document.createTextNode('xixihaha');
 
//appendChild() 把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)
 
newel.appendChild(newtext);
 
//appendChild() 把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)
 
myform.appendChild(newel);
 
// setAttribute() 可以在屬性不存在的情況下創(chuàng)建新的屬性，我們可以使用這個(gè)方法來(lái)創(chuàng)建新屬性
 
x=document.getElementsByTagName("input");
x[0].setAttribute("asdasd","first");
 
//replaceChild() 方法用于替換節(jié)點(diǎn)
 
//第一個(gè)參數(shù)是新的節(jié)點(diǎn)
//第二個(gè)參數(shù)是舊的節(jié)點(diǎn)(要被替換掉的節(jié)點(diǎn))
 
var y1=document.getElementsByTagName("input")[1];
var y2=document.getElementsByTagName("input")[2];
 
myform.replaceChild(y2,y1);
 
//removeChild() 方法刪除指定的節(jié)點(diǎn)
 
//當(dāng)已定位需要?jiǎng)h除的節(jié)點(diǎn)時(shí)，就可以通過(guò)使用 parentNode 屬性和 removeChild() 方法來(lái)刪除此節(jié)點(diǎn)
var span1=document.getElementsByTagName("span")[0];
 
span1.parentNode.removeChild(span1);
*/
 
</script>
 
</body>
</html>

以上就是js針對(duì)DOM 的相關(guān)常用操作，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: