Question

我的麻烦不在于清除输入字段的操作 - 我知道elem.value = ""我在Javascript中获取正确的选择器时遇到了更多麻烦。

虽然我的jQuery在网站上运行良好 - 所有其他功能都在Javascript中，所以我希望保持一致性，因为它并不困难。

以下是 jQuery ：

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

我在 Javascript 中尝试做的但是没有工作：

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

我可能需要先走另一个方向然后先获取输入字段，然后按类过滤？

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

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

课程ship_to_value有多个字段，但我只想选择input字段。

还必须支持IE8之前的

Answer 1

getElementsByClassName返回一个数组，因此您可以通过索引访问它：

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

如果您有多个具有该类的元素，则需要在循环中实现您的代码：

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

我只想选择输入元素的字段

在这种情况下，您需要首先检查元素的tagName属性：

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

我更喜欢使用querySelectorAll和原型循环来迭代DOM元素。

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

或者，您可以使用[].forEach.call代替Array.prototype.call

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

3 个答案: