简单实现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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
javascript 实现map集合
Apr 03 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
如何优化vue打包文件过大
Apr 13 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
详解Python编程中基本的数学计算使用
2016/02/04 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python实现dijkstra最短路由算法
2019/01/17 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
青年志愿者活动总结
2014/04/26 职场文书
导游词之上海豫园
2019/10/24 职场文书
python自动化八大定位元素讲解
2021/07/09 Python
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
MySQL分布式恢复进阶
2022/07/23 MySQL