javascript 使用javascript通过其类名获取元素的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22612056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the value of element using javascript by its class name
提问by Souf
hi everyone I have an element like this :
大家好，我有一个这样的元素：
<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" />
i have tried to get the value using this line
我试图使用这条线获得价值
document.getElementByClassName('input-text qty').value="myvalue"
but that didn't work
但这没有用
how can I get the value without jquery? note : I've included prototype.js in my project !
如何在没有 jquery 的情况下获取值？注意：我在我的项目中包含了prototype.js！
what about this one too :
这个也怎么样：
<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>
I want to disable it using Javascript and by its class name !!!?
我想使用 Javascript 及其类名禁用它！！！？
回答by Sampson
You might be looking for querySelector:
您可能正在寻找querySelector：
document.querySelector( ".input-text.qty" );
This returns a single item, rather than a NodeList. If you would like a NodeList instead, use the alternative querySelectorAll. Keep in mind that these methods take CSS Selectors. The selectors you can use are limited to the browser this code is executed in. Keep it simple.
这将返回单个项目，而不是 NodeList。如果您想要一个 NodeList，请使用替代querySelectorAll. 请记住，这些方法采用CSS Selectors。您可以使用的选择器仅限于执行此代码的浏览器。保持简单。
These two methods have better browser support than getElementsByClassName, so I would encourage you to use them instead of taking your current approach.
这两种方法比 具有更好的浏览器支持getElementsByClassName，因此我鼓励您使用它们而不是采用当前的方法。
Demo:
演示：
回答by Walter
Since you are using Prototype in the page already, you may find this element using the "double-dollar" method:
由于您已经在页面中使用 Prototype，您可能会使用“double-dollar”方法找到此元素：
$$('.input-text.qty');
As others have pointed out above, this returns an array of matched elements (or an empty array, if you don't have anything on the page that matches). So the easiest way to do anything to the result is with invoke():
正如其他人在上面指出的那样，这将返回一个匹配元素的数组（或一个空数组，如果页面上没有匹配的任何内容）。因此，对结果执行任何操作的最简单方法是使用 invoke()：
$$('.input-text.qty').invoke('setValue', 'myvalue');
or
或者
$$('.input-text.qty').invoke('disable');
Any of the Prototype Element methods can be invoked in this manner. If you want to do something custom to the element(s) based on some attribute, you can use each() instead:
可以通过这种方式调用任何原型元素方法。如果您想根据某些属性对元素进行自定义，则可以使用 each() 代替：
$$('.input-text.qty').each(function(elm){
if (elm.frobber == 'froom') elm.remove();
});
回答by tymeJV
Firstly, its getElementsByClassName(elementsis plural) -- this will return an array of elements that satisfy the condition. You must specify the index of the array to modify the element properties:
首先，它的getElementsByClassName(elements是复数) —— 这将返回一个满足条件的元素数组。您必须指定数组的索引才能修改元素属性：
document.getElementsByClassName('input-text qty')[0].value="myvalue"
回答by Suman Bogati
getElementByClassName()returns the array of matched elements, so to acces the first element of array use 0index like
getElementByClassName()返回匹配元素的数组，因此访问数组的第一个元素使用0索引
document.getElementsByClassName('input-text qty')[0].value="myvalue";
Or
或者
You can use the id(qty) from input tag, and put the value on this tag by getElementById()something like
您可以使用输入标签中的 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";
回答by xdazz
You have id="qty"so forget class, just use
你已经id="qty"忘记了class，只需使用
document.getElementById('qty').value = "myvalue";
Which is most efficient.
哪个效率最高。
Other dom native methods like getElementsByClassName/TagName(note there are safter Element) returns an array like object NodeList.
其他 dom 本机方法getElementsByClassName/TagName（注意s在 Element 之后）返回一个类似 object 的数组NodeList。
You need to use index or loop to access it.
您需要使用索引或循环来访问它。
回答by Farkhat Mikhalko
You error is that you using:
你的错误是你使用：
1) getElementByClassNameinstead of getElementsByClassName
1)getElementByClassName而不是getElementsByClassName
2) getElementsByClassNamereturns array so you must get [0] element
2)getElementsByClassName返回数组所以你必须得到 [0] 元素
So try this one:
所以试试这个：
var p = document.getElementsByClassName('input-text qty')
console.log(p[0])
p[0].value = "MyValue"
