On the difference between ID and name in HTML example code _ Experience Exchange

We can analyze the subtle differences in a piece of code:

<form method= "POST" action= "Name=" Demoform ">
<input type= "text" name= "Odemo" id= "ODemo2" value= "DEMO"/>
</form>



In IE browser, how many methods can we index to this text box object? (For the sake of difference, we set the name and ID to a different value)
1. Odemo
2. Demoform.odemo
3. Document.all.oDemo
4. Document.all.demoform.oDemo
5. Document.forms[0].odemo
6. document.forms[' Demoform '].odemo
7. document.forms[' Demoform '].childnodes[0]
8. document.forms[' Demoform '].elements[0]
9. document.getElementById (' ODemo2 ')

The above 9 index methods all pass the return value test in the IE6, but notable is the last one: in IE6, I wrote the Index object

document.getElementById (' Odemo '), the browser can also correctly indexed to the object, really terrible fault tolerance Ah!!

Then the question comes, we put this code in Mozilla Firefox 1.0 to execute again, only the 7th way to return to "undefined", the other way to correct

Index to object, but since the 3 and 4 methods used document.all This ie proprietary object, FF1.0 returned the correct value, but in the console issued a police

Warning: non-standard attribute document.all. Please use the standard form document.getElementById () of the consortium.

Next, we define the HTML text type Strictly, and add it at the beginning of the source code:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

The HTML text is parsed according to the HTML4.01 standard, all the way through the return value test in IE6, but in Mozilla Firefox 1.0, the trouble is big, the first 3, 4 ways

There is no return value, and an error message is emitted in the console: Document.all has no properties, and the 7th method still returns "undefined

”。

Summary

Name was originally intended for identification purposes, but now it is recommended that you identify the element with an ID based on the specification.

The following can only be used with name:
1. The control name of the form, and the submitted data is controlled with the control's name instead of the ID. Because many of the name will correspond to multiple controls at the same time, such as

CheckBox and radio, and IDs must be unique in the Full-text document. In addition, the browser sets the request to be sent to the server according to name. So if you use an ID, the server is not

method to get the data.
2. The name of frame and window used to specify target in other frame or window.

The following can only be used with IDs:
1. Label is associated with the form control,
<label for= "Myinput" >my input</label>
<input id= "Myinput" type= "text" >
The For property specifies the ID of the element associated with the label, and cannot be replaced with name.
2. CSS element selection mechanism, to #myid the way to specify the elements of the application style, can not be replaced by name.
3. Get the object in the script:
IE supports objects that are identified by the ID (not name) directly in the script. For example, the above input, in order to get the contents of the script, you can directly

Myinput.value to obtain.
If you use DOM, use document.getElementById ("Myinput"). Value, if you want to use name, you usually get the form that contains the control, for example

Document.forms[0], then refer to name from form, and notice that the value that is computed will be sent to the server.

The other differences between name and ID are:
IDS should conform to identity requirements, such as case sensitivity, preferably not underlined (because CSS is not compatible). and name basically does not have any requirements, can even use the number

。

Using CSS to control the stay style of this link,
This can be written #m_blog div.opt a:hover{color: #D57813} or #myLink: Hover{color: #D57813}

Name is primarily applied to interactive Web pages, and forms are submitted to a server-side script to receive variable processing usage. From the normative and compatibility point of view of the source code, as in the client

In the script to index an object, it is recommended to use the document.getElementById () method, try not to directly use the value of name, of course, if not consider compatibility, the above 9 kinds of Parties

The method can be run through IE (IE5.0 not tested).

Attachment: Test Source code

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title></title>
<body>
<form method= "POST" action= "Name=" Demoform ">
<input type= "text" name= "Odemo" value= "DEMO" id= "ODemo2"/><br
<input type= "button" value= "Odemo" onclick= "alert (odemo.value)"/><br/>
<input type= "button" value= "Demoform.odemo" onclick= "alert (demoform.oDemo.value)"/><br/>
<input type= "button" value= "Document.all.oDemo" onclick= "alert (document.all.oDemo.value)"/><br/>
<input type= "button" value= "Document.all.demoform.oDemo" onclick= "alert (document.all.demoform.oDemo.value)"/ ><br/>
<input type= "button" value= "Document.forms[0].odemo" onclick= "alert (document.forms[0].odemo.value)"/><br />
<input type= "button" value= "document.forms[' Demoform '].odemo" onclick= "alert (document.forms[' Demoform '). Odemo.value) "/><br/>
<input type= "button" value= "document.forms[' Demoform '].childnodes[0" "onclick=" alert (document.forms
[' Demoform '].childnodes[0].value) '/><br/>
<input type= "button" value= "document.forms[' Demoform '].elements[0" "onclick=" alert (document.forms
[' Demoform '].elements[0].value) '/><br/>
<input type= "button" value= "document.getElementById (' ODemo2 ')" onclick= "Alert (document.getElementById (' ODemo2 ') ). Value) "/><br/>
</form>
</body>