快捷導(dǎo)航

js中通過(guò)getElementsByName訪問(wèn)name集合對(duì)象的方法

更新時(shí)間：2016年10月31日 13:08:57 投稿：jingxian

下面小編就為大家?guī)?lái)一篇js中通過(guò)getElementsByName訪問(wèn)name集合對(duì)象的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1、查找給定name屬性的所有元素，這個(gè)方法將返回一個(gè)節(jié)點(diǎn)集合，也可以稱為對(duì)象集合。

2、這個(gè)集合可以作為數(shù)組來(lái)對(duì)待，length屬性的值表示集合的個(gè)數(shù)。

3、因?yàn)樵趆tml頁(yè)面中，name不能唯一確定一個(gè)元素，所以方法的名稱為getElementsByName而不是getElementByName

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無(wú)標(biāo)題文檔</title>
</head>

<body>
	<p>
		<input type="text" name="luck" value="我中獎(jiǎng)了，中了一個(gè)億" onclick="aa()" id="luck1" />
	</p>
	<p>
		<input type="text" name="luck" value="我交了女朋友" id="luck2" />
	</p>
	<p>
		<input type="text" name="luck" value="我升遷了" id="luck3" />
	</p>
	<p>
		<input type="text" name="luck" value="我買房了" id="luck4" />
	</p>
	
	<script>
		/*
		1、獲取每一個(gè)文本框的值
		2、獲取每一個(gè)文本框的類型
		3、為每一個(gè)文本框增加點(diǎn)擊事件
		*/
		
		/*
			第一步 獲取name屬性為luck值得對(duì)象數(shù)組(節(jié)點(diǎn)數(shù)組)
		*/
		var luckElements = document.getElementsByName("luck");
		
		/*
			第二步 遍歷節(jié)點(diǎn)數(shù)組
		*/
		for(var i=0;i<luckElements.length;i++){
			//獲取元素的value值
			alert(luckElements[i].value);
			//獲取元素的type值
			alert(luckElements[i].type);
			//為每一個(gè)元素的onclick屬性賦值即為文本框增加點(diǎn)擊事件
			luckElements[i].onclick=function(){
				alert(this.value);
			}
		}
	</script>
</body>
</html>

3、因?yàn)樵趆tml頁(yè)面中，name不能唯一確定一個(gè)元素，所以方法的名稱為getElementsByName而不是getElementByName

以上就是小編為大家?guī)?lái)的JavaScript中通過(guò)getElementsByName訪問(wèn)name集合對(duì)象的方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

基于BootStarp的Dailog
這篇文章主要介紹了基于BootStarp的Dailog 的相關(guān)資料,需要的朋友可以參考下
2016-04-04
JavaScript 對(duì)象合并的幾種方法小結(jié)
本文主要介紹了JavaScript 對(duì)象合并的幾種方法小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
基于JS制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖
本文將利用JS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖，這個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖能根據(jù)城市名進(jìn)行位置查詢。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2022-05-05
layer.js之回調(diào)銷毀對(duì)話框的例子
今天小編就為大家分享一篇layer.js之回調(diào)銷毀對(duì)話框的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
Javascript通過(guò)overflow控制列表閉合與展開(kāi)的方法
這篇文章主要介紹了Javascript通過(guò)overflow控制列表閉合與展開(kāi)的方法,設(shè)計(jì)javascript動(dòng)態(tài)操作頁(yè)面元素與樣式的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
用JS制作可交互的視頻進(jìn)度條的案例分享
這篇文章主要介紹了用JS制作可交互的視頻進(jìn)度條的案例,在開(kāi)始制作視頻進(jìn)度條之前,想先給大家補(bǔ)充一些關(guān)于元素的一些特點(diǎn)和用法,為大家更好地理解接下來(lái)的分享,感興趣的朋友可以參考下
2024-04-04
js 方法實(shí)現(xiàn)返回多個(gè)數(shù)據(jù)的代碼
2009-04-04
javascript如何動(dòng)態(tài)加載表格與動(dòng)態(tài)添加表格行
在某些時(shí)候需要?jiǎng)討B(tài)加載表格與動(dòng)態(tài)添加表格行，在接下來(lái)的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯(cuò)過(guò)
2013-11-11
IE,firefox(火狐)瀏覽器無(wú)提示關(guān)閉窗口js實(shí)現(xiàn)代碼小結(jié)
在不是js打開(kāi)的頁(yè)面上按window.close()，會(huì)有提示框，很煩，現(xiàn)在可以不用了，沒(méi)有提示框直接關(guān)閉窗口。下面腳本之家編輯特為大家整理了一些。
2009-09-09
微信小程序接入vant Weapp組件的詳細(xì)步驟
這篇文章主要介紹了微信小程序接入vant Weapp組件的詳細(xì)步驟,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10