javascript通过className獲取文件元素

From: http://blog.csdn.net/xpnew/archive/2007/09/29/1806714.aspx

<script type="text/javascript">function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>

在 JavaScript 內建的核心中，document 物件及 Element 物件總共可以透過三個方式來獲取其下的元素，分別是:

getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')

這些方法就跟它們的名字一樣，分別是依照 id, name, tag 來獲取元素。

因在同一份文件中，id 是具有唯一性的，所以 getElementById(id) 的回傳值是單一物件可以直接使用；而其他則會傳回一個依照具有該屬性的元素在文件中出現順序排列的陣列，使用時必須指定陣列編號，如: array[0] 代表第一個元素。

可是在設計網頁時，最常常需要使用到的 class 卻沒有相對應的方法可以去獲取 className 相同的元素。

沒有沒關係，我們自己寫一個，而且代碼非常簡短只有下面幾句。

function getElementsByClassName(n) {
    var el = [] ,
        _el = document.getElementsByTagName('*') ;
    for (var i=0; i<_el.length; i++ ) {
        if (_el[i].className == n ) {
            el[el.length] = _el[i] ;
        }
    }
    return el ;
}

上面這段代碼將會傳回一個元素陣列，這些元素的共通點就是它們的 class 名稱都一樣。

下面這段代碼是 getElementsByClassName(’className’) 眾多應用的其中一種，可以將文件中所有 className 為 ‘black’ 的元素的 className 改為 ‘red’。

var classBlack = getElementsByClassName('black') ;
for (var i=0; i<classBlack.length; i++) {
    classBlack[i].className = 'red' ;
}