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对表单数据进行检查,绝不意味着在那些数据到达服务器时用不着再对它们进行检查。

你可能感兴趣的:(学习笔记)