HTML 中 id與name 區(qū)別
一個name可以同時對應(yīng)多個控件肝陪,比如checkbox和radio驳庭。而id必須是全文檔中唯一的
id的用途
1) id是HTML元素的Identity,主要是在客戶端腳本里用氯窍。
2) label與form控件的關(guān)聯(lián)饲常,如
<label for="MyInput">My Input</label>
<input id="MyInput" type="text">
for屬性指定與label關(guān)聯(lián)的元素的id,不可用name替代
3)腳本中獲得對象:IE支持在腳本中直接以id(而不是name)引用該id標(biāo)識的對象狼讨。
例如上面的input贝淤,要在腳本中獲得輸入的內(nèi)容,可以直接以 MyInput.value來獲得政供。如果用DOM的話播聪,則用document.getElementById("MyInput").value;
如果要用name的話布隔,通常先得到包含控件的form离陶,例如document.forms[0],然后從form再引用name衅檀,注意這樣得到的是經(jīng)過計算后將發(fā)送給服務(wù)器的值
name的用途
1)主要是用于獲取提交表單的某表單域信息招刨, 作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示,比如input哀军、select沉眶、textarea、框架元素(iframe杉适、frame谎倔、 window的名字,用于在其他frame或window指定target )和button等淘衙,這些元素都與表單(框架元素作用于form的target)提交有關(guān)传藏,瀏覽器會根據(jù)name來設(shè)定發(fā)送到服務(wù)器的request, 在表單的接收頁面只接收有name的元素, 所以賦ID的元素通過表單是接收不到值的彤守。 我們可以在服務(wù)器端根據(jù)其Name通過Request.Params取得元素提交的值毯侦。在form里面,如果不指定name具垫,就不會發(fā)送到服務(wù)器端侈离。
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>擒滑,我們就獲得了一個頁面錨點,如<strong><a name="1" id="1"></a>Experience (XP)</strong>,詳見 示例
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">禽最。
當(dāng)然HTML元素的name屬性在頁面中也可以起那么一點ID的作用腺怯,因為在DHTML對象樹中,我們可以使用document.getElementsByName來獲取一個包含頁面中所有指定Name元素的對象數(shù)組川无。Name屬性還有一個問題呛占,當(dāng)我們動態(tài)創(chuàng)建可包含Name屬性的元素時,不能簡單的使用賦值element.name = "..."來添加其Name懦趋,而必須在創(chuàng)建Element時晾虑,使用document.createElement('<element name = "myName"></element>')為元素添加Name屬性。這是什么意思敖鼋小帜篇?看下面的例子就明白了。
<script language="JavaScript">
var input = document.createElement('INPUT');
input.id = 'myId';
input.name = 'myName';
alert(input.outerHTML);
</script>
消息框里顯示的結(jié)果是:<INPUT id=myId>
<script language="JavaScript">
var input = document.createElement(' < INPUT name = " myName " > ');
input.id = 'myId';
alert(input.outerHTML);
</script>
消息框里顯示的結(jié)果是:
<INPUT id=myId name=myName>
name與id 區(qū)別
id要符合標(biāo)識的要求诫咱,比如大小寫敏感笙隙,最好不要包含下劃線(因為不兼容CSS)。而name基本上沒有什么要求坎缭,甚至可以用數(shù)字竟痰。table签钩、tr、td坏快、div铅檩、p、span莽鸿、h1昧旨、li等元素一般用id。與表單相關(guān)的元素也可以賦ID值, 但為這些元素賦ID值的時候引用這些元素的方法就要變一下了富拗,具體的如下:
賦name時臼予,引用元素的方式: document.formName.inputName 或 document.frames("frameName")
賦id時,引用元素的方式: document.all.inputID 或 document.all.frameID
除去與表單相關(guān)的元素啃沪,只能賦id不能賦name粘拾,這些元素有body、li创千、a缰雇、table、tr追驴、td械哟、th、p殿雪、div暇咆、span、pre丙曙、dl爸业、dt、dd亏镰、font扯旷、b等等
CSS 中 id、class屬性的區(qū)別
1)class是設(shè)置標(biāo)簽的類索抓,用于指定元素屬于何種樣式的類钧忽。在CSS樣式中以小寫的“點”及“.”來命名,在html頁面里則以class="css5" 來選擇調(diào)用逼肯,命名好的CSS又叫css選擇器耸黑。
如: .css5{屬性:屬性值;} 選擇器在html調(diào)用為“<div class="css5">我是class例子</div>
.baobao { color: lime; background: #ff80c0 }
使用方法:class="baobao"
2)id是設(shè)置標(biāo)簽的標(biāo)識。用于定義一個元素的獨(dú)特的樣式汉矿。在CSS樣式定義的時候 以“#”來開頭命名id名稱
如一個CSS規(guī)則:
#binbin { font-size: larger }
使用方法:id="binbin"
id是一個標(biāo)簽崎坊,用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容,就象你的名字洲拇,如果一個屋子有2個人同名奈揍,就會出現(xiàn)混淆曲尸;
3)css里的id用法與class用法一樣,只是把class換成id男翰。如例子:
在CSS樣式定義ID
#css5 {height:25px; width: 200px;}
調(diào)用ID :
<div id="css5">我是ID例子</div>
class是一個樣式另患,可以套在任何結(jié)構(gòu)和內(nèi)容上,就象一件衣服蛾绎。
4)概念上說就是不一樣
id是先找到結(jié)構(gòu)/內(nèi)容昆箕,再給它定義樣式;class是先定義好一種樣式租冠,再套給多個結(jié)構(gòu)/內(nèi)容鹏倘。
(1) 一個class是用來根據(jù)用戶定義的標(biāo)準(zhǔn)對一個或多個元素進(jìn)行定義的。打個比較恰當(dāng)?shù)谋确骄褪莿”荆阂粋€class可以定義劇本中每個人物的故事線顽爹,你可以通過cSS纤泵,javascript等來使用這個類。因此你可以在一個頁面上使用class="Frodo" 镜粤,class= "Gandalf"捏题, class="Aragorn"來區(qū)分不同的故事線。還有一點非常重要的是你可以在一個文檔中使用任意次數(shù)的class肉渴。
(2) id 通常用于定義頁面上一個僅出現(xiàn)一次的標(biāo)記公荧。在對頁面排版進(jìn)行結(jié)構(gòu)化布局時(比如說通常一個頁面都是由一個頁眉,一個報頭< masthead>同规,一個內(nèi)容區(qū)域和一個頁腳等組成)循狰,一般使用ID比較理想,因為一個ID在一個文檔中只能被使用一次券勺。而這些元素在同一頁面中很少會出現(xiàn)大于一次的情況晤揣。
歸納成一句話就是:class可以反復(fù)使用而id在一個頁面中僅能被使用一次。
有可能在很大部分瀏覽器中反復(fù)使用同一個id不會出現(xiàn)問題朱灿,但在標(biāo)準(zhǔn)上這絕對是錯誤的使用,而且很可能導(dǎo)致某些瀏覽器的現(xiàn)實問題钠四。
在實際應(yīng)用的時候盗扒,class可能對文字的排版等比較有用,而id則對宏觀布局和設(shè)計放置各種元素較有用缀去。
<<id具有唯一性侣灶,而class是一個類,適用于可多次重復(fù)使用的容器>>
關(guān)于ID和Name的一些注意事項
當(dāng)然HTML元素的name屬性在頁面中也可以起那么一點id的作用缕碎,因為在DHTML對象樹中褥影,我們可以使用document.getElementsByName來獲取一個包含頁面中所有指定name元素的對象數(shù)組。
如果頁面中有n(n>1)個HTML元素的id都相同了怎么辦咏雌?在DHTML對象中怎么引用他們呢凡怎?
如果我們使用ASPX頁面校焦,這樣的情況是不容易發(fā)生的,因為asp.net進(jìn)程在處理aspx頁面時根本就不允許有ID非唯一统倒,這是頁面會被拋出異常而不能被正常的render寨典。
但如果不是動態(tài)頁面,我們硬要讓id重復(fù)那IE怎么做呢房匆?
這個時候我們還是可以繼續(xù)使用document.getElementById獲取對象耸成,只不過我們只能獲取id重復(fù)的那 些對象中在HTML Render時第一個出現(xiàn)的對象。而這時重復(fù)的id會在引用時自動變成一個數(shù)組浴鸿,id重復(fù)的元素按Render的順序依次存在于數(shù)組中井氢,數(shù)組的腳下標(biāo)依次表示id出現(xiàn)的先后順序。
轉(zhuǎn)載文章源于:點擊地址