JavaScript DOM编程艺术读书笔记及实用方法和函数总结

1 常用DOM方法：

document.getElementById（id）                    由id属性值得到某个元素节点对象

 

document.getElementsByTagName（tagname）      由节点/标签名得到所有该节点对象的数组

 

object.getAttribute（attribute）                               得到元素节点对象的属性值

 

object.setAttibute(attribute,value)                           设置元素节点对象的属性值

 

node.parentNode  得到父节点

 

node.nextSibling    得到下一个兄弟节点

 

element.childNodes    得到一个数组，包含给定元素节点的全体子元素。包括元素节点，属性节点，和文本节点

 

node.nodeType    元素节点返回1，属性节点返回2，文本节点返回3

 

node.nodeValue    检索节点的值。

 

node.firstChild  相当于node.childNodes[0] ，得到节点的第一个子节点

 

node.lastChild  相当于node.childNodes[node.childNodes.length-1],节点的最后一个子节点

 

document.write()    把字符串插入到文档中

 

object.innerHTML    用来读写某给定元素里的HTML内容。不属于W3C DOM标准组成部分。

 

document.createElement(nodeName)    创建一个节点

 

document.createTextNode(text)    创建一个文本节点

 

parentNode.appendChild(child)    为一个元素节点添加子节点

 

2 自定义工具函数：

1）insertBefore/insertAfter

DOM提供了名为insertBefore方法，这个方法将一个新元素插入到一个现有元素的前面。

调用语法：parentElement.insertBefore(newElement,targetElement)

不必知道那个父元素到底是哪个，因为targetElement的parentNode属性值就是。所以可这样调用：

targetElement.parentNode.insertBefore(newElement,targetElement)

既然有一个insertBefore方法，就应该有一个insertAfter方法。但DOM没有提供这样的方法。

insertAfter函数实现（取自<<JavaScript DOM编程艺术>>）

function insertAfter(newElement,targetElement) {

var parent = targetElement.parentNode;

if(parent.lastChild == targetElement) {

parent.appendChild(newElement);

} else {

parent.insertBefore(newElement,targetElement.nextSibling);

}

}

 

2）addLoadEvent(func)页面加载完毕时执行多个初始化函数

当需要在页面加载完毕时执行多个函数时，这个函数将简化代码。(摘自《JavaScript DOM编程艺术》)

function addLoadEvent(func) {

var oldonload = window.onload;

if(typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

oldonload();

func();

}

}

}

 

3）得到某个节点的下一个元素节点（注意是元素节点）

 

function getNextElement(node) {

    if(node.nodeType == 1) {

        return node;

    }

    if(node.nextSibling) {

        return getNextElement(node.nextSibling);

    }

    return null;

}

 

 

4） 为某个元素添加CSS属性（是添加，不是替换）

function addClass(element,value) {

    if(!element.className) {

        element.className = value;

    } else {

        newClassName = element.className;

        newClassName += " ";

        newClassName += value;

        element.className = newClassName;

    }

}

 

5）JS实现表格隔行变色

function stripeTables() {

    if(!document.getElementsByTagName) return false;

    var tables  = document.getElementsByTagName("table");

    for(var i = 0; i <  tables.length; i++) {

        var odd = false;

        var rows = tables[i].getElementsByTagName("tr");

        for(var j = 0; j < rows.length; j++) {

            if(odd == true) {

                addClass(rows[j],"className");

                odd = false;

            } else {

                odd = true;

            }

        }   

    }   

}

 

6)通用移动一个元素的函数（可以实现动画）

 

function moveElement(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) {

        clearTimeout(elem.movement);

    }    

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

    if(xpos == final_x && ypos == final_y) {

        return true;

    }

    if(xpos < final_x) {

        var dist = Math.ceil((final - xpos)/10);

        xpos = xpos + dist;

    }

    if(xpos > final_x) {

        var dist = Math.ceil((xpos - final)/10)

        xpos = xpos - dist;

    }

    if(ypos < final_y) {

        var dist = Math.ceil((final_y - ypos)/10);

        ypos = ypos + dist;

    }

    if(ypos > final_y) {

        var dist = Math.ceil((ypos - final_y)/10);

        ypos = ypos - dist;

    }

    elem.style.left = xpos;

    elem.style.top = ypos;

    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

    elem.movement = setTimeout(repeat,interval);

}