为什么在使用document.getElementsByClassName（…）.value时出现undefined？

Question

Why do I get undefined as result of console.log(tes_val) ? How can I fix it?

 var tes = document.getElementsByClassName('a_b_1'); var tes_val = tes.value; console.log(tes_val); 

 <input type="hidden" class="a_b_1" name="c_d_1" value="1|2|3"> 

Thank you.

Answer 1

getElementsByClassName returns an HTMLCollection , so in order to access first found element in this collection you need to use [0] index:

var tes_val = tes[0].value;

However, this is clumsy way to use API. If you are only interested in the first element with class a_b_1 use Document.querySelector method:

var tes = document.querySelector('.a_b_1');
var tes_val = tes.value;
console.log(tes_val);

Answer 2

getElementsByClassName(...) returns a list of elements. Note the plural s in the name of the method! Use getElementsByClassName(...)[0] to access the first element in the list.

 var tes = document.getElementsByClassName('a_b_1')[0] var tes_val = tes.value console.log(tes_val) //=> "1|2|3" 

 <input type="hidden" class="a_b_1" name="c_d_1" value="1|2|3"> 

Answer 3

document.getElementsByClassName array-like object of all child elements.

So you have to select the specific element by passing the index

var tes = document.getElementsByClassName('a_b_1');
var tes_val = tes[0].value;
console.log(tes_val);

DEMO

Answer 4

 var tes = $('.a_b_1'); var tes_val = tes.val(); console.log(tes_val); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="hidden" class="a_b_1" name="c_d_1" value="1|2|3"> 

Use .val() for jquery