javascript通過(guò)元素id和name直接取得元素的方法

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

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

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

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

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

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

this === window

所以如果我們寫一個(gè)如下的html元素代碼就可以這樣引用它：

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

對(duì)于name屬性來(lái)說(shuō)，只有某些類型的html元素具有類似的方法，比如：form,img,iframe,applet,embed,object等。在這些元素中可以通過(guò)全局變量或者document的屬性來(lái)訪問(wèn)特定name屬性的元素；如果相同name屬性的有多個(gè)元素，則返回一個(gè)NodeList的類似只讀數(shù)組的對(duì)象,例如如下代碼:

<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);
//或者是非"標(biāo)準(zhǔn)"語(yǔ)法each語(yǔ)句方式
for each(img in pic)
 console.log(img.alt);

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Javascript數(shù)組及類數(shù)組相關(guān)原理詳解
這篇文章主要介紹了Javascript數(shù)組及類數(shù)組相關(guān)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
換膚測(cè)試程序js腳本
換膚測(cè)試程序js腳本...
2007-01-01
微信小程序?qū)崿F(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
JavaScript雙問(wèn)號(hào)(??)操作符用法詳解
在現(xiàn)代JavaScript開(kāi)發(fā)中,處理變量默認(rèn)值是一個(gè)常見(jiàn)但容易引發(fā)bug的操作,很多開(kāi)發(fā)者可能都遇到過(guò)這樣的問(wèn)題：使用||設(shè)置默認(rèn)值時(shí),意外覆蓋了0、''等合法值,這時(shí)候,ES2020引入的雙問(wèn)號(hào)操作符（??）就能完美解決這類問(wèn)題,本文將帶您全面掌握這個(gè)操作符的使用場(chǎng)景和高級(jí)技巧
2025-04-04
探討：JavaScript ECAMScript5 新特性之get/set訪問(wèn)器
這篇文章主要介紹了探討：JavaScript ECAMScript5 新特性之get/set訪問(wèn)器的相關(guān)資料,需要的朋友可以參考下
2016-05-05
JS在TextArea光標(biāo)位置插入文字并實(shí)現(xiàn)移動(dòng)光標(biāo)到文字末尾
JS在TextArea光標(biāo)位置插入文字+移動(dòng)光標(biāo)到文字末尾，F(xiàn)irefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd屬性，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-06-06
JavaScript單一職責(zé)原則深入分析
這篇文章主要介紹了理解JavaScript單一職責(zé)原則，單一職責(zé)原則（SRP：Single?responsibility?principle）又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則（SOLID）之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下
2022-08-08
egg.js的基本使用實(shí)例
本文主要介紹了egg.js的基本使用實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
淺談javascript函數(shù)式編程
你是否知道JavaScript其實(shí)也是一個(gè)函數(shù)式編程語(yǔ)言呢？本文將教你如何利用JavaScript的函數(shù)式特性。
2015-09-09
javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
for循環(huán)是非?；A(chǔ)的javascript知識(shí)，但由于JS太靈活了，所以可能出現(xiàn)一些讓初學(xué)者崩潰的寫法。我決定由淺入深的解釋一下for循環(huán)，算是給比我還新手的新手解惑吧，少走彎路
2012-08-08