The difference between ID and Name attributes of HTML elements

Today I am a little confused about <a href="#13"></a>. Adding # indicates an anchor, and adding 13 will jump to position 13 of this page, and this 13 is the Name attribute value. Why isn't it an ID value? ? ? So I checked the difference between ID and Name and recorded it

The most classic answer: ID is like a person’s ID number, and Name is like his name. ID is obviously unique, while 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. The Name is actually much more complicated, because the Name has many uses, so it cannot be completely replaced by the ID and thus canceled. Specific uses include:
Purpose 1: As a server-side marker for HTML elements that can exchange data 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.
Usage 2: Grouping of HTML element Input type='radio'. We know that radio button controls are in the same group class, and the check operation is mutex. Only one radio can be selected at a time. This grouping is achieved based on the same Name attribute.
Use 3: Create an anchor in the page. We know that <a href="URL">link</a> is to get a page hyperlink. If we do not use the href attribute but use Name instead, such as: <a name="PageBottom"></a>, we will get a page anchor.
Application 4: As the identity of an object, such as Applet, Object, Embed, and other elements. For example, in the Applet object instance, we will use its Name to reference the object.
Use 5: When associating an IMG element with a MAP element, if you want to define the hotspot area of the IMG, you need to use its attribute usemap, so that usemap="#name" (the associated MAP
element's Name).
Usage 6: Attributes of certain specific elements, such as attribute, meta, and param. For example, define a parameter <PARAM NAME = "appletParameter" VALUE = "value"> for an Object or <META NAME = "Author" CONTENT = "Dave Raggett"> in Meta.
Obviously, these uses cannot be simply replaced by ID, so the difference between ID and Name of HTML element is not like the difference between ID number and name, they are basically things with different functions.
We can analyze the subtle differences through a piece of code:

Copy code

The code is as follows:

In IE browser, how many methods can we use to index this text box object? (To distinguish them, 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 pass the return value test in IE6, but it is worth noting the last one: in IE6, I wrote the index object as document.getElementById('oDemo'), and the browser was able to correctly index the object. What a 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 the other methods can correctly index the object. However, because the 3rd and 4th methods use the IE-specific object document.all, although FF1.0 returns the correct value, it issues a warning in the console: Warning: Non-standard property 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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> to parse the HTML text according to the HTML4.01 standard. In IE6, all return value tests still pass, but in Mozilla Firefox 1.0, there is a lot of trouble. The third and fourth methods do not have any return values, and 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, where the form is submitted to a server-side script and then receives variable processing. 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()
Here is another simple example:
<form name="form1">
Username: <input type=text name="username" id="username">
Password: <input type=password name="password" id="pwd">
</form>
If I want to get the username and password; if JS uses name to get it, I have to write it as document.form1.username.value;
document.form1.password.value;
Get it by id:
document.getElementById("username");
document.getElementById("pwd");
Sometimes the same name may appear in name, so when we use name to get the value, we cannot be sure which value we get.
document.getElemntsByName("username");
What we get here is an array

<<: Several methods to clear floating (recommended)

>>: Implementation of multi-site configuration of Nginx on Mac M1

Solution to Linux QT Kit missing and Version empty problem

The difference between ID and Name attributes of HTML elements

Solution to Linux QT Kit missing and Version empty problem

Introduction to Docker containers

Examples of using MySQL covering indexes

MySql grouping and randomly getting one piece of data from each group

Two ways to clear table data in MySQL and their differences

Solution to the problem "Table mysql.plugin doesn't exist" when deploying MySQL

Learn javascript iterator

404 error occurs when accessing the homepage of tomcat started in Docker mode

HTML meta explained

Recommend

How to modify the group to which a user belongs in Linux

A brief analysis of using JDBC to operate MySQL requires adding Class.forName("com.mysql.jdbc.Driver")

Introduction to major browsers and their kernels

A brief analysis of the relationship between various Tomcat logs and the segmentation of catalina.out files

Nginx/Httpd load balancing tomcat configuration tutorial

Detailed example of inserting custom HTML records in Quill editor

Nginx configuration based on multiple domain names, ports, IP virtual hosts

Enter the style file for the automatic search suggestion function: suggestion.css

How many common loops do you know about array traversal in JS?

Detailed explanation of MySQL user rights management

Detailed explanation of the solution to the problem that FTP cannot connect to the Baota Linux panel

How to use regular expressions to automatically match wildcard domain names in nginx

Detailed explanation of Promises in JavaScript

How to install mysql via yum on centos7

Three ways to create a gray effect on website images