简单实现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 相关文章推荐
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
创建一个类Person的简单实例
May 17 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
用Flash图形化数据(一)
2006/10/09 PHP
php引用传值实例详解学习
2013/11/06 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
script标签属性type与language使用选择
2012/12/02 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
python设置环境变量的作用整理
2020/02/17 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
.net面试题
2016/09/17 面试题
职业生涯规划书基本格式
2014/01/06 职场文书
自查自纠整改报告
2014/11/06 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
交通安全月活动总结
2015/05/08 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers