20170312606632017-03-13.jpg

文章开始之前,先对Emmet赞美下,没有这东西,一个个字符的敲,早晚得疯之前做了一个页面,感觉手都敲废了,暂时认识到,前端花在布局,即CSS上面的时间实在太多,html不难,javascript不难,CSS最难。不扯淡了。Emmet是一个快速写html的插件。具体可以看看文档。 这篇文章算是对学习javascript的类选择器封装和dom节点的创建,插入,删除,克隆的记录,没有特别的应用场景。纯粹学习。这篇文章的知识整理自javascript学习教程。一步步来封装一个完整的Class。平时写CSS的时候,类选择器是用的最多的。假如我们需要对具有相同的className的标签更改某些属性,那么就需要用到document.getElementsByClassName("****")

Class类封装

首先,IE 6,7,8并不支持document.getElementsByClassName(“**“),IE垃圾,mdzz。不管怎样,IE8还是要考虑的。如何兼容该平台呢,我们可以通过循环遍历标签,然后对其className`进行对比,将相同的结果放到数组中,然后返回。

版本一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
window.onload = function () {
function getClass(className) {
// 非IE8<<
if (document.getElementsByClassName){
var dom = document.getElementsByClassName(className);
console.log(dom.length);
return dom;
}
var arr = [];
var allDom = document.getElementsByTagName("*");
for (var i = 0;i<allDom.length;i++){
if (allDom[i].className == className){
arr.push(allDom[i]);
}
}
console.log(arr.length);
return arr;
}
getClass("demo");
}
</script>

版本二

以上封装只适合一个元素对应一个类名,但是一个元素经常有多个类名,如何解决这个一个元素,多个类名呢。

我们可以使用数组来存储一个元素中所有的类名,然后进行一一对比,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
window.onload = function () {
function getClass(className) {
if (document.getElementsByClassName){
var dom = document.getElementsByClassName(className);
console.log(dom.length);
return dom;
}
var arr = [];
var allDom = document.getElementsByTagName("*");
for (var i = 0;i<allDom.length;i++){
// 获取元素中所有的类名
var valArr = allDom[i].className.split(" ");
for (var j = 0;j<valArr;j++){
if(valArr[j] == className){
arr.push(allDom[i]);
}
}
}
console.log(arr.length);
return arr;
}
var arr = getClass("demo test");
for (var i = 0;i<arr.length;i++){
arr[i].style.backgroundColor="blue";
}
}
</script>

版本三

上面的版本解决了多个类名的问题,但是,有时候我们只希望获取某个模块下包含什么类名的元素。那么我们可以使用继承id的方式。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script>
window.onload = function () {
function getClass(className, id) {
// 支持classname
if (document.getElementsByClassName)
{
if (id){
var element = document.getElementById(id);
var dom = element.getElementsByClassName(className);
console.log(dom.length);
return dom;
}else {
var dom = document.getElementsByClassName(className);
console.log(dom.length);
return dom;
}
}else {
var arr = [];
if(id){
var notIdEelment = document.getElementById(id);
var allDom = notIdEelment.getElementsByTagName("*");
for (var i = 0; i < allDom.length; i++) {
var valArr = allDom[i].className.split(" ");
for (var j = 0; j < valArr; j++) {
if (valArr[j] == className) {
arr.push(allDom[i]);
}
}
}
}else {
var allDom = document.getElementsByTagName("*");
for (var i = 0; i < allDom.length; i++) {
var valArr = allDom[i].className.split(" ");
for (var j = 0; j < valArr; j++) {
if (valArr[j] == className) {
arr.push(allDom[i]);
}
}
}
}
}
console.log(arr.length);
return arr;
}
var arr = getClass("demo","content");
for (var i = 0; i < arr.length; i++) {
arr[i].style.backgroundColor = "blue";
}
}
</script>

DOM访问关系

DOM节点的访问

dom节点包括以下几个:

父节点 兄弟节点 子节点 所有子节点
parentNode nextSibling(IE认识) firstChild(IE认识) childNodes(不要怀疑,这个就是扯淡,需要结合nodeType一起使用)
都认识 nextElementSibling(别的浏览器认识) firstElementChild(别的浏览器认识) children(一般都用这个,IE6,7,8中注释也算是节点。取消注释)
previousSibling(IE认识) lastChild(IE认识)
previousElementSibling(别的浏览器认识) lastElementChild(别的浏览器认识)
`var lv = $id(“demo”).nextElementSibling $id(“demo”).nextSibling;`

DOM节点的新建

添加在子元素的最后位置

1
2
3
4
5
function $id(id) {
return document.getElementById(id);
}
var newDiv = document.createElement("div");
$id("container").appendChild(newDiv);

DOM节点的插入

1
$id("list").insertBefore(newDiv,ulParent[1]);

ulParent[1]表示相对哪个节点。如果为null,则插入子节点的最后位置,如上面的一样

DOM节点的删除

1
$id("list").removeChild(newDiv);

DOM节点的克隆

1
2
var ulClone = $id("list").clone(true);
$id("container").appendChild(ulClone);