使用javascript按类名获取元素的值

Question

大家好我有这样的元素：

<div class="price-box">
     <span class="regular-price" id="product-price-27">
        <span class="price">
           ...
        </span>
      </span>

 </div>

<input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" />

我试图使用此行获取值

document.getElementByClassName('input-text qty').value="myvalue"

但这不起作用

如何在没有jquery的情况下获取值？ 注意：我在项目中包含了prototype.js！

这个也是如此：

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>

我想使用Javascript及其类名!!!？

禁用它

Answer 1

您可能正在寻找querySelector：

document.querySelector( ".input-text.qty" );

这将返回单个项目，而不是NodeList。如果您想要NodeList，请使用替代querySelectorAll。请记住，这些方法需要CSS Selectors。您可以使用的选择器仅限于执行此代码的浏览器。保持简单。

这两种方法比getElementsByClassName具有更好的浏览器支持，所以我建议您使用它们而不是采用当前的方法。

演示：

Answer 2

由于您已在页面中使用Prototype，因此您可以使用“double-dollar”方法找到此元素：

$$('.input-text.qty');

正如其他人在上面指出的那样，这会返回一个匹配元素的数组（如果页面上没有任何匹配的元素，则返回一个空数组）。因此，对结果做任何事情的最简单方法是使用invoke（）：

$$('.input-text.qty').invoke('setValue', 'myvalue');

或

$$('.input-text.qty').invoke('disable');

可以用这种方式调用任何Prototype Element方法。如果你想根据某个属性为元素做一些自定义的事情，你可以改为使用each（）：

$$('.input-text.qty').each(function(elm){
  if (elm.frobber == 'froom') elm.remove();
});

Answer 3

首先，它的getElementsByClassName（elements是复数） - 这将返回满足条件的元素数组。您必须指定数组的索引以修改元素属性：

document.getElementsByClassName('input-text qty')[0].value="myvalue"

Answer 4

getElementByClassName()返回匹配元素的数组，因此要访问数组的第一个元素0索引，如

document.getElementsByClassName('input-text qty')[0].value="myvalue";

或

您可以使用输入标记中的ID（数量），并将值放在此标记上getElementById()之类的内容

<input  type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" />

document.getElementById('qty').value="myvalue";

Answer 5

您id="qty"忘了class，只需使用

document.getElementById('qty').value = "myvalue";

哪种效率最高。

其他dom原生方法，例如getElementsByClassName/TagName（注意元素后面有s）会返回类似对象NodeList的数组。

您需要使用索引或循环来访问它。

Answer 6

您的错误是您使用：

1）getElementByClassName而不是getElementsByClassName

2）getElementsByClassName返回数组，因此必须得到[0]元素

所以试试这个：

var p = document.getElementsByClassName('input-text qty')
console.log(p[0])
p[0].value = "MyValue"

Demo