The difference between the ID and Name attributes of HTML elements_HTML/Xhtml_Web page production

Today I am a little confused about . Adding # means an anchor, followed by 13, it will jump to the 13 position of this page, and this 13 is the Name attribute. value. Why isn't
an ID value? ? ? So I checked the difference between ID and Name, and recorded

the most classical answer: ID is like a person’s ID number, and Name is like his name. ID is obviously unique, and Name can be repeated.
Obviously, the answer to ID and Name is too general. Of course, that explanation is completely correct for ID, which is the Identity of the HTML element on the client side. Name is actually much more complicated, because Name has many uses, so it cannot be completely replaced by ID, thus canceling it. Specific uses are:
Use 1: As a server-side indicator of HTML elements that can interact with the server, such as input, select, textarea, and button. We can get the value submitted by the element through Request.Params based on its Name on the server side.
Use 2: HTML element Input type='radio' grouping, we know that the radio button control is in the same grouping class, the check operation is mutex, only one radio can be selected at the same time, this grouping is based on the same Name attribute realized.
Use 3: Establish an anchor point in the page. We know that link is to obtain a page hyperlink. If you do not use the href attribute, use Name instead, such as: < ;a name="PageBottom">, we get a page anchor.
Use 4: Identity as an object, such as Applet, Object, Embed and other elements. For example, in an Applet object instance, we will use its Name to refer to the object.
Purpose 5: When associating between IMG elements and MAP elements, if you want to define the hotspot area of ​​IMG, you need to use its attribute usemap, so usemap="#name" (Name of the associated MAP
element ).
Use 6: Attributes of certain specific elements, such as attribute, meta and param. For example, define parameters for Object or in Meta.
Obviously these uses cannot be simply replaced by ID, so the difference between ID and Name of HTML elements is not the difference between ID number and name. They have different functions
thing.
We can analyze the subtle differences through a piece of code:

Copy the code

The code is as follows:

In IE browser, how many methods can we use to index this text box object? (For the sake of 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 correctly index the object. 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". The other methods can correctly index the object. However, due to the 3rd and 4th methods The IE-specific object document.all is used. Although FF1.0 returns the correct value, a warning is issued in the console: Warning: Non-standard attribute 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: causes the HTML text to be parsed according to the HTML4.01 standard. In IE6, it still passes the return value test. However, in Mozilla Firefox 1.0, the trouble is big. 3 and 4 The first method does not have any return value, but an error message is issued in the console: Error: document.all has no properties, and the seventh method still returns "undefined".
Summary
NAME is mainly used in interactive web pages. After the form is submitted to a server-side script, it 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
document.getElementById()
Another simple example:

Username:
Password:

If I want to get the user name and password; if JS uses name to obtain it, it must be written as document.form1.username.value;
document.form1.password.value ;
Use id to get:
docuement.getElementById("username");
docuement.getElementById("pwd");
Sometimes name may have the same name, so at this time we use Once the name is obtained, it is impossible to determine which value is obtained.
document.getElemntsByName("username");
What you get here is an array