javascript經過className獲取文件元素

在 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'; }