简单实现JS对dom操作封装


Posted in Javascript onDecember 02, 2015

这篇文章主要介绍了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 的相关常用操作,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
jQuery实现获取绑定自定义事件元素的方法
Dec 02 #Javascript
JS折半插入排序算法实例
Dec 02 #Javascript
如何动态加载外部Javascript文件
Dec 02 #Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 #Javascript
JavaScript如何禁止Backspace键
Dec 02 #Javascript
js文本框输入内容智能提示效果
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 #Javascript
You might like
PHP 组件化编程技巧
2009/06/06 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
对python中的pop函数和append函数详解
2018/05/04 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Python自动化操作实现图例绘制
2020/07/09 Python
巴基斯坦购物网站:Goto
2019/03/11 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
剪彩仪式主持词
2014/03/19 职场文书
调研汇报材料范文
2014/08/17 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
明星邀请函
2015/02/02 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
2015年重阳节主持词
2015/07/04 职场文书
联村联户简报
2015/07/21 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python