遮天,完美世界前传下载,懒人听书

主頁(yè) > 知識(shí)庫(kù) > HTML元素的ID和Name屬性的區(qū)別

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

今天對(duì) <a href="#13"></a> 有點(diǎn)疑惑，加上#表示一個(gè)錨，後面跟上13，就會(huì)跳到本頁(yè)面的13的位置，而這個(gè)13就是 Name屬性值。怎麼不
是ID值呢？？？所以查了下ID 和Name的區(qū)別，特記錄

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

復(fù)制代碼

代碼如下:

在IE瀏覽器里，我們可以通過(guò)多少方法來(lái)索引到這個(gè)文本框?qū)ο螅?為區(qū)別起見(jiàn)，我們把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里面全部通過(guò)返回值測(cè)試，不過(guò)值得注意的是最后一種：在IE6里，我把索引對(duì)象寫(xiě)成document.getElementById('oDemo')，瀏覽器也能正確索引到對(duì)象，真是可怕的容錯(cuò)性?。。?
接著問(wèn)題來(lái)了，我們把這段代碼放在Mozilla Firefox 1.0里再執(zhí)行一次，只有第7種方法返回“undefined”，其他的方法可以正確索引到對(duì)象，不過(guò)由于第3、4種方法用到了document.all這個(gè)IE專(zhuān)有對(duì)象，F(xiàn)F1.0雖然返回了正確的值，不過(guò)卻在控制臺(tái)里發(fā)出了警告：警告：非標(biāo)準(zhǔn)的屬性 document.all。請(qǐng)使用 W3C 的標(biāo)準(zhǔn)形式 document.getElementById()
。
接下來(lái)我們把HTML文本類(lèi)型定義得嚴(yán)格一點(diǎn)，在源代碼開(kāi)頭加上：<!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里照樣全部通過(guò)返回值測(cè)試，不過(guò)在Mozilla Firefox 1.0里麻煩就大了，第3、4種方法沒(méi)有任何的返回值，而在控制臺(tái)里發(fā)出了報(bào)錯(cuò)信息：錯(cuò)誤： document.all has no properties ，而第7種方法依舊返回“undefined”。
小結(jié)
NAME主要應(yīng)用在交互式網(wǎng)頁(yè)，表單提交給某個(gè)服務(wù)器端腳本后接收變處理量使用。從源代碼的規(guī)范性和兼容性角度出發(fā)，如在客戶(hù)端腳本里要索引某個(gè)對(duì)象，建議用
document.getElementById()
另外舉個(gè)簡(jiǎn)單的例子：
<form name="form1">
用戶(hù)名：<input type=text name="username" id="username">
密碼：<input type=password name="password" id="pwd">
</form>
如果我要獲得用戶(hù)名和密碼;JS用name獲得的話(huà)，就得寫(xiě)成document.form1.username.value;
document.form1.password.value;
用id獲得：
docuement.getElementById("username");
docuement.getElementById("pwd");
有時(shí)候name 可能會(huì)出現(xiàn)相同的名字，所以這時(shí)候我們用name獲得就無(wú)法確定獲得的是哪個(gè)值了。
document.getElemntsByName("username");
這里得到的是一個(gè)數(shù)組

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

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML元素的ID和Name屬性的區(qū)別》，本文關(guān)鍵詞 HTML,元素,的,和,Name,屬,性的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。

濮阳杆衣贸易有限公司

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