依 className 獲取文件中的元素

  • Posted by Beata on 十二月 1st, 2005 filed in javascript

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

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

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

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

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

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

javascript · [高亮] · [原始]

  1. function getElementsByClassName(n) {
  2.     var el = [],
  3.         _el = document.getElementsByTagName(‘*’);
  4.     for (var i=0; i<_el.length; i++ ) {
  5.         if (_el[i].className == n ) {
  6.             el[el.length] = _el[i];
  7.         }
  8.     }
  9.     return el;
  10. }
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;
}

[高亮] · [原始] · javascript

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

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

javascript · [高亮] · [原始]

  1. var classBlack = getElementsByClassName(‘black’);
  2. for (var i=0; i<classBlack.length; i++) {
  3.     classBlack[i].className = ‘red’;
  4. }
var classBlack = getElementsByClassName(\'black\');
for (var i=0; i<classBlack.length; i++) {
	classBlack[i].className = \'red\';
}

[高亮] · [原始] · javascript


4 Responses to “依 className 獲取文件中的元素”

  1. steven Says:
    十二月 3rd, 2005 at 11:15 下午

    喵站長：
    你已經逐漸從網頁設計的路走向程式設計了。
    你是個理性大於感性的人，還是正好相反？如果是前者，那麼就順著這個方向，朝程式設計的目標邁進吧。
    我是因為受不了整天要坐著，還有受不了一些白癡亂開規格，才不寫程式的。現在是一個系統小工友喔！嘻嘻。
    (學舞蹈的人怎麼會想到玩程式設計？真是怪了。)

  2. Beata Says:
    十二月 5th, 2005 at 12:57 上午

    :P
    網頁設計中，JS可是不可或缺的元素呢！
    在以前或許有許多人會對這個觀念叱之以鼻，包括我自己，但隨著 web2.0 理念逐漸擴散開來，我才回頭注意JS這小玩意兒，可不是從前我所想像的那麼單純。

    至於我是理性或感性？

    坐在電腦之前我是理性的，其餘時間皆交由感性神經去主導。
    與網頁之間的起源也是感性神經氾濫之下的產物-因為想有個羙美的網站，又不青睞網路上所提供的免費服務，於是就步上了這條不歸路。
    簡言之，大概是個除了電腦之外生活卻亂七八糟的人吧！

    學舞蹈的人怎麼會想到玩程式設計？真是怪了。

    這要解說就又更複雜了!
    我本身是學商業類的國際貿易，對舞蹈有興趣而跑去跳舞，休閒時間就是作網頁，後來舞沒跳了、網頁又學得差不多就開始接觸網站應用程式設計（僅限於網站應用程式設計，系統應用程式卻一無所知）

    對於網頁的學習完全是憑著興趣兩個子。好吧！再加上個無聊。
    男友是職業軍人的關係常常一出任物就在海上不見了，我在家也沒什麼事做，剛好畢生最愛就是拼圖，小時候拼圖片拼圖，從前拼網頁拼圖，長大拼程式拼圖。
    最近的學習計劃是 JS.PHP.AS
    或許以後還會加上更多XD

    steven 你是系統小工友阿！
    雖然不知道是蝦密系統但感覺很厲害的樣子！
    對我而言應該算是陌生的領域吧！

  3. 馬克 Says:
    七月 20th, 2006 at 6:34 下午

    嗯…不簡單的喵:南瓜頭:

  4. 果果 Says:
    三月 31st, 2008 at 10:32 下午

    好像被过滤了一点代码.不过应该能看懂的吧　：）

    谢谢你的代码.

Leave a Comment