A brief discussion on the difference between id and name in HTML example code_Experience exchange

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

In IE browser, how many methods can we use to index this text box object? ? (For distinction, we set NAME and ID to different values)
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 indexing methods all passed the return value test in IE6. However, it is worth noting the last one: in IE6, I wrote the index object as

document.getElementById('oDemo'), and the browser can index the object correctly. It is really terrible fault tolerance! !

Then the problem comes. We put this code in Mozilla Firefox 1.0 and execute it again. Only the 7th method returns "undefined", and other methods can correctly

index the object. , however, because the third and fourth methods use the IE-specific object document.all, although FF1.0 returned the correct value, it issued a warning in the console

Warning: Unauthorized Standard properties document.all. Please use the W3C standard form document.getElementById() .

Next we define the HTML text type more strictly and add at the beginning of the source code:



Let the HTML text be parsed according to the HTML4.01 standard. In IE6, it still passes the return value test, but in IE6 Mozilla Firefox 1.0 is in big trouble. Methods 3 and 4

do not have any return value, but an error message is issued in the console: Error: document.all has no properties, and method 7 The method still returns "undefined

".

Summary

name was originally used for identification, but now according to the specification, it is recommended to use id to identify elements.

Only name can be used in the following:
1. The name of the control of the form, and the submitted data is controlled by the name of the control instead of the id. Because there are many names that correspond to multiple controls at the same time, such as

checkbox and radio, and the id must be unique in the entire document. In addition, the browser will set the request sent to the server based on the name. Therefore, if the id is used, the server cannot

get the data.
2. The names of frame and window are used to specify targets in other frames or windows.

Only ids can be used for the following:
1. The association between label and form control,
My Input

The for attribute specifies the id of the element associated with the label, which cannot be replaced by name.
2. The element selection mechanism of CSS uses #MyId to specify the element to which the style should be applied, and cannot be replaced by name.
3. Obtaining the object in the script:
IE supports directly referencing the object identified by the id (instead of name) in the script. For example, for the input above, if you want to get the input content in the script, you can get it directly with

MyInput.value.
If you use DOM, use document.getElementById("MyInput").value. If you want to use name, you usually get the form containing the control first, such as

document.forms[0], and then Then reference the name from the form. Note that the value obtained in this way is the value that will be sent to the server after calculation.

Other differences between name and id are:
ID must meet the requirements of identification, such as case sensitivity, and it is best not to include underscores (because it is not compatible with CSS). There are basically no requirements for name, you can even use numbers

.

Use CSS to control the stay style of this link.
You can write #m_blog div.opt a:hover{color:#D57813} or #myLink:hover{color:#D57813}
NAME is mainly used in interactive web pages. The form is submitted to a server-side script and receives variable processing volume. From the perspective of source code standardization and compatibility, if you want to index an object in a client

script, it is recommended to use the document.getElementById() method. Try not to use the NAME value directly. Of course, if not Considering compatibility, the above 9 methods can be run in IE (IE5.0 has not been tested).

附：测试源代码

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

     
    

    

    

    

    

    

    

    

    ['demoform'].childNodes[0].value)" />

    ['demoform'].elements[0].value)" />