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 src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" alt="pic_0" />
  <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" alt="pic_1" />
  <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" 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程式設計有所幫助。