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

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

---

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

• 渐进增强(progressive enhancement)

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

• 平稳退化

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

---

• 三者分离

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

---

• 可用函数调用

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

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() —— 获取下一个元素节点
　　

function getNextElement(node) {    if(node.nodeType == 1) {        return node;    }    if(node.nextSibling) {        return getNextElement(node.nextSibling);    }    return null;}

　　addLoadEvent() —— 共享onload事件
　　

function addLoadEvent(func) {    var oldonload = window.onload;    if(typeof window.onload != 'function') {        window.onload = func;    }    else {        window.onload = function(){            oldonload();            func();        }    }}

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

//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
　　

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属性的动画
　　

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);}