JavaScript DOM编程艺术中的技巧代码

1、将多个JS函数绑定在onload事件处理函数上，每个事件处理函数只能绑定一条指令。

function addLoadEvent(func){
var oldonload = window.onload;//将现有的window.onload事件处理函数的值存入变量
if(typeof window.onload !='function'){//如果在该处理函数上未绑定任何函数，就像平时那样把新函数添加给它
window.onload = func;
  }else{
window.onload = function(){//如果该处理函数上已绑定了函数，则将新函数追加到现有指令的末尾。
oldonload();
      func();
    }
  }
}

相当于把页面加载完毕时执行的函数创建为一个队列，当需要加入新函数时写出 addLoadEvent（firstFunction）。

2、动态方式创建HTML内容

         浏览器看来，DOM节点树才是文档，浏览器实际显示的就是DOM树。当以动态方式创建HTML内容时，实际是在改变DOM节点树。若在节点树上添加内容，必须插入新的节点，若把HTML内容添加到文档里，就必须在相应的DOM节点树上插入元素节点。

向后插入新元素：（DOM中有像前插入insertBefore，无向后插入的直接指令）

function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
  } else {
parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

3、动态地收集和/或创建一些有用的辅助信息，并动态地呈现在网页上：

（1）把隐藏在属性里的信息检索出来；

常用方法：getElementById();

                    getElementsByTagName();

                    getAttribute();

（2）把这些信息动态地创建为一些HTML内容；

（3）把这些HTML内容插入到文档里。

常用方法：createElement()；

                    createTextNode();

                    appendChild();

                    insertBefore();

                    setAttribute();

编写DM脚本时，想当然地认为某个节点是一个元素节点是一种常见的错误。如果没有百分百把握，就一定要检查nodeType属性值。有些DOM方法只能用于元素节点；如果用在文本节点身上，会产生一个错误。

var quoteChildren = quotes[i].getElementsByTagName("*");
var elem = quoteChildren[quoteChildren.length-1];

    把通配符*作为参数传递给getElementByTagName()方法，它就会把所有的元素不管具体HTML标记是什么返回。

      上面例子中，blockquote元素包含最后一个元素节点对应着quoteElements数组中的最后一个元素。数组中的最后一个元素的下标等于数组的长度减去1.

       重要的一点：JS脚本应该是用来充实文档内容，要避免使用DOM技术来直接插入核心内容。

4、获取“下一个元素节点“

   

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

5、利用className属性设置或添加css效果

先在css文件中添加声明，例如：

.odd {
    background-color：#ffc；
}

然后在JS中创建函数addClass（）函数：

function addClass(element,value){
if(!element.className){
    element.className = value;//如果className为NULL则直接进行设置
  }else {
newClassName = element.className;//否则进行添加效果
newClassName += "";//注意中间要有空格
newClassName += value;
    element.className = newClassName;
  }

}

6、在编写用来检查表单数据的JS脚本时，必须注意：

       糟糕的表单检查还不如根本没有检查；

       不要完全依赖JS，它代替不了服务器端的数据合法性检查，如果已经用JS对表单数据进行检查，绝不意味着在那些数据到达服务器时用不着再对它们进行检查。