简单实现JS对dom操作封装

时间：2021-05-18

这篇文章主要介绍了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);//codewindow.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 的元素 </script> </body></html>

以上就是js针对DOM 的相关常用操作，希望对大家的学习有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章