JavaScript:Dom

浏览数：24 / 时间：2015年06月09日

概念：

parentElement 获取对象层次中的父对象。
parentNode 获取文档层次中的父对象。
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
children 获取作为对象直接后代的 DHTML 对象的集合。

parentNode和parentElement功能一样，childNodes和children功能一样。

但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持

/*
 * 根据元素clsssName得到元素集合
 * @param fatherId 父元素的ID，默认为document
 * @tagName 子元素的标签名
 * @className 用空格分开的className字符串
 */
function getElementsByClassName(fatherId,tagName,className){
    node = fatherId&&document.getElementById(fatherId) || document;
    tagName = tagName || "*";
    className = className.split(" ");
    var classNameLength = className.length;
    for(var i=0,j=classNameLength;i<j;i++){
        //创建匹配类名的正则
        className[i]= new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)"); 
    }
    var elements = node.getElementsByTagName(tagName);
    var result = [];
    for(var i=0,j=elements.length,k=0;i<j;i++){//缓存length属性
        var element = elements[i];
        while(className[k++].test(element.className)){//优化循环
            if(k === classNameLength){
                result[result.length] = element;
                break;
            }    
        }
        k = 0;
    }
    return result;
}

<div id="container">
      <span class="aaa zzz ccc"></span>
      <div class="aaa bbb ccc"></div>
</div>
<div class="aaa bbb ccc"></div>

window.onload = function(){
    alert(getElementsByClassName(document,"div","aaa ccc").length);//2
    alert(getElementsByClassName("container","div","aaa ccc").length);//1
    alert(getElementsByClassName("container","span","aaa zzz").length);//1
}