将输入字段清除从jQuery转换为Javascript

Question

My trouble is not with the action of clearing the input field - I know the elem.value = "" I am having more trouble getting the right selector in Javascript.

While my jQuery works fine on the site - all other function are in Javascript, so I would like to keep consistency since it isn't that difficult.

Here is the jQuery :

function clearShipToFields(){
    $('input.ship_to_value').each(function(){
        this.value = "";
    });
}

what I was trying to do in Javascript but wasn't working:

var shipTo = document.getElementsByClassName('ship_to_value');
//This is where I am stuck - I don't know how to single out input fields only

I may need to go a different direction and get the input fields first and then filter by class?

var inputFields = document.getElementsByTagName('input');

For Loop
    inputFields[i].getElementsByClassName('ship_to_value').value = "";
End For

There are multiple fields with the class ship_to_value but I would only like to select the input field.

Must also support pre-IE8

Answer 1

getElementsByClassName returns an array, as such you can access it by index:

var shipTo = document.getElementsByClassName('ship_to_value')[0];
shipTo.value = '';

If you have multiple elements with that class, you would need to implement your code in a loop:

var elements = document.getElementsByClassName('ship_to_value');
for (var i = 0; i < elements.length; i++) {
    elements[i].value = '';
}

I only want to select the fields that are input elements

In this case you would need to inspect the tagName property of the element first:

var elements = document.getElementsByClassName('ship_to_value');
for (var i = 0; i < elements.length; i++) {
    elements[i].tagName == 'INPUT' && (elements[i].value = '');
}

Example fiddle

Answer 2

您可能希望查看querySelector和querySelectorAll ，但是请注意检查那些链接中的支持网格。

var shipTo = document.querySelector('input.ship_to_value');

Answer 3

I prefer to use querySelectorAll with a prototype loop to iterate DOM elements.

Array.prototype.forEach.call(document.querySelectorAll("input.ship_to_value"), function(x) {
    x.value="";
});

Alternatively you can use [].forEach.call instead of Array.prototype.call