這篇文章主要介紹了JS簡單實現對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">測試</div>
</body>
<script type="text/javascript">
//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{
};
});
};
</script>
</html>
再為大家分享一個js常用DOM操作，代碼如下
<html>
<head></head>
<body>
<form id="myform">
<input type="text" value="獲取id" id="getId" >
<input type="button" value="huhu" id="getId1" >
<span>努力學習</span>
</form>
<script>
//DOM 對象方法
//getElementById返回帶有指定 ID 的元素
/*var byid = document.getElementById("getId");
alert(byid.value); //獲取id
//getElementsByTagName返回包含帶有指定標簽名稱的所有元素的節點列表(集合/節點數組)
var tagname = document.getElementsByTagName("input");
alert(tagname[0].value); //獲取id
//createElement創建元素節點
var myform = document.getElementById("myform");
var e = document.createElement("input"); //創建input元素
e.type="button"; //給input的type定義值
e.value="嘻嘻哈哈"; //給input的value定義值
//appendChild() 把新的子節點添加到指定節點
myform.appendChild(e); //往form裡添加創建好的input表單
//insertBefore() 在指定的子節點前面插入新的子節點
document.body.insertBefore(e,myform); //把input添加到form前面
//createAttribute()創建屬性節點
var att=document.createAttribute("class");
att.value="democlass";
//setAttributeNode()方法添加新的屬性節點
document.getElementsByTagName("input")[0].setAttributeNode(att);
//createElement創建元素節點
var newel = document.createElement("p");
//createTextNode() 方法創建新的文本節點
newtext=document.createTextNode('xixihaha');
//appendChild() 把新的子節點添加到指定節點
newel.appendChild(newtext);
//appendChild() 把新的子節點添加到指定節點
myform.appendChild(newel);
// setAttribute() 可以在屬性不存在的情況下創建新的屬性，我們可以使用這個方法來創建新屬性
x=document.getElementsByTagName("input");
x[0].setAttribute("asdasd","first");
//replaceChild() 方法用於替換節點
//第一個參數是新的節點
//第二個參數是舊的節點(要被替換掉的節點)
var y1=document.getElementsByTagName("input")[1];
var y2=document.getElementsByTagName("input")[2];
myform.replaceChild(y2,y1);
//removeChild() 方法刪除指定的節點
//當已定位需要刪除的節點時，就可以通過使用 parentNode 屬性和 removeChild() 方法來刪除此節點
var span1=document.getElementsByTagName("span")[0];
span1.parentNode.removeChild(span1);
*/
</script>
</body>
</html>
以上就是js針對DOM 的相關常用操作，希望對大家的學習有所幫助。