在变量上存储多个元素

Question

I have created a styling reset as the first part of a form validation. I must clear two types of elements: inputs and select. Can I store on a variable two kinds of elements? So that inputs var stores both inputs and select objects.

  var inputs = document.getElementsByTagName("input");
  var totalInputs= inputs .length;

  for (var i = 0; i < totalInputs; i++){
        inputs[i].removeAttribute("style");;
  }

Answer 1

You can store multiple elements in the single variable by using querySelectorAll only. But not by using getElementsByTagName .

Here you can store both input and select objects by,

var inputs = document.querySelectorAll("input,select");

Check this example:

 $(function() { $("button").click(function() { var inputs = document.querySelectorAll("input,select"); var totalInputs = inputs.length; for (var i = 0; i < totalInputs; i++) { inputs[i].removeAttribute("style");; } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="text" style="background:#b6ff00" /> <select style="background:#b6ff00"> <option>Option 1</option> <option>Option 2</option> </select> <button>Remove</button> 

Hope this helps

Answer 2

The getElementsByTagName returns a node list. I would suggest using querySelectorAll to get the input and select elements.

var inputs = document.querySelectorAll("input,select"));
var totalInputs = inputs.length;

for (var i = 0; i < totalInputs; i++){
    inputs[i].removeAttribute("style");;
}