文档章节

简单的dom操作

别人说我名字很长
 别人说我名字很长
发布于 2016/12/07 00:48
字数 633
阅读 5
收藏 0

写个简易dome选择器

<!DOCTYPE html>
<html>
<head>
	<title>简易dom选择器</title>
	<meta charset="utf-8" />
</head>
<body>

<div id="box">
	<ul>
		<li class="aaa bbb ccc">项目1</li>
		<li class="active">项目2</li>
		<li class="ccc aaa"><input type="text" name=""></li>
		<li class="dddd bbb"><span>项目4</span></li>
	</ul>
</div>

<script type="text/javascript">

var Selector = window.Q = function(query){

	var Q = {};
	Q.elements = [];
	if(typeof query == "string"){
		Q.elements = document.querySelectorAll(query);
	}else if(typeof(query) == "object" && query.nodeType==1){
		Q.elements = [query] ;
	}

	Q.length = Q.elements.length;

	var setElements = function(elements){
		Q.elements = elements;
		Q.length = elements.length;
	}


	Q.inArray = function(item,arr){
		for(var v of arr){
			if(v==item)return true;
		}
		return false;
	}


	Q.each = function(handler){
		[].forEach.call(Q.elements,function(element,index){
			handler(element,index);
		});
	}

	Q.eq = function(index){
		if(Q.length-1<index){
			Q.elements = [];
			Q.length = 0;
		}else{
			Q.elements = [Q.elements[index]];
			Q.length = 1;
		}
		return this;
	}

	Q.index = function(){
		if(Q.elements.length==0)return -1;
		var arr = Q.elements[0].parentNode.childNodes;
		var sibs = [];
		arr.forEach(function(item,index){
			if(item.nodeType===1){
				sibs.push(item);
			} 
		});
		
		for(var i=0;i<sibs.length;i++){
			if(sibs[i]===Q.elements[0])return i;
		}
		return -1;
	}

	Q.siblings = function(){
		if(Q.elements.length==0)return this;

		var parent = Q.elements[0].parentNode;
		var sibs = [];
		parent.childNodes.forEach(function(v){
			if(v.nodeType==1 && v!==Q.elements[0]){
				sibs.push(v);
			}
		});

		Q.elements = sibs;
		Q.length = sibs.length;
		return this;
	}

	Q.click = function(handler){
		Q.each(function(element){
			element.addEventListener("click",handler)
		});
		return this;
	}

	Q.css = function(style){
		Q.each(function(element){
			element.setAttribute("style",style);
		});
		return this;
	}

	Q.addClass = function(className){
		Q.each(function(element){
			element.className += ' '+className;
		});
		return this;
	}

	Q.removeClass = function(className){
		Q.each(function(element){
			console.log(element.className);
			var oldArr = element.className.split(" ");
			var rmArr = className.split(" ");
			var newClassNames = [];
			oldArr.forEach(function(item,index){
				if(!Q.inArray(item,rmArr)){
					newClassNames.push(item);
				}
			})
			element.className = newClassNames.join(" ");
		});
		return this;
	};

	Q.html = function(html){
		var isGet = typeof(html)=='undefined' ? true : false;
		var result = '';
		Q.each(function(element){
			isGet ? result += element.innerHTML : element.innerHTML = html;
		});
		return isGet ? result : this;
	}

	Q.text = function(text){
		var isGet = typeof(text)=='undefined' ? true : false;
		var result = '';
		Q.each(function(element){
			isGet ? result += element.innerText : element.innerText = text
		});
		return isGet ? result : this;
	}

	Q.val = function(value){
		var isGet = typeof(value)=='undefined' ? true : false;
		var result = '';
		Q.each(function(element){
			isGet ? result += element.value : element.value = value;
		})
		return isGet ? result : this;
	}

	Q.append = function(value){
		Q.each(function(element){
			//console.log(element);
		});
		return this;
	}

	//todo nodeList的监测
	Q.on = function(e,selector,handler){
		Q.each(function(element){
			element.addEventListener(e,handler);
		});
		return this;
	}

	Q.removeAttr = function(attrName){
		Q.each(function(element){
			element.removeAttribute(attrName);
		});
		return this;
	}

	Q.prev = function(){
		var arr = [];
		Q.each(function(element){
			var ele = element.previousSibling();
			if(ele){
				arr.push(ele); 
			}
		});
		setElements(arr);
		return this;
	}

	Q.next = function(){
		var arr = [];
		Q.each(function(element){
			var ele = element.nextSibling();
			if(ele)arr.push(ele);
		});
		setElements(arr);
		return this;
	}

	Q.parent = function(){
		//parentNode
	}

	Q.parents = function(){
		//ownerDocument
		//parentNode
	}

	//todo  append()
	//todo  prepend()
	//todo  after()
	//todo  before()
	//todo  remove()
	//todo  first()
	//todo  last()
	//todo  hasClass()
	//todo  closest()
	//todo  children()
	//todo  parent()
	//todo  parents()
	//todo  show()
	//todo  hide()
	//todo  width()
	//todo  height()
	//todo  offset()
	//todo  attr()
	//todo  removeAttr()
	//todo  data()
	//todo  removeData()
	//todo  extend()
	//todo  on[blur,change,click,dblclick,focus,keydown,keyup,mouseenter,mouseleave,mouseout,submit]
	//todo  prev()
	//todo  ajax()
	//todo  get()
	//todo  getJSON()
	//todo  post()
	//todo  promise()



	return Q;
}

