細說HTML元素的ID和Name屬性的區別

2021-04-12 15:08:07 字數 1540 閱讀 8363

我們也可以得到最classical的答案:id就像是乙個人的身份證號碼,而name就像是他的名字,id顯然是唯一的,而name是可以重複的。

上週我也遇到了id和name的問題,在頁面裡輸入了乙個input type="hidden",只寫了乙個id='sliceinfo',賦值後submit,在後台用request.params["sliceinfo"]卻怎麼也去不到值。後來恍然大悟因該用name來標示,於是在input裡加了個name='sliceinfo',就一切ok了。

第一段裡對於id和name的解答說的太籠統了,當然那個解釋對於id來說是完全對的,它就是client端html元素的identity。而name其實要複雜的多,因為name有很多種的用途,所以它並不能完全由id來代替,從而將其取消掉。具體用途有:

用途1: 作為可與伺服器互動資料的html元素的伺服器端的標示,比如input、select、textarea、和button等。我們可以在伺服器端根據其name通過request.params取得元素提交的值。

用途2: html元素input type='radio'分組,我們知道radio button控制項在同乙個分組類,check操作是mutex的,同一時間只能選中乙個radio,這個分組就是根據相同的name屬性來實現的。

用途3: 建立頁面中的錨點,我們知道link是獲得乙個頁面超級鏈結,如果不用href屬性,而改用name,如:,我們就獲得了乙個頁面錨點。

用途5: 在img元素和map元素之間關聯的時候,如果要定義img的熱點區域,需要使用其屬性usemap,使usemap="#name"(被關聯的map元素的name)。

顯然這些用途都不是能簡單的使用id來代替掉的,所以html元素的id和name的卻別並不是身份證號碼和姓名這樣的區別,它們更本就是不同作用的東西。

當然html元素的name屬性在頁面中也可以起那麼一點id的作用,因為在dhtml物件樹中,我們可以使用document.getelementsbyname來獲取乙個包含頁面中所有指定name元素的物件陣列。name屬性還有乙個問題,當我們動態建立可包含name屬性的元素時,不能簡單的使用賦值element.name = "..."來新增其name,而必須在建立element時,使用document.createelement('')為元素新增name屬性。這是什麼意思啊?看下面的例子就明白了。

訊息框裡顯示的結果是:。

訊息框裡顯示的結果是:。

初始化name屬性的這個設計不是ie的缺陷,因為msdn裡說了要這麼做的,可是這樣設計的原理什麼呢?我暫時沒有想太明白。

這裡再順便說一下,要是頁面中有n(n>1)個html元素的id都相同了怎麼辦?在dhtml物件中怎麼引用他們呢?如果我們使用aspx頁面,這樣的情況是不容易發生的,因為aspnet程序在處理aspx頁面時根本就不允許有id非唯一,這是頁面會被丟擲異常而不能被正常的render。要是不是動態頁面,我們硬要讓id重複那ie怎麼搞呢?這個時候我們還是可以繼續使用document.getelementbyid獲取物件,只不過我們只能獲取id重複的那些物件中在html render時第乙個出現的物件。而這時重複的id會在引用時自動變成乙個陣列,id重複的元素按render的順序依次存在於陣列中。

轉貼 細說HTML元素的ID和Name屬性的區別

可以說幾乎每個做過web開發的人都問過,到底元素的id和name有什麼區別阿?為什麼有了id還要有name呢?而同樣我們也可以得到最classical的答案 id就像是乙個人的身份證號碼,而name就像是他的名字,id顯然是唯一的,而name是可以重複的。上週我也遇到了id和name的問題,在頁面裡...

細說HTML元素的ID和Name屬性的區別

幾乎每個做過web開發的人都問過,到底元素的id和name有什麼區別阿?為什麼有了id還要有name呢?而同樣我們也可以得到最classical的答案 id就像是乙個人的身份證號碼,而name就像是他的名字,id顯然是唯一的,而name是可以重複的。上週我也遇到了id和name的問題,在頁面裡輸入了...

細說HTML元素的隱藏和顯示

css文件對html的顯示和隱藏有2個屬性可供選擇 1 display 2 visiblity 這2個有什麼區別呢?display display版本 css1 css2 相容性 ie4 ns4 繼承性 有 語法 display block none inline compact marker in...