For the most classic explanation of ID & Name, "ID is like our ID card, and Name is like our Name". That is to say, ID is unique in an html document, but the Name can be repeated, just as our personal names can be repeated, but the ID card is indeed unique across China (PS: It is said that there are repeated ^_^)
However, for the document. getElementsByName and document. getElementById methods, IE does not strictly distinguish between ID and Name. For example:
<Script type = "text/javascript">
Function useGetElementsByNameWithId (id ){
Var eles = document. getElementsByName ('Id _ ');
Var msg = 'use getElementsByName to pass in the ID: Get :'
If (eles. length> 0 ){
Msg + = "Name" + eles [0]. id;
}
Alert (msg );
}
Function usegetElementByIdWithName (name ){
Var ele = document. getElementById (name );
Var msg = 'use getElementById to pass in the Name to get :';
If (ele ){
Msg + = "ID" + ele. id;
}
Alert (msg );
}
</Script> <input id = "ID_A" name = "Name_A" type = "button" value = "use getElementsByName to input ID" onclick = "useGetElementsByNameWithId (this. id) "/>
<Input id = "ID_ B" name = "Name_ B" type = "button" value = "use getElementsByName to input Name" onclick = "usegetElementByIdWithName (this. name) "/> in IE, you can also access the target element by passing in the name through getId, while passing in the Id through getName can also access the target element.
Two methods are described in MSDN:
GetElementById Method
--------------------------------------------------------------------------------
Returns a reference to the first object with the specified value of the ID attribute.
Remarks
When you use the getElementsByName method, all elements in the document that have the specified NAME or ID attribute value are returned.
Elements that support both the NAME and the ID attribute are stored in the collection returned by the getElementsByName method, but not elements with a NAME expando.
MSDN does describe the getElementsByName method: "All elements with the specified Name or ID attribute will be returned",
The getElementById method is not described, but the internal implementation is the same as that of getElementsByName.
For FF, it seems more loyal to W3C standards. The above test code cannot return the target element.
W3C information:
Http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-26809268
Because of this problem, ASP. NET controls such as radiobuttonlist checkboxlist. When using client scripts to access group objects with the name attribute through getElementsByName, note that radiobuttonlist will display a table by default to accommodate these radio, the table id is the same as the radio name, for example:
. Aspx
<Asp: radiobuttonlist id = "RadioButtonList1" runat = "server">
<Asp: listitem> opt1 </asp: listitem>
<Asp: listitem> opt2 </asp: listitem>
<Asp: listitem> opt3 </asp: listitem>
</Asp: radiobuttonlist> HTML:
<Table id = "RadioButtonList1" border = "0">
<Tr>
<Td> <input id = "radiobuttonlist00000" type = "radio" name = "RadioButtonList1" value = "opt1"/> <label for = "radiobuttonlist00000"> opt1 </label> </td>
</Tr> <tr>
<Td> <input id = "RadioButtonList1_1" type = "radio" name = "RadioButtonList1" value = "opt2"/> <label for = "RadioButtonList1_1"> opt2 </label> </td>
</Tr> <tr>
<Td> <input id = "RadioButtonList1_2" type = "radio" name = "RadioButtonList1" value = "opt3"/> <label for = "RadioButtonList1_2"> opt3 </label> </td>
</Tr>
</Table>
In IE, when document. getElementsByName ('radiobuttonlist1') is used, four elements are returned. The first element is the table with the id RadioButtonList1,
If the client needs such a script, it also brings trouble for cross-browser code.
Note: For radiobuttonlist, you can select "stream layout" for rendering. Similarly, a similar peripheral <span/> is generated as a container, which also produces this problem.
