javascript通過元素id和name直接取得元素的方法

更新時間：2015年04月28日 12:18:32 作者：大熊貓侯佩

這篇文章主要介紹了javascript通過元素id和name直接取得元素的方法,涉及javascript獲取元素的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下

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

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

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

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

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的類似只讀數(shù)組的對象,例如如下代碼:

<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程序設計有所幫助。

您可能感興趣的文章:

相關(guān)文章

原生javascript制作貪吃蛇小游戲的方法分析
這篇文章主要介紹了原生javascript制作貪吃蛇小游戲的方法,結(jié)合具體實例形式分析了JavaScript實現(xiàn)貪吃蛇小游戲的具體步驟、功能實現(xiàn)、數(shù)值運算等相關(guān)操作技巧,需要的朋友可以參考下
2020-02-02
原生JS實現(xiàn)呼吸輪播圖
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
獲得Javascript對象屬性個數(shù)的示例代碼
這篇文章主要是對獲得Javascript對象屬性個數(shù)的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
javascript實現(xiàn)選中復選框后相關(guān)輸入框變灰不可用的方法
這篇文章主要介紹了javascript實現(xiàn)選中復選框后相關(guān)輸入框變灰不可用的方法,涉及javascript針對頁面元素屬性的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
javascript中普通函數(shù)的使用介紹
本文為大家介紹下javascript中普通函數(shù)的使用，下面有個不錯的示例，感興趣的朋友可以參考下
2013-12-12
Google Map Api和GOOGLE Search Api整合實現(xiàn)代碼
將GOOGLE MAP API 和 GOOGLE Search API 進行整合，我用面向?qū)ο蟮姆绞綄懥艘粋€類，通過傳一個經(jīng)緯度進去，自動通過GOOGLE LOCAL SEARCH獲取附近的相關(guān)信息。比如餐廳、景點等，反過來標到地圖上，并可在任意容器內(nèi)顯示。
2009-07-07
Web打印解決方案之普通報表打印功能
這篇文章主要介紹了Web打印解決方案之普通報表打印功能的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-08-08
每天一篇javascript學習小結(jié)（Array數(shù)組）
這篇文章主要介紹了javascript中的Array數(shù)組知識點，對數(shù)組的基本使用方法，以及各種方法進行整理，感興趣的小伙伴們可以參考一下
2015-11-11
對于Form表單reset方法的新認識
HTML中Form表單的reset方法被用來清空用戶所輸入的內(nèi)容，以前一直誤以為其是單純的將input等輸入項中的值清空
2014-03-03
Ajax基礎知識詳解
本文主要介紹了Ajax基礎知識。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02