简单实现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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
DOM 高级编程
May 06 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
CocosCreator入门教程之网络通信
Apr 16 Javascript
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中的cookie
2006/11/26 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
canvas绘制七巧板
2017/02/03 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python中的lambda表达式用法详解
2016/06/22 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
恶意软件的定义
2014/11/12 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
求职简历的自我评价怎样写好
2013/10/07 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
起诉书范文
2015/05/20 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
感谢信
2019/04/11 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL