JavaScript DOM

原生javascript替代jQuery选择器写法：http://caibaojian.com/toutiao/5264?wb

为了达到平稳退化，向后兼容，标记分离的思想，每次写js代码时做的第一件事应该是必要的测试和检查工作：
在js文件里首先添加以下代码进行检查：
window.onload = function(){
if(!document.getElementsByTagName)   return false;
if(!document.getElementById)  return false;
if(!document.getElementsByClassName)   return false;
if(!document.getElementById("selector"))   return false;
if(!document.getElementsByTagName("tag"))   return false;
if(!document.getElementsByClassName("selector"))   return false;
};
通用封装函数：
var $ = function(id){
      return typeOf id=="string"?document.getElementById(id):id;
}
var EventUtil = {
addHandler: function(element, type, handler) { // 该方法接受3个参数：要操作的元素，事件名称和事件处理程序函数 
　　if (element.addEventListener) { //检查传入的元素是否存在DOM2级方法 
　　　　element.addEventListener(type, handler, false); // 若存在，则使用该方法 
　　} else if (element.addEvent) { // 如果存在的是IE的方法 
　　　　element.attachEvent("on" + type, handler); //则使用IE的方法，注意，这里的事件类型必须加上"on"前缀。 
　　} else { // 最后一种可能是使用DOM0级 
　　　　element["on" + type] = hander;
　　}
},

removeHandler: function(element, type, handler) { // 该方法是删除之前添加的事件处理程序 
  　 if (element.removeEventListener) { //检查传入的元素是否存在DOM2级方法 
        　element.removeEventListener(type, handler, false); // 若存在，则使用该方法 
   　} else if (element.detachEvent) { // 如果存在的是IE的方法 
      　 element.detachEvent("on" + type, handler); //则使用IE的方法，注意，这里的事件类型必须加上"on"前缀。 
   　} else { // 最后一种可能是使用DOM0及方法(在现代浏览器中，应该不会执行这里的代码) 
        element["on" + type] = null;
   　}
   }
};
//调用方式：
var btn =document.getElementById("btn"); 
var hander= function(){ 
      alert("clicked"); 
}; 
EventUtil.addHandler(btn,"click",hander); 
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件处理程序

 
对于很多函数需要页面加载即运行，window.onload封装方法如下： 
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != "function"){
		window.onload = func;
	}
	else{
		window.onload = function(){
			oldonload();
			func();
		}
   	}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

//浏览器可视区域窗口大小，兼容不同浏览器
var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;

//整体文档窗口大小，兼容不同浏览器
var w=document.documentElement.scrollWidth || document.body.scrollWidth;
var h=document.documentElement.scrollHeight || document.body.scrollHeight;

13、//因为elemet.style只能获取内联样式，而element.currentStyle.width是IE浏览器专有属性，getComputedStyle(element, null).width是火狐和Chrome浏览器的特有属性，所以为了兼容，获取内外样式方法如下(不可取复合样式，如background，border，而是应该写成backgroundColor，borderWidth)：
function getStyle(obj,name) {
     if(obj.currentStyle) {
          return obj.currentStyle[name];
     }
     else
     {
          return getComputedStyle(obj,null)[name];
     }
}

14、function getClass(parent, className) {   //第一个参数表示是className是所属那个dom标签下,这样为了提高检索效率

　　//如果是火狐则调用火狐的getElementsByClassName 内置函数
　　if (document.getElementsByClassName) {
　　　　return document.getElementsByClassName(className);
　　}
　　else {
　　　　var nodes = parent.getElementsByTagName("*"),
　　　　ret = [];  //创建一个数组，用于存储类为className的元素
　　　　for (i = 0; i < nodes.length; i++) {  //遍历子集，判断类名，压入数组
　　　　　　if (nodes[i].className === className)) { 
　　　　　　　　ret.push(nodes[i]);
　　　　　　}
　　　　}
　　　　return ret;
　　}
}

15、//js中空格也作为一个文本节点，此函数是为了删除空格准确寻找子节点
function cleanWhitespace(element){ 
  for(var i=0; i
   apple

function getValue(obj){  
   var text = obj.children[0].innerHTML;
   alert(text);
}

我们希望获得的text属性值为“apple”，但实际上的值是undefined，也就是说获取失败。

原因：childNodes属性返回值包含了元素节点和文本节点，此例中obj.children[0]返回的实际是空格。

解决方案：
1）去掉和之间的空格。

2）改用obj.children[0].innerHTML。children属性只返回元素节点。

18.//寻找下一个元素节点，而不是下一个节点,兼容不同浏览器
function getNextElement(node){   
  if(node.nodeType == 1)
  {
    return node;
  }
  if(node.nextSibling)
  {
    return getNextElement(node.nextSibling);
  }
  return null;
}

21.//在for循环中的不正确函数调用
var li = document.getElementsByTagName("li");
var n = li.length;
for (var i=0;i 0) { //当滑轮向上滚动时  
            alert("滑轮向上滚动");  
        }  
        if (e.wheelDelta < 0) { //当滑轮向下滚动时  
            alert("滑轮向下滚动");  
        }  
    } else if (e.detail) {  //Firefox滑轮事件  
        if (e.detail> 0) { //当滑轮向上滚动时  
            alert("滑轮向上滚动");  
        }  
        if (e.detail< 0) { //当滑轮向下滚动时  
            alert("滑轮向下滚动");  
        }  
    }  
};  
//给页面绑定滑轮滚动事件  
if (document.addEventListener) {//firefox  
    document.addEventListener('DOMMouseScroll', wheel, false);  
}  
//滚动滑轮触发scrollFunc方法  //ie 谷歌  
window.onmousewheel = document.onmousewheel = wheel;

26.用Array.prototype.join代替原有的基本的字符连接的写法：
var items = [];  
ajaxResult.items.forEach(function(item) {  
    // 构建字符串  
    items.push('
', item.text, '
');  
});  

// 通过innerHTML设置列表内容  
document.querySelector('ul').innerHTML = items.join('');