DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript通過元素id和name直接取得元素的方法
javascript通過元素id和name直接取得元素的方法
編輯:關於JavaScript     

本文實例講述了javascript通過元素id和name直接取得元素的方法。分享給大家供大家參考。具體分析如下:

我們知道一些第三方的js庫對如何快速選取html中的元素做了一些簡化,貌似十分高深莫測,其實也不然。而且js本身自帶了對於特殊元素的簡便選取的方法,下面就為大家簡單介紹下。

在html中,一般最直接的辨別html元素使用的是name和id屬性,兩者有著細微的不同:id必須頁面唯一,但name可以有重復。

在js中如果id名稱不和內置屬性或全局變量重名的話,該名稱自動成為window對象的屬性,而在一個html頁面中的最頂層環境中有:

this === window

所以如果我們寫一個如下的html元素代碼就可以這樣引用它:

<input type="button" id="btn_ok" value="Ok" onclick="..." />
//可以這樣引用
btn_ok.onclick = function(){};
//或者下面也是一樣的
window.btn_ok.style = ...;

對於name屬性來說,只有某些類型的html元素具有類似的方法,比如:form,img,iframe,applet,embed,object等。在這些元素中可以通過全局變量或者document的屬性來訪問特定name屬性的元素;如果相同name屬性的有多個元素,則返回一個NodeList的類似只讀數組的對象,例如如下代碼:

<div>
  <img name="pic" src="#" alt="pic_0" />
  <img name="pic" src="#" alt="pic_1" />
  <img name="pic" src="#" alt="pic_2" />
</div>
//我們可以這樣引用name為pic的元素:
for(x in pic)
 console.log(pic[x].alt);
//或者是非"標准"語法each語句方式
for each(img in pic)
 console.log(img.alt);

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved