search

Home  >  Article  >  Web Front-end  >  Simple implementation of JS encapsulation of dom operations_javascript skills

Simple implementation of JS encapsulation of dom operations_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:28:041638browse

This article mainly introduces the simple implementation of JS to encapsulate DOM operations. Let’s go directly to the code: 

<!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>

I will share with you a common DOM operation in js. The code is as follows

<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>

The above are the common operations related to DOM in js. I hope it will be helpful to everyone's learning.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript learning summary prototype_javascript skillsNext article：JavaScript learning summary prototype_javascript skills

Related articles

See more