使用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选择器 。 您可以使用的选择器仅限于执行此代码的浏览器。保持简单。

这两种方法比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（ qty ），并通过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 （ 注意在Element之后有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"

演示