Q("#box ul li").click(function(event){
	Q(this).css("color:#f00").siblings().css("color:#000");
})

Q("#box ul li").eq(1).css("color:#f00");

Q("#box ul li").removeClass("aaa bbb");

Q("#box ul li").eq(1).html('<b style="color:green;">html content</b>');

Q("#box input").val("hello world");

console.log(Q("#box ul li").text());

Q("#box ul li").on("click","",function(event){
	console.log(Q(this).text())
})

Q("#box ul li").append('<b style="color:green">hello world</b>');




</script>
<input type="text" id="a">
<span id="b"></span>

<script type="text/javascript">
var obj = {};
Object.defineProperty(obj,'hello',{
	set:function(newVal){
		document.getElementById('a').value = newVal;
		document.getElementById('b').innerHTML = newVal;
	}
});

document.addEventListener('keyup',function(e){
	obj.hello = e.target.value;
});
</script>

</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
别人说我名字很长
粉丝 55
博文 254
码字总数 103692
作品 0
济南
程序员
Javascript的DOM操作 - 你真的了解吗?

前言 在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望...

顽Shi
2014/02/12
0
11
9.停下来说说jquery

javacript时代到jquery时代 不同浏览器对javacript解析的差异性,导致做兼容处理的成本的上升,聪明人很快发现了这个痛点,于是, 抹平浏览器差异的jQuery库出现了。 jQuery:用更少的代码,...

oneboi
2016/11/25
2
0
(3)JavaScript 之 DOM编程

DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚...

MK先生
2016/08/31
0
0
转载 | DOM系列:修改DOM

通过前面的学习,我们都知道,DOM并不一定要由存在于HTML中的元素组成。我们仅需要使用几行JavaScript代码就可以将HTML元素添加到你的DOM中。而且你也有能力移动周围的元素,甚至删除它们。除...

一个敲代码的前端妹子
06/05
0
0
一个demo学会js

全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全...

luanpeng825485697
2017/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

React 服务器渲染原理解析与实践

网盘下载地址 React 服务器渲染原理解析与实践 本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节...

qq__2304636824
8分钟前
0
0
Jenkins使用

clean install -Dmaven.test.skip=true

1713716445
17分钟前
0
0
多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
0
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
今天
3
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部