| 規則 |
id 必需是全文檔唯一 (如：一個頁面 id 不能重覆)
id 具有唯一性 |
name 可以同時對應多個控制元件(如：checkbox 和 radio)
class 是一個類，適用於可多次重複使用的容器 |
| 用途 |
| HTML 元素的 Identity，主要是在客户端腳本裡使用 | 獲取提交表單的某表單域信息，作為可與伺服器交互數據的HTML 元素的伺服器端的標示，比如input、select、textarea、框架元素( iframe、frame、 window的名字，用於在其他 frame 或window 指定 target )和button等，這些元素都與表單(框架元素作用於 form 的 target ) 提交有關
瀏覽器會根據 name 來設定發送到伺服器的 request， 在表單的接收頁面只接收有name的元素，所以賦 ID 的元素通過表單是接收不到值的。 我們可以在伺服器端根據其 Name 通過Request.Params 取得元素提交的值。在 form 裡面，如果不指定name，就不會發送到伺服器端l |
| 控制項 |
<label for="MyInput">My Input</label>
<input id="MyInput" type="text">
- label 與 form 控制項的關聯
- for 屬性指定與 label 關聯的元素的 id，不可用 name 替代
| <input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
- radio button 控制項在同一個分組類，check 操作是 mutex，同一時間只能選中一個 radio，這個分組就是根據相同的 name 屬性來實現
|
| 腳本中獲得對象 |
MyInput.value
如果用 DOM
document.getElementById("MyInput").value
|
- 如果用 name，通常先得到包含控制項的 form，然後從 form 再引用 name，注意這樣得到的是經過計算後將發送給伺服器的值
document.forms[0]
|
| Link |
|
|
<a href="URL">link</a>
如果不用 href 屬性，改用name
<a name="PageBottom"></a>
獲得了一個頁面 Link
<strong><a name="1" id="1"></a>Experience (XP)</strong>
|
| IMG |
|
|
- IMG元素和MAP元素之間關聯的時候，如果要定義IMG的熱點區域，需要使用其屬性usemap，使usemap="#name"(被關聯的MAP元素的Name)
|
| 特定元素的屬性 |
|
|
- attribute，meta 和 param
- Object 定義參數
<PARAM NAME="appletParameter" VALUE="value">
Meta中
<META NAME="Author" CONTENT="Dave Raggett">
|
| createElement |
var input = document.createElement('INPUT');
input.id = 'myId';
input.name = 'myName';
alert(input.outerHTML);
<INPUT id="myId">
| var input = document.createElement('< INPUT name = "myName">');
input.id = 'myId';
alert(input.outerHTML);
<INPUT id="myId" name="myName">
- HTML元素的 name 屬性在頁面中也可以起那麼一點 id 的作用，因為在 DHTML 對象樹中，我們可以使用document.getElementsByName 來獲取一個包含頁面中所有指定 name 元素的對象數組。
- name 屬性還有一個問題，當我們動態創建可包含 name 屬性的元素時，不能簡單的使用賦值 element.name = "..." 來添加其 name，而必須在創建 Element 時，使用document.createElement('<element name = "myName"></element>') 為元素添加 name 屬性
|
| 注意事項 |
- id 要符合標識的要求，比如大小寫敏感，最好不要包含下劃線 (不兼容 CSS)
- table、tr、td、div、p、span、h1、li 等元素一般用 id
- 表單相關的元素也可以賦 id 值, 但為這些元素賦 id 值的時候引用這些元素的方法就要變一下
- 除去與表單相關的元素，只能賦 id 不能賦 name，這些元素有 body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b 等等
- 引用元素的方式
document.formName.inputName // 1
document.frames("frameName") // 2
|
- name 基本上沒有什麼要求，甚至可以用數字
- 引用元素的方式
document.all.inputID // 1
document.all.frameID // 2
|
| CSS |
- id 是設置標籤的標識，用於區分不同的結構和內容
- 用於定義一個元素的獨特的樣式
- CSS 樣式定義的時候以「#」來開頭命名 id 名稱
- HTML
<div id="banana"></div>
#banana{
color: lime;
background: #ff80c0;
}
- id 是先找到結構/內容，再給它定義樣式
- id 通常用於定義頁面上一個僅出現一次的標記
- 在對頁面排版進行結構化布局時(如：說通常一個頁面都是由一個頁眉，一個報頭< masthead>，一個內容區域和一個頁腳等組成)
- 使用 id 比較理想，因為一個 id 在一個文檔中只能被使用一次，而這些元素在同一頁面中很少會出現大於一次的情況
- id 在一個頁面中僅能被使用一次
- id 對宏觀布局和設計放置各種元素較有用
- 有可能在很大部分瀏覽器中反覆使用同一個id不會出現問題，但在標準上這絕對是錯誤的使用，而且很可能導致某些瀏覽器的現實問題
|
- class 是設置標籤的類，用於指定元素屬於何種樣式的類
- CSS 樣式中以小寫的「.」來命名
- HTML
<div class="banana"></div>
.banana{
color: lime;
background: #ff80c0;
}
- class 先定義好一種樣式，再套給多個結構/內容
- class 用來根據用戶定義的標準對一個或多個元素進行定義
- 一個文檔中使用任意次數的 class
- class 可以反覆使用
- class 對文字的排版等比較有用
|
| 相同名稱問題 |
- 如果頁面中有n(n>1)個HTML元素的id都相同了怎麼辦？
- DHTML 對象中怎麼引用他們呢？
- 使用 ASPX 頁面，這樣的情況是不容易發生，因為 asp.net 進程在處理 aspx 頁面時根本就不允許有 id 非唯一，這是頁面會被拋出異常而不能被正常的render
- 但如果不是動態頁面，我們硬要讓 id 重複那IE怎麼做呢？
- 這個時候我們還是可以繼續使用document.getElementById 獲取對象，只不過我們只能獲取 id 重複的那些對象中在 HTML Render 時第一個出現的對象
- 這時重複的 id 會在引用時自動變成一個數組，id 重複的元素按 Render 的順序依次存在於數組中，數組的腳下標依次表示 id 出現的先後順序
|
- 當然HTML元素的name屬性在頁面中也可以起那麼一點id的作用，因為在 DHTML 對象樹中，使用document.getElementsByName 來獲取一個包含頁面中所有指定 name 元素的對象數組
|
|
沒有留言:
張貼留言