简单实现JS对dom操作封装
这篇文章主要介绍了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 的相关常用操作，希望对大家的学习有所帮助。
相关推荐
-
浅谈JS读取DOM对象(标签)的自定义属性
DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: <div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为tes
-
JS构建页面的DOM节点结构的实现代码
小提示: 关于数组的concat和push方法. 两者的区别主要有: concat是连接数组,不会修改原数组,返回值为连接后的数组,与push的重要区别是concat会展开数组的第一层子数组 push是添加数组元素.就地修改原数组,返回值为添加的新项,push不会展开传入的数组. 复制代码 代码如下: var a = [1,2,3,4]; var b = [4,5,6,7]; var c = a.push(b); var d = a.concat(b); console.log('a',a);
-
在js代码拼接dom对象到页面上去的模板总结(必看)
每次在js代码里面想动态的拼个dom,然后append到页面上,都是各种麻烦, 要是可以直接在jsp页面弄个隐藏的model那是很好的,用js方法里面的clone方法也是很好的,还可以给不同部分set值. 为了以后简单点,我就把模板摆着,方便后面用得着的时候,复制粘贴. function fillDialog(dataArray) { var target = $("#dialogTarget"); target.empty(); for (var i = 0; i < data
-
在模板页面的js使用办法
如下所示 : 代码 复制代码 代码如下: <input id="txt_title" runat="server" name="txt_title" style="width:150px; height:20px" maxlength="40" type="text" onchange="CheckResume('ctl00_head_txt_title','title'
-
简单实现JS对dom操作封装
这篇文章主要介绍了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>
-
js使用DOM操作实现简单留言板的方法
本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素") 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元
-
JS对日期操作封装代码实例
这篇文章主要介绍了JS对日期操作封装代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 格式化日期: /** * 格式化日期 * @param fmt 例如:yyyy-MM-dd 等 * @returns {*} * @constructor */ Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1
-
mongodb初始化并使用node.js实现mongodb操作封装方法
mongodb的下载只要在https://www.mongodb.com/网站就能够下载 或者使用本地下载 https://www.jb51.net/softs/590664.html 下载后安装只用一直点next就可以,注意最好使用默认路径安装到C盘,然后在任意位置建立一个文件夹用于储存你的数据库 这里我命名的是mongodbWorkspace 复制他的路径,在命令行工具(windows快捷键win+R)中,输入mongod --dbpath 你的路径,我的如下所示 现在你就已经初始化好了你的
-
简单封装js的dom查询实例代码
最近一直在啃犀牛书,有感,于是写了个简单的js的dom查询 $ = function (val) { switch(val.charAt(0)) { case '#' : return document.getElementById(val.substring(1)); break; case '.' : val = val.replace('.',''); if(document.getElementsByClassName) return document.getElementsByClas
-
js实现封装jQuery的简单方法与链式操作详解
我用这篇文章来理一理如何用js去实现封装jQuery的简单方法. 本文js实现了下面jquery的几种方法,我将它分为8个小目标 实现$(".box1").click( )方法 实现$("div").click( )方法 考虑$( )中参数的三种情况 实现jq中的on方法 实现链式操作 实现jq中的eq方法 实现jq中的end方法 实现jq中的css方法 有不正确的地方还望大家在评论区指出来,谢谢啦. 1. 实现$(".box1").click(
-
DOM操作和jQuery实现选项移动操作的简单实例
DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM选项移动操作</title> <style> select { width: 100px; height: 85px; } div { display: inline-block; width: 50px } </style
-
JS实现DOM删除节点操作示例
本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t
-
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属
-
Angular.JS通过指令操作DOM的方法
在指令而非在控制器中操作DOM 相信大家在页面处理中,难免会遇到操作DOM的情况,在AngularJS中,对DOM的操作是在指令而非控制器中完成的. AngularJS强调隔离的思想:把复杂的逻辑和操作放在指令或服务中,控制器作为视图和$scope之间的桥梁,仅仅用来存储数据模型. jqLite 为了便于DOM操作,AngularJS内部封装了angular.element,如果现有项目中已经引入的jQuery,angular.element相当于jQuery函数的别名,否则,angular.e