Difference between getelementbyid () getelementsbyname () getelementsbytagname () in Javascript

Web Standard Getelementbyid (), getelementsbyname (), and getelementsbytagname () Access Billing NENT Any tag in: 1 getelementbyid ("ID ") Getelementbyid () Accessible Billing NENT A specific element in ID So you can only access ID . For example, there is Div Of ID Is Docid : <Div id = "docid"> </div> Then you can use Getelementbyid ("docid ") To obtain this element.

2 getelementsbyname ("name ") This is through Name To obtain the element, but I do not know whether it is. This is Get elemnets , Plural Elemnets It is not an element. Why? Because Billing NENT For each element ID Is unique, Name But it can be repeated. A metaphor is like a person's ID card number is unique (theoretically, although there are duplicates in reality), but there are many duplicate names. If a document contains more than two tags Name Same, then Getelementsbyname () These elements can be obtained to form an array. For example, there are two Div : <Div name = "docname" id = "docid1"> </div> <Div name = "docname" id = "docid2"> </div> You can use Getelementsbyname ("docname ") Obtain the two Div , Use Getelementsbyname ("docname") [0] Access the first Div , Use Getelementsbyname ("docname") [1] Access the second Div . 3 getelementsbytagname ("tagname ") This is through Tagname (Tag Name) to obtain the element, Document Of course there will be the same tag, so this method also getsArray. In the following example, there are two Div , You can use Getelementsbytagname ("Div ") To access them, use Getelementsbytagname ("Div") [0] Access the first Div, , Use Getelementsbytagname ("Div") [1] Access the second Div . < Head > < Meta HTTP-equiv= "Content-Type" Content= "Text/html; charset = gb2312"> < Title > Byname, tag</Title> < Style Type= "Text/CSS"> <!-- # Docid1,# Docid2{ Margin:10px; Height:400px; Width:400px; Background-color:#999;} --> </ Style > </ Head > < Body > < Div Name= "Docname" ID= "Docid1" Onclick= "Bgcolor ()"> </Div> < Div Name= "Docname" ID= "Docid2" Onclick= "Bgcolor ()"> </Div> </ Body > </ Html > < Script Language= "JavaScript" Type= "Text/JavaScript"> <! -- Function Bgcolor (){ VaRDocnobj = Document. getelementsbytagname ("Div"); Docnobj [0]. style. backgroundcolor ="Black"; Docnobj [1]. style. backgroundcolor ="Black"; } --> </ Script >

Total Conclusion: Summary Standard Dom To access a specific element and try to use the standard Getelementbyid () , Use standard Getelementbytagname (), However IE Not Supported Getelementsbyname () , Avoid using Getelementsbyname () , Getelementsbyname () And non-conforming Document. All [] It is not completely useless. They have their own convenience. If you don't need to use them, you can see what browsers the website users use.

JavaScript getelementbyid is very common, however, on the standard page, a id only appears once. If you want to control multiple elements at the same time, such as clicking a link, how to hide multiple layers? Use class .