Warum bekomme ich `undefiniert` bei Verwendung von` document.getElementsByClassName (...). Value`?

Question

Warum bekomme ich undefined als Ergebnis von console.log(tes_val)? Wie kann ich es reparieren?

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">

Danke.

Answer 1

getElementsByClassName gibt ein HTMLCollection, so um zuerst gefunden Element in dieser Sammlung zugreifen Sie [0] Index verwenden müssen:

var tes_val = tes[0].value; 

Dies ist jedoch ungeschickte Weise API zu verwenden.

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

Answer 2

getElementsByClassName(...) gibt eine Liste der Elemente: Wenn Sie daran interessiert sind nur in dem ersten Element mit Klasse a_b_1 Verwendung Document.querySelector Methode. Beachten Sie den Plural s im Namen der Methode! Verwenden Sie getElementsByClassName(...)[0], um auf das erste Element in der Liste zuzugreifen.

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 arrayartigen Gegenstand aller Kindelemente.

So haben Sie das spezifische Element wählen, indem Sie den 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">

Verwenden .val() für jquery vorbei