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:<form method="post" action="" name="demoform"> <input type="text" name="oDemo" id="oDemo2" value="DEMO" /> </form> 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
Recommend
A brief discussion on the differences and summary of the three floating point types of float, double and decimal in MySQL
The storage size and range of each floating point...
Vue+SSM realizes the preview effect of picture upload
The current requirement is: there is a file uploa...
How to install Docker using scripts under Linux Centos
What is the main function of Docker? At present, ...
MySQL 5.7.27 installation and configuration method graphic tutorial
MySQL 5.7.27 detailed download, installation and ...
VMware implements the detailed process of PXE+kickstart unattended installation of Centos7 system
Table of contents PXE implements unattended batch...
jQuery implements article collapse and expansion functions
This article example shares the specific code of ...
Vue makes a simple random roll call
Table of contents Layout part: <div id="a...
Common attacks on web front-ends and ways to prevent them
The security issues encountered in website front-...
How to view Docker container application logs
docker attach command docker attach [options] 容器w...
Steps to install MySQL 8.0.23 under Centos7 (beginner level)
First, let me briefly introduce what MySQL is; In...
jQuery canvas draws picture verification code example
This article example shares the specific code of ...
5 commonly used objects in JavaScript
Table of contents 1. JavaScript Objects 1).Array ...
MySQL multi-table query detailed explanation
Eating well and getting enough rest sounds simple...
The functions and differences between disabled and readonly
1: readonly is to lock this control so that it can...
Detailed example of database operation object model in Spring jdbc
Detailed example of database operation object mod...