文档章节

简单的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>

 

© 著作权归作者所有

共有 人打赏支持
别人说我名字很长
粉丝 55
博文 255
码字总数 105359
作品 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
浅谈React的最大亮点——虚拟DOM

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

peakedness丶
11/15
0
0
转载 | DOM系列:修改DOM

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

一个敲代码的前端妹子
06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅析微信支付:开通免充值产品功能及如何进行接口升级指引

本文是【浅析微信支付】系列文章的第十五篇,主要讲解如何开通免充值产品功能流程和其中的注意事项,对于接口升级会重要讲解,避免爬坑。 浅析微信支付系列已经更新十五篇了哟~,没有看过的...

YClimb
44分钟前
2
0
看看ArrayDeque源码

之前看了其他实现Deque接口的类,这里再看看ArrayDeque吧,下图可以看到这个类设计的结构层次,其实Deque接口是继承了Queue接口的。用可调整大小的数组实现Deque接口。没有容量限制,他们根据...

woshixin
44分钟前
2
0
如何存储登录cookie,发送一个post类型的api请求?

其实发送post请求和get请求一样,主要就是不知道如何存储登录cookie进行发送请求,请教xx得到如下解决办法 点击右下方的cookies,填写cookies信息,如图 1填写登录的cookie名,2填写cookie的...

七曦777
45分钟前
1
0
利用cefSharp实现网页自动注册登录的需要注册的一些事项

最近朋友有个需要自动注册登录点击的事,我帮着写了写,好久没写过这东西了,在写的过程中总结了需要注意的一些事项。 一、换IP之后要测试一下速度,我目前用的最简单的测试方法就是20-30秒加...

我退而结网
53分钟前
2
0
Go语言中使用 BoltDB数据库

boltdb 是使用Go语言编写的开源的键值对数据库,Github的地址如下: https://github.com/boltdb/bolt boltdb 存储数据时 key 和 value 都要求是字节数据,此处需要使用到 序列化和反序列化。...

Oo若离oO
54分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部