Let's say there are 10 buttons in the web and a input tag that a user can type in the number of buttons to change color. I merely know I can make this by using query selector, but also I wonder if there is another way to do this without using it. Any suggestions would be appreciated :)

CodePudding user response：

TL/DR Feasible approach is using class, name or id. Since the general flow is the user selects element using a number and you use that input data to select the actual element, there must be some selector in place.

getElementsByClassName()

Url: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Assuming that your elemnts have a class attribute, you can select using classes. E.g. to select element with class "one", you can use document.getElementsByClassName("one")

getElementById()

Link: https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Assuming your elements have id you can use document.getElementById("demo") to get the element with an id="demo"

getElementsByName()

Url: https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

Assuming your elements have a name attribute you can use document.getElementsByName("hey") to get the element with a name of hey

getElementsByTagName()

Url: https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

You can also use tag name to select elements. To select the 10 buttons you would use document.getElementsByTagName("button")