js一个非常重要的作用就是对dom进行操作,所谓的dom,可以理解为html代码里的一个个节点。比如,body标签元素就是一个dom。本文对js的dom操作进行一些总结。
按照惯例,先上一个刚写好的小例子,代码在最后给出:
现在,来看看js对dom的一些操作吧。
首先,给出一个html模板,接下来开始用js来做一些有趣的事情吧,css样式的绘制就不细说了,先上代码:
css
*{margin: 0;padding: 0;}.parent { width: 305px; height: 302px; background: #d7e6ea; margin: 100px auto; }.parent .child { width: 80px; height: 80px; background: deepskyblue; float: left; margin-top: 10px; margin-left: 9px; margin-right: 12px; margin-bottom: 12px; box-shadow: 3px -3px 2px #9898c7; text-align: center; line-height: 80px; font-family: "微软雅黑"; font-size: 28px; text-shadow: 2px 2px 2px yellowgreen;}
效果图
从代码中,我们可以看到,body是一个大节点,里面套了一个class属性为parent的div盒子,然后我们又在这个盒子里面放了9个小盒子。
1.最简单的dom方法封装
在本系列中,假设我们不考虑用jQuery。
现在给第三个盒子添加一个id。
如何拿到这个盒子呢?
很显然,最先想到的肯定是document.getElementById() 方法,于是就有了这样的代码。
var box = document.getElementById('targetBox');box.style.background = '#FEAF51';
效果:
当然,我们很多时候都不希望每次都把document.getElementById(id)给写一遍,那么,是不是可以将这一个过程封装起来呢?
于是,自然而然的,我们会这么写:
//获取JavaScript的dom对象function dom(id){ return document.getElementById(id);};var box = dom('targetBox');box.style.background = '#FEAF51';
完美运行,我们知道,在jQuery中,是这样的:
var box = $('#targetBox');
那么,为了让代码更加山寨,不妨将dom方法稍微改进一下嘞!
//获取JavaScript的dom对象function dom(id){ if(id.toString().indexOf('#') != -1) { id = id.replace('#',''); } return document.getElementById(id);};var box = dom('#targetBox');box.style.background = '#FEAF51';
2.如何获取dom元素在父盒子中的位置?
刚才,我们已经获得了编号为3的div盒子,要得到它在父盒子的角标位置,首先肯定要拿到它的父盒子对象吧。
像这样:
var box = dom('#targetBox');var parent = box.parentElement;
parent打印出来是这样的:
看来很顺利呢,接下来因为要知道目标元素在父盒子的位置,则需要拿到父盒子所有的孩子节点。
像这样:
var children = parent.children;
打印结果:
接下来就要遍历这些孩子节点啦,children 的数据类型是object。
然而,在js中我们可以遍历数组,却无法直接遍历object,咋办呢?
原来,这是一个特殊的object,因为它有一个length属性。有length属性的object,可以通过以下方式转换成数组(注:当然,这边也可以直接获取获取object中的length,然后来遍历。):
Array.prototype.slice.call(object);
举个例子:
var obj ={length:2,0:'first',1:'second'};objArr = Array.prototype.slice.call(obj);alert(objArr);
结果:
注1: length是几个,就转换几个,如果你length写1,那么只弹出first。
注2: key必须为数字,而且与数组的角标是对应的。
这里不深究call的的意思,我会在以后重新写这方面的内容。
回到正题,现在可以拿到数组形式的children了!
var children = Array.prototype.slice.call(parent.children);
开始遍历:
for(var i = 0,len = children.length;i < len;i++){ if(children[i] == box){ alert(i); }}
结果:
弹出来下标是2,因为数组下标的起始值是从0开始的。
上面的循环结构还欠缺了一个东西,就是一旦找到box之后,因为及时退出循环才是。像这样:
for(var i = 0,len = children.length;i < len;i++){ if(children[i] == box){ alert(i); break; }}
这样便可以一定程度地提高性能。顺便附上forEach的写法:
children.forEach(function(child,index){ if(child == box){ alert(index); return false; }});
这样也可以,最后,将这些内容封装成方法,就采用forEach的方式吧!
//查找当前dom元素在父盒子中的位置function getIndex(dom){ var index = -1; var domArr = Array.prototype.slice.call(dom.parentElement.children); domArr.forEach(function(obj,i){ if(obj==dom){ index = i; return false; } }); return index;};
我学习js的路线就是如此,先想尽办法把功能实现了,然后才开始封装成方法。封装的好处不言而喻,没有人喜欢每次用到这个功能的时候,就去把实现代码拷贝一份吧。
3.如何获取parent下面指定class的元素列表?
parent盒子下面有9个孩子节点,我们能否通过一个什么办法获取到这9个孩子节点呢?显然,这些孩子节点都有一个共同的className,那么我们可以通过这个className来获取。
IE9 + 已经可以通过下面的方式来实现了:
var children = parent.getElementsByClassName('child');
效果:
IE678还是不支持的,那么,如果让我们自己来封装一个方法,又该如何呢?
这里提供一种思路:
1.用getElementsByTagName获取parent元素下所有的节点。
2.遍历这些节点,比较className,如果相同,就用一个数组装起来。
3.返回这个数组。
上代码:
/*通过className获取dom元素进行过滤*/function getClass(pid,sClass){ var aEle = dom(pid).getElementsByTagName('*'); var arrs = []; for(var i=0;i
最后,附上最开始小例子的源码:
*{margin: 0;padding: 0;}
body {
background: url(https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/12.jpg?2) no-repeat;
background-size: 100% 128%;
overflow: hidden;
}
.content {
height: 600px;
width: 305px;
margin: 100px auto;
position: relative;
border-top:8px solid #ccc;
border-right:10px solid #ccc;
}
.content .screen {
height: 298px;
width: 305px;
background: #333;
position: absolute;
}
.content .screen .icon {
width: 78px;
height: 78px;
display: inline-block;
background: url(android.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -39px;
margin-left: -39px;
}
.parent {
width: 305px;
height: 302px;
background: #d7e6ea;
position: absolute;
bottom: 0px;
}
.parent .child {
width: 80px;
height: 80px;
background: #eee;
float: left;
margin-top: 10px;
margin-left: 9px;
margin-right: 12px;
margin-bottom: 12px;
box-shadow: 3px -3px 2px #9898c7;
text-align: center;
line-height: 80px;
font-family: "微软雅黑";
font-size: 28px;
text-shadow: 2px 2px 2px yellowgreen;
}
.parent .child:hover {
cursor: pointer;
background: linear-gradient(#ccc,#666);
}
.putIn {
position: absolute;
width:100%;
height:60px;
line-height: 60px;
color: #fff;
bottom:0;
right: 0;/*为了让padding起作用*/
text-align:right;
font-size: 40px;
overflow: hidden;
padding-right: 8px;
padding-bottom: 8px;
}