JS批量獲取class命名節點 getElementsByClassName()

JS批量獲取class命名節點 getElementsByClassName()
getElementsByClassName() 是一個老的方法了，將其優化整理后給大家提供。

代碼如下：

// 批量獲取class命名節點
function getElementsByClassName(className, tag, parent){
var parent = parent || document;
var tag = tag||"*";
if(!(parent = F$(parent))){return false;}
// 查找所有匹配標簽
var allTags = (tag == "*" && parent.all) ? parent.all : F$$(tag, parent);
var classElements = [];

// 創建一個正則表達是來判斷className的正確性
className = className.replace(/-/g, "-");
var regex = new RegExp("(^|s)" + className + "(s|$)");
var elenemt;
// 檢查每個元素
for(var i=0; i<allTags.length; i++){
elem = allTags[i];
if(regex.test(elem.className)){
classElements.push(elem);
}
}
return classElements;
};

getElementsByClassName(className, tag, parent)接受三個參數：

className：要獲取節點的class名稱

tag：命名class的標簽 可選項 默認表示“*”所有標簽

parent：父節點之下的所有內容，也就是獲取的范圍，可選項 默認表示"document"

實例：

HTML:

<p class="main" id="main">
<a href="#" class="my">這是鏈接</a>
<span class="my">1</span>
<span id="sss">2</span>
<span class="my ttt">3</span>
<span>4</span>
</p>

執行：getElementsByClassName("my", "span", document.getElementById("main"));

或得到的將是包含 SPAN1、SPAN3 兩個個節點的數組 『其中不包含A標簽這個節點，因為參數中指定必須是span才提取』。

還有如下實例：

getElementsByClassName("my") // 獲取文檔中所有.my 節點

getElementsByClassName("my", "span") // 獲取文檔下以.my命名的span節點

getElementsByClassName("my", "*", document.getElementById("main")) // 獲取#main下的所有.my命名節點。