简单实现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 相关文章推荐
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
原生JS实现记忆翻牌游戏
Jul 31 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php无限遍历目录示例
2014/02/21 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
python判断输入日期为第几天的实例
2018/11/13 Python
对python判断是否回文数的实例详解
2019/02/08 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
如何执行一个shell程序
2012/11/23 面试题
体育系毕业生自荐信
2014/06/28 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
婚前协议书范本
2014/10/27 职场文书
钳工实训报告总结
2014/11/04 职场文书
2014年纪委工作总结
2014/12/05 职场文书