文档章节

简单的dom操作

别人说我名字很长
 别人说我名字很长
发布于 2016/12/07 00:48
字数 633
阅读 5
收藏 0
点赞 0
评论 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
博文 246
码字总数 97330
作品 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技术栈之为什么选择react,React起源于Facebook公司的内容项目,该公司在尝试用H5来建设Instagram网站的过程中发现,对于复杂前端h5性能下降明显,在对市场的mvc框架分析后,依然无法找...

u010250808的博客
2017/12/18
0
0
全面理解虚拟Dom,如何来实现虚拟Dom

1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题由JS引起的,大部分都是由DOM操作引起的。如果对前端工作进行抽象的话,主要就是维护状态和更新视图;而更新视图和维护状态...

Ecl_02b8
2017/12/21
0
0
react快速入门

简介 React是Facebook开源的一个用于构建用户界面的Javascript库,已经 应用于Facebook及旗下Instagram。 和庞大的AngularJS不同,React专注于MVC架构中的V,即视图。 这使得React很容易和开...

笔阁
2015/09/29
1K
0
MVC时代的终结,接下来的函数式响应型编程会成为未来的霸主

     React.js,Elm,Cycle.js和其他UI框架引入了一种构建用户界面的新方法。通过将函数式响应型编程的原理应用于UI开发中,他们甚至改变了我们对用户界面的看法。在任何时候,这些方法都...

webstack前端栈
2017/12/25
0
0
简单实现一个Virtual DOM

前言 之前写过一篇文章为什么使用v-for时必须添加唯一的key?,但是解释的不是很深刻,其实真正的原因还需要从Virtual DOM的实现上解释;本篇文章从简单实现一个Virtual DOM入手,去解释一下V...

funnycoderstar
04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

4 个快速的 Python 编译器 for 2018

简评:Python 和其他的解释型语言一样经常被吐槽性能不行,所以开发人员为了提升性能创建了不少编译器,本文则选取其中的四个做了基准测试。 Python 其实是一种相当快的语言,但它并不像编译...

极光推送
11分钟前
0
0
SSO CAS单点登录搭建详细步骤及源码

1.因为是本地模拟sso环境,而sso的环境测试需要域名,所以需要虚拟几个域名出来,步骤如下: 2.进入目录C:\Windows\System32\drivers\etc 3.修改hosts文件 127.0.0.1 jeesz.cn 127.0.0.1 sso...

明理萝
11分钟前
0
1
spring boot注册多个MQ服务器的问题

关于注册到多个MQ源的文章已经有很多了,这里记录一下声明queue的坑; 如果使用注册bean的方式声明queue,会导致声明的queue同时被注册到所有的MQ源上; //如果使用下面的声明方式,que...

placeholder
12分钟前
0
0
Java面试基础篇——第九篇:BIO,NIO,AIO的区别

现在IO模型主要分三类:BIO(同步阻塞IO),NIO(同步非阻塞IO),AIO()。 先来看看BIO。 1. BIO 服务端接受到请求后,要指派或新建一个线程去处理客户端的IO请求,直到收到断开连接的指令。这么做...

developlee的潇洒人生
17分钟前
0
0
@RequestMapping @ResponseBody 和 @RequestBody 用法与区别

1.@RequestMapping 国际惯例先介绍什么是@RequestMapping,@RequestMapping 是一个用来处理请求地址映射的注解,可用于类或方法上。用于类上,表示类中的所有响应请求的方法都是以该地址作为...

特拉仔
19分钟前
1
0
基于 HTML5 结合互联网+ 的 3D 隧道

前言 目前,物资采购和人力成本是隧道业发展的两大瓶颈。比如依靠民间借贷,融资成本很高;采购价格不透明,没有增值税发票;还有项目管控和供应链管理的问题。成本在不断上升,利润在不断下...

xhload3d
21分钟前
0
0
济南小程序热度分析

原文链接:http://www.jnqianle.cn/company/2072.html

tianma3798
22分钟前
1
0
大数据软件

beats 采集 kafka spark hive es grafana zeppelin

ArlenXu
24分钟前
0
0
Mac item2常用快捷键

标签 新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 command + 左右方向键 切换全屏:command + enter 查找:command + f 分屏 水平分屏:command + d 垂直分屏:c...

说回答
27分钟前
0
0
mac常用软件

1.excel for mac http://www.pc6.com/mac/114205.html

小黑202
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部