th是个小屁孩 的部落宅

《JavaScript DOM 编程艺术2》 笔记摘抄

　　　　　　　　

2017-02-23

《JavaScript DOM 编程艺术2》 笔记摘抄

DOM操作有两项原则，分别是渐进增强(progressive enhancement)和平稳退化这样更符合html+css+javascript的三者分离标准。

  • 渐进增强(progressive enhancement)

渐进增强原则基于这样一种思想：你应该总是从最核心的部分，也就是从内容开始。 应该根据内容使用标记良好的结构；然后再逐步加强这些内容。 这些增强工作既可以是通过CSS改进呈现效果，也可以是通过DOM添加各种行为。

  • 平稳退化

网站访问者完全有可能使用不支持JavaScript的浏览器，或者禁用了它，如果没有考虑这个问题，就会遇到很多问题，为了让这种情况下也能顺利的浏览这个网页，就要做到平稳退化，就是说，虽然某些功能无法使用，但最基本的操作仍然能完成。渐进增强的实现必然支持平稳退化。 如果你按照渐进增强的原则去充实内容，你为内容添加的样式和行为就自然支持平稳退化。

  • 三者分离

使用(X)HTML去搭建文档的结构（html负责结构层）
使用CSS去设置文档的呈现效果（css负责表现层）
使用DOM脚本去实现文档的行为（javascript负责行为层）

  • 可用函数调用

　getElementsByClassName(node,classname) —— 兼容老浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getElementsByClassName(node,classname) {
    if(node.getElementsByClassName) {
        //使用现有方法
        return node.getElementsByClassName(classname);
    }
    else{
        var results = new Array();
        var elems = node.getElementsByTagName("*");
        for(var i=0;i < elems.length;i++){
            if(elems[i].className.indexOf(classname) != -1) {
            results[results.length] = elems[i];
            }
        }
        return results;
    }
}

　　getNextElement() —— 获取下一个元素节点 　　

1
2
3
4
5
6
7
8
9
function getNextElement(node) {
    if(node.nodeType == 1) {
        return node;
    }
    if(node.nextSibling) {
        return getNextElement(node.nextSibling);
    }
    return null;
}

　　addLoadEvent() —— 共享onload事件 　　

1
2
3
4
5
6
7
8
9
10
11
12
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

　　insertAfter() —— 在某元素后插入新元素 　　

1
2
3
4
5
6
7
8
9
10
11
12
//DOM已提供，在某元素之前插入新元素
insertBefore(newElement,targetElement) 
function insertAfter(newElement,targetElement) {
    var parent = targetElement.parentNode();
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }
    else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

　　addClass() —— 添加新的className 　　

1
2
3
4
5
6
7
8
9
10
11
12
13
function addClass(element,value) {
    //判断className属性是否为空
    if(!element.className) {
    element.className = value;
    }
    else {
    //若不为空，把空格和新的class设置值追加到className属性上去
    newClassName = element.className;
    newClassName += " ";
    newClassName += value;
    element.className = newClassName;
    }
}

　　moveElement() —— 基于CSS属性的动画 　　

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
function moveElement(elementID,final_x,final_y,interval) {
    //添加安全检查，检测是否支持getElementById
    if(!document.getElementById) return false;
    //添加安全检查，检测是否有elementId
    if(!document.getElementById(elementId)) return false;
    var elem = document.getElementById(elementID);
    if(elem.movement) {
        clearTimeout(elem.movement);
    }
    //添加安全检查，检测elementId是否有left/top属性
    if(!elem.style.left) {
        elem.style.left = 0 + "px";
    }
    if(!elem.style.top) {
        elem.style.top = 0 + "px";
    }
    var xpos = parseInt(elem.style.left);
    var ypos = paresInt(elem.style.top);
    var dist = 0;
    if(xpos == final_x && ypos == final_y){
        return true;
    }
    if(xpos < final_x) {
        dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
    }
    if(xpos > final_x) {
        dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }
    if(ypos < final_y) {
        dist = Math.ceil((final_y - xpos)/10);
        ypos = ypos + dist;
    }
    if(ypos > final_y) {
        dist = Math.ceil((xpos - final_y)/10);
        ypos = ypos - dist;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
}