主頁 > 知識庫 > HTML元素的ID和Name屬性的區(qū)別

HTML元素的ID和Name屬性的區(qū)別

熱門標(biāo)簽:南寧銷售外呼系統(tǒng)線路商 天津銷售電銷機器人公司 400電話申請好不好 縣域地圖標(biāo)注點 電銷機器人外呼失敗怎么回事 齊齊哈爾地圖標(biāo)注地點 400電話座機怎么辦理 吃雞地圖標(biāo)注設(shè)置 邵陽市地圖標(biāo)注app
今天對 <a href="#13"></a> 有點疑惑, 加上#表示一個錨,後面跟上13,就會跳到本頁面的13的位置,而這個13就是 Name屬性值。怎麼不
是ID值呢???所以查了下ID 和Name的區(qū)別,特記錄

最classical的答案:ID就像是一個人的身份證號碼,而Name就像是他的名字,ID顯然是唯一的,而Name是可以重復(fù)的。
顯然這個ID和Name的解答說的太籠統(tǒng)了,當(dāng)然那個解釋對于ID來說是完全對的,它就是Client端HTML元素的Identity。而Name其實要復(fù)雜的多,因為Name有很多種的用途,所以它并不能完全由ID來代替,從而將其取消掉。具體用途有:
用途1: 作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示,比如input、select、textarea、和button等。我們可以在服務(wù)器端根據(jù)其Name通過Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分組,我們知道radio button控件在同一個分組類,check操作是mutex的,同一時間只能選中一個radio,這個分組就是根據(jù)相同的Name屬性來實現(xiàn)的。
用途3: 建立頁面中的錨點,我們知道<a href="URL">link</a>是獲得一個頁面超級鏈接,如果不用href屬性,而改用Name,如:<a name="PageBottom"></a>,我們就獲得了一個頁面錨點。
用途4: 作為對象的Identity,如Applet、Object、Embed等元素。比如在Applet對象實例中,我們將使用其Name來引用該對象。
用途5: 在IMG元素和MAP元素之間關(guān)聯(lián)的時候,如果要定義IMG的熱點區(qū)域,需要使用其屬性usemap,使usemap="#name"(被關(guān)聯(lián)的MAP
元素的Name)。
用途6: 某些特定元素的屬性,如attribute,meta和param。例如為Object定義參數(shù)<PARAM NAME = "appletParameter" VALUE = "value">或Meta中< META NAME = "Author" CONTENT = "Dave Raggett">。
顯然這些用途都不是能簡單的使用ID來代替掉的,所以HTML元素的ID和Name的卻別并不是身份證號碼和姓名這樣的區(qū)別,它們更本就是不同作
用的東西。
我們可以通過一段代碼來分析一下其中的微妙差別:

復(fù)制代碼
代碼如下:

<form method="post" action="" name="demoform">
<input type="text" name="oDemo" id=”oDemo2” value="DEMO" />
</form>

在IE瀏覽器里,我們可以通過多少方法來索引到這個文本框?qū)ο螅?為區(qū)別起見,我們把NAME和ID設(shè)成了不同的值)
1. oDemo
2. demoform.oDemo
3. document.all.oDemo
4. document.all.demoform.oDemo
5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0]
8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')

以上9種索引方法在IE6里面全部通過返回值測試,不過值得注意的是最后一種:在IE6里,我把索引對象寫成document.getElementById('oDemo'),瀏覽器也能正確索引到對象,真是可怕的容錯性?。?!
接著問題來了,我們把這段代碼放在Mozilla Firefox 1.0里再執(zhí)行一次,只有第7種方法返回“undefined”,其他的方法可以正確索引到對象,不過由于第3、4種方法用到了document.all這個IE專有對象,F(xiàn)F1.0雖然返回了正確的值,不過卻在控制臺里發(fā)出了警告:警告:非標(biāo)準(zhǔn)的屬性 document.all。請使用 W3C 的標(biāo)準(zhǔn)形式 document.getElementById()

接下來我們把HTML文本類型定義得嚴(yán)格一點,在源代碼開頭加上:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">使HTML文本按照HTML4.01標(biāo)準(zhǔn)去解析,在IE6里照樣全部通過返回值測試,不過在Mozilla Firefox 1.0里麻煩就大了,第3、4種方法沒有任何的返回值,而在控制臺里發(fā)出了報錯信息:錯誤: document.all has no properties ,而第7種方法依舊返回“undefined”。
小 結(jié)
NAME主要應(yīng)用在交互式網(wǎng)頁,表單提交給某個服務(wù)器端腳本后接收變處理量使用。從源代碼的規(guī)范性和兼容性角度出發(fā),如在客戶端腳本里要索引某個對象,建議用
document.getElementById()
另外舉個簡單的例子:
<form name="form1">
用戶名:<input type=text name="username" id="username">
密碼:<input type=password name="password" id="pwd">
</form>
如果我要獲得用戶名和密碼;JS用name獲得的話,就得寫成document.form1.username.value;
document.form1.password.value;
用id獲得:
docuement.getElementById("username");
docuement.getElementById("pwd");
有時候name 可能會出現(xiàn)相同的名字,所以這時候我們用name獲得就無法確定獲得的是哪個值了。
document.getElemntsByName("username");
這里得到的是一個數(shù)組

標(biāo)簽:贛州 衡水 濟寧 日照 延安 寧夏 寧波

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML元素的ID和Name屬性的區(qū)別》,本文關(guān)鍵詞  HTML,元素,的,和,Name,屬,性的,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML元素的ID和Name屬性的區(qū)別》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML元素的ID和Name屬性的區(qū)別的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章