简单实现JS对dom操作封装
这篇文章主要介绍了JS简单实现对dom操作封装，下面就直接上代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js</title>
</head>
<body>
<divid="aa">测试</div>
</body>
<scripttype="text/javascript">
//duquery
(function(w){//定义立即执行函数，传入全局对象window
functionduquery(id){//定义函数，实现去new的操作，
functionDuquery(id){//定义类
this.ele=document.getElementById(id);//id查找
returnthis;//返回对象
};
Duquery.prototype.html=function(val){//利用原型添加设置html的方法
this.ele.innerHTML=val;
returnthis;//返回对象，执行后可链式操作
};
Duquery.prototype.attr=function(key,val){//添加设置属性的方法
this.ele.setAttribute(key,val);
returnthis;
};
Duquery.prototype.css=function(key,val){//添加设置样式的方法
this.ele.style[key]=val;
returnthis;
};
Duquery.prototype.on=function(event,fun){
this.ele.addEventListener(event,fun,false);
returnthis;
};
returnnewDuquery(id);//去new处理，返回实例对象
};
duquery.wait=function(time,fun){//添加延时静态方法，可通过函数名直接使用
setTimeout(fun,time);
};
duquery.each=function(arr,callback){//添加遍历迭代静态方法
for(varkeyinarr){
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>
<formid="myform">
<inputtype="text"value="获取id"id="getId">
<inputtype="button"value="huhu"id="getId1">
<span>努力学习</span>
</form>
<script>
//DOM对象方法
//getElementById返回带有指定ID的元素
/*varbyid=document.getElementById("getId");
alert(byid.value);//获取id
//getElementsByTagName返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
vartagname=document.getElementsByTagName("input");
alert(tagname[0].value);//获取id
//createElement创建元素节点
varmyform=document.getElementById("myform");
vare=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()创建属性节点
varatt=document.createAttribute("class");
att.value="democlass";
//setAttributeNode()方法添加新的属性节点
document.getElementsByTagName("input")[0].setAttributeNode(att);
//createElement创建元素节点
varnewel=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()方法用于替换节点
//第一个参数是新的节点
//第二个参数是旧的节点(要被替换掉的节点)
vary1=document.getElementsByTagName("input")[1];
vary2=document.getElementsByTagName("input")[2];
myform.replaceChild(y2,y1);
//removeChild()方法删除指定的节点
//当已定位需要删除的节点时，就可以通过使用parentNode属性和removeChild()方法来删除此节点
varspan1=document.getElementsByTagName("span")[0];
span1.parentNode.removeChild(span1);
*/
</script>
</body>
</html>
以上就是js针对DOM的相关常用操作，希望对大家的学习有所帮助。