【轉(zhuǎn)載】HTML中id蛤虐、name、class 區(qū)別

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)載文章源于:點擊地址

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末岳链,一起剝皮案震驚了整個濱河市花竞,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌宠页,老刑警劉巖左胞,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異举户,居然都是意外死亡烤宙,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門俭嘁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來躺枕,“玉大人,你說我怎么就攤上這事供填」赵疲” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵近她,是天一觀的道長叉瘩。 經(jīng)常有香客問我,道長粘捎,這世上最難降的妖魔是什么薇缅? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮攒磨,結(jié)果婚禮上泳桦,老公的妹妹穿的比我還像新娘。我一直安慰自己娩缰,他們只是感情好灸撰,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般浮毯。 火紅的嫁衣襯著肌膚如雪完疫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天亲轨,我揣著相機(jī)與錄音趋惨,去河邊找鬼。 笑死惦蚊,一個胖子當(dāng)著我的面吹牛器虾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蹦锋,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼兆沙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了莉掂?” 一聲冷哼從身側(cè)響起葛圃,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎憎妙,沒想到半個月后库正,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡褥符,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了抚垃。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喷楣。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡追他,死狀恐怖湿酸,靈堂內(nèi)的尸體忽然破棺而出推溃,到底是詐尸還是另有隱情铁坎,我是刑警寧澤蜂奸,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站硬萍,受9級特大地震影響扩所,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜朴乖,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一祖屏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧买羞,春花似錦袁勺、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至吃挑,卻和暖如春钝荡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背舶衬。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工埠通, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人约炎。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓植阴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親圾浅。 傳聞我的和親對象是個殘疾皇子掠手,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)狸捕,斷路器喷鸽,智...
    卡卡羅2017閱讀 134,651評論 18 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評論 1 92
  • 孩子畢竟不是成年人,必須管教鸡岗,必須懲戒混槐。一味以愛的名義讓步,是對他最大的不負(fù)責(zé)轩性。今天孩子打不得声登,罵不得,甚至一個眼...
    鄧州老趙閱讀 282評論 0 0
  • 住在深圳將近五年之久,對于南方風(fēng)土人情已經(jīng)習(xí)慣悯嗓,每每提及故鄉(xiāng)更多的是懷念但卻無一絲不舍之情件舵。我對家的概念始終是有父...
    8cca1800bf96閱讀 243評論 2 1
  • 顧影自憐 誰耐得住冷風(fēng)不停地吹? 煙雨蒙蒙 輪回中走來的人含著淚 我不知道三生石上刻著什么樣的痕跡 我只聽到午夜的...
    行人a閱讀 588評論 4 6