文档章节

简单的dom操作

别人说我名字很长
 别人说我名字很长
发布于 2016/12/07 00:48
字数 633
阅读 6
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
别人说我名字很长
粉丝 56
博文 258
码字总数 108335
作品 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
深度剖析:如何实现一个 Virtual DOM 算法

特别声明:本文转载@Livoras的《深度剖析:如何实现一个 Virtual DOM 算法》一文,如需转载,烦请注明原文出处:https://github.com/livoras/blog/issues/13。 本文会在教你怎么用 行代码实现...

大灰狼的小绵羊哥哥
2018/11/28
0
0
浅谈React的最大亮点——虚拟DOM

在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制。 一、什么是...

peakedness丶
2018/11/15
0
0
(3)JavaScript 之 DOM编程

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

MK先生
2016/08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

监听DOM上某一个元素是否发生变化,利用MutationObserver来监听元素变化

/** * 观察DOM是否发变化的事件 * @type {MutationObserver|*} */var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserv......

lwkai
18分钟前
1
0
遇到的问题

问题1:前两天在Nodepad++写了一个登录页面,但在Chrome中调试一直写不进Cookie。 解决办法:Chrome浏览器不支持本地静态js写Cookie。换用Edge调试即可。 内心:卧槽,浪费我这么多时间。 问...

akane_oimo
20分钟前
2
0
Oracle学习日志-6(聚合查询)

聚合函数 聚合函数可以对数据进行某种操作或者计算。比如几个常用的函数: COUNT:计算表中行数。 SUM:计算表中数据列中数据的合计值。 AVG:计算表中数据列中数据的平均值。 MAX:求出表中...

白话
22分钟前
1
0
Axure原型工具Axure RP9安装及Licensee

http://www.zhanshaoyi.com/9132.html

晚风0623
27分钟前
1
0
如何限制用户仅通过HTTPS方式访问OSS?

一、当前存在的问题 当前OSS支持用户使用HTTPS/HTTP协议访问Bucket。但由于HTTP存在安全漏洞。大型企业客户都要求使用HTTPS方式访问OSS,并且拒绝HTTP访问请求。 目前OSS可以通过RAM policy方...

阿里云官方博客
48分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部