JavaScript DOM编程艺术(第二版)综合示例global.js源码

（声明，本文章虽注明为原创，但只对源码做了部分修改）
下面是完整的global.js源码，部分程序稍作了一些修改(不需要修改其他源文件)，并且注明了在使用THML5的时候哪些函数可以不需要。

function addLoadEvent(func) {
    // 为load事件添加响应函数
    var curonload = window.onload; // 保存当前的load事件响应函数
    if(typeof curonload != 'function') { // 如果当前的load事件响应函数的类型不是function的话，即没有绑定任何load事件响应函数的话，
        window.onload = func; // 则将func帮定为load事件的响应函数。
    } else { //否则,
        window.onload = function() {
    // 为load事件绑定新的响应函数，其定义如下：
            curonload(); //当前的load事件响应函数
            func(); // 新添加的load事件响应函数
        }
    }
}

function insertAfter(newElement, targetElement) {
    // 在目标元素(targetElement)之后插入新元素(newElement)
    var parent = targetElement.parentNode; // 获得目标元素的父节点
    if(parent.lastchild == targetElement) { // 如果目标元素是父节点的最后一个子节点的话，
        parent.appendChild(targetElement); // 直接调用内置的appendChild()函数，将新元素追加到最后。
    } else { // 否则
        parent.insertBefore(newElement, targetElement.nextSibling); // 调用内置的insertBefore()函数，将新元素插入到目标元素的下一个兄弟节点之前
    }
}

function addClass(element, value) {
    // 为元素(element)添加新类(value)
    if(!element.className) { // 如果元素的类属性值为空字符串的话，则
        element.className = value; // 将元素的类属性设置为value
    } else { // 否则
        newClassName = element.className; // 使用newClassName保存className属性当前的值
        newClassName += " "; // 因为向元素添加不同的类需要用空格隔开，所以使用字符串加法添加一个空格
        newClassName += value; // 将新类名添加到newClassName中
        element.className = newClassName; // 将元素的类名属性设置为newClassName
    }
}

function hilightPage() {
    // 高亮当前页的导航
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    var headers = document.getElementsByTagName('header'); // 获得header元素
    if(0 == headers.length) return false;
    var navs = headers[0].getElementsByTagName('nav'); // 获得nav元素
    if(0 == navs.length) return false;
    var links = navs[0].getElementsByTagName('a'); // 获得包含a元素的数组
    var linkurl; // 定义变量linkurl用于存储完整的超链接
    for(var i = 0; i < links.length; ++i) { // 遍历导航栏的所有链接
        linkurl = links[i].getAttribute('href'); // 获得第i个a元素的href值
        if(window.location.href.indexOf(linkurl) != -1) { // 如果当前地址中包含linkurl，则
            links[i].className = 'here'; // 将导航栏中第i个a元素的类属性设置为here
            var linktext = links[i].lastChild.nodeValue.toLowerCase(); // 获得a元素的文本子节点(即导航栏上显示的文本)的小写形式
            document.body.setAttribute('id', linktext); // 将当前网页的id属性设置为linktext
            break; // 不用再处理后面的a元素
        }
    }
}

function moveElement(elementID, final_x, final_y, interval) {
    // 在浏览器内容窗口中移动id为elementID的元素到位置final_x和final_y，刷新间隔为interval
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID); // 获得需要移动的元素
    if(elem.movement) { // 如果元素elem有属性movement，则
        clearTimeout(elem.movement); // 取消数字movement代表的由setTimeout()方法产生的延时调用
    }
    // 如果该元素没有默认初始位置，则设置该元素的初始位置为相对于父元素的左上角
    if(!elem.style.left) {
        elem.style.left = '0px';
    }
    if(!elem.style.top) {
        elem.style.top = '0px';
    }
    // 获得元素的初始位置
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    // 如果到达目标位置则返回true
    if(xpos == final_x && ypos == final_y) {
        return true;
    }
    // 移动x和y,每次移动的距离为当前位置到目标位置的十分之一
    if(xpos < final_x) { // 移动x
        var dist = Math.ceil((final_x - xpos) / 10);
        xpos += dist;
    } else {
        var dist = Math.ceil((xpos - final_x) / 10);
        xpos -= dist;
    }
    if(ypos < final_y) { // 移动y
        var dist = Math.ceil((final_y - ypos) / 10);
        xpos += dist;
    } else {
        var dist = Math.ceil((ypos - final_y) / 10);
        ypos -= dist;
    }
    // 需要为left和top属性加上单位px(像素)
    elem.style.left = xpos + 'px';
    elem.style.top = ypos + 'px';
    // 以interval为间隔延时调用函数moveElement()
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval); // 保存代表该延时调用的数字
}

function prepareSlideshow() {
    // 滑动显示动画