Вы не можете вызвать document.getElementsByTagName() по результатам .getElementsByClassName(), потому что .getElementsByClassName() возвращает «список узлов», а список узлов не имеет свойства document. Но вы могли бы сделать это:
favoriteBeer = document.getElementsByClassName('favoriteBeer').getElementsByTagName('input');
Поскольку большинство методов запроса DOM можно вызывать на document, узле или списке узлов.
Тем не менее, .getElementsByClassName() и .getElementsByTagName() оба возвращают "живые" списки узлов, что означает, что каждый раз, когда вы ссылаетесь на переменную, которой вы присвоили результаты, весь документ необходимо повторно сканировать, чтобы убедиться, что вы получите самые актуальные результаты. Это полезно только тогда, когда у вас есть элементы, которые создаются / уничтожаются динамически. Если вы не работаете с таким кодом, использование этих методов не рекомендуется, поскольку они очень расточительны с точки зрения производительности.
Теперь, так как вы используете JQuery, вы должны использовать его последовательно. Просто передайте действительный селектор CSS в объект JQuery для сканирования DOM на предмет соответствия элементов.
Итак, вы можете просто передать имя класса в JQuery, чтобы получить набор ссылок на ваши DOM-объекты, а затем получить свойство value этих input элементов. Но вам нужно подождать, чтобы запустить этот код, пока пользователь не сможет ввести некоторые данные. Я добавил в ваш код элемент button, который вы можете щелкнуть, когда будете готовы увидеть входные значения.
$("button").on("click", function(){
// Just passing a valid CSS selector to the JQuery object will
// return a JQuery "wrapped set" of all matching elements.
// Then, the .each() method takes a function that will automatically
// be passed the index of the current element being iterated, a DOM reference
// to the element itself, and a reference to the wrapped set (not used here).
$('.favoriteBeer').each(function(index, element) {
// You can use the element argument inside of the .each() loop
// or you can use the "this" keyword to get the same DOM reference
console.log(element.value, this.value);
});
});
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Favorite Food</th>
<th>Favorite Beer</th>
</tr>
</thead>
<tbody>
<tr class='tableRow'>
<td>John</td>
<td>30</td>
<td><label><input type="radio" name="favoriteFood1"/>Pizza</label><label><input type="radio" name="favoriteFood1" />Tacos</label>
<td><input type="text" class="favoriteBeer"></td>
</tr>
<tr class='tableRow'>
<td>Joe</td>
<td>25</td>
<td><label><input type="radio" name="favoriteFood2"/>Pizza</label><label><input type="radio" name="favoriteFood2" />Tacos</label>
<td><input type="text" class="favoriteBeer"></td>
</tr>
<tr class='tableRow'>
<td>Sam</td>
<td>50</td>
<td><label><input type="radio" name="favoriteFood3"/>Pizza</label><label><input type="radio" name="favoriteFood3" />Tacos</label>
<td><input type="text" class="favoriteBeer"></td>
</tr>
</tbody>
</table>
<button type="button">Get Data</button>