爲什麼在使用`document.getElementsByClassName（...）.value`時會得到'undefined`？

Question

爲什麼在console.log(tes_val)的結果中獲得undefined？我該如何解決它？

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

謝謝。

Answer 1

getElementsByClassName返回HTMLCollection，所以爲了訪問第一個找到的元素在此集合，你需要使用[0]指數：

var tes_val = tes[0].value; 

然而，這是使用API​​笨拙的方式。如果你只在第一個元素類a_b_1使用Document.querySelector方法感興趣：

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

Answer 2

getElementsByClassName(...)返回元素的列表。請注意方法名稱中的複數s！使用getElementsByClassName(...)[0]訪問列表中的第一個元素。

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陣列狀物體。

所以，你必須通過將指數

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

使用.val() jQuery的