javascriptで特定の要素の子要素の取得

Question

前提・実現したいこと

Internet Explorerで動作させるwebサイト内で、とあるテーブル内のtrのtd内にselectやinputがあり、それをtrごとにループさせて値を取得するのをネイティブなjavascriptで実現したいのですがうまくいきません。

該当のソースコード

<table>
	<tr class="hoge">
		<td>
			<select class="fuga">
				<option value="1">りんご</option>
				<option value="2">みかん</option>
				<option value="3">なし</option>
			</select>

		</td>
		<td>
			<input class="piyo"/>
		</td>
	</tr>
</table>

試したこと

javascriptでは以下のコードのように試しました。

var trs = document.getElementsByClassName('hoge');
for (var i = 0;i < trs.length;i++) {
	var select = trs[i].getElementsByClassName('fuga');
	console.log(select.value);
	var input = trs[i].getElementsByName('piyo');
	console.log(input.value);
}

console.log(select.value);
はundefinedとなり、
var input = trs[i].getElementsByName('piyo');
に至っては
オブジェクトは 'getElementsByName' プロパティまたはメソッドをサポートしていません。
のエラーが発生しています。

jQueryを使用できない環境なので、find等が使えず困っています。
最終的には、全てのtr要素のselectとinputの値を取得してサーバ側にリクエストを行うプログラムを作成するつもりです。
すみませんが、よろしくお願い致します。

追記

大事なことを記載し忘れていました。
tr要素は可変で、1行のこともあれば100行のこともあります。
1つだけであれば、回答いただいたように直接取得してしまえばいい話だと思いますが、
trをループさせたうえで要素の値を取得する必要があると思い質問させていただきました。
よろしくお願い致します。

Comments

[Lhankor_Mhy]

typoです。
× getElementByClassName
○ getElementsByClassName

Answer 1

同じクラスで複数の要素がないならループの必要はないですね

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#btn').addEventListener('click',function(e){
    console.log(document.querySelector('#t1').querySelector('select.fuga').value);
    console.log(document.querySelector('#t1').querySelector('input.piyo').value);
  });
a});
</script>
<table id="t1">
    <tr class="hoge">
        <td>
            <select class="fuga">
                <option value="1">りんご</option>
                <option value="2">みかん</option>
                <option value="3">なし</option>
            </select>

        </td>
        <td>
            <input class="piyo"/>
        </td>
    </tr>
</table>
<input type="button" value="check" id="btn">

Comments

[yambejp]

テーブルを指定するため#t1を指示していますが、いきなりselect.fugaやinput.piyoでもいけます
さらに言えばselectもinputも一つずつしかないしfugaもpiyoも一つずつしかないので
document.querySelector('select')
document.querySelector('input')
document.querySelector('.fuga)
document.querySelector('.piyo')
などアクセスのしかたはいくつもあります

Answer 2

すでにご存知のようですが、getElementsByClassName()は要素を返しません。ArrayライクなHTMLCollectionを返します。

Element.getElementsByClassName() メソッドは、引数で与えられたクラス名を含む全ての 子要素を ライブな HTMLCollectionで返します。

Element.getElementsByClassName() | MDN

なので、select.valueと直接valueを参照することができません。配列のように扱ってください。

また、ElementにはgetElementsByName()メソッドがありません。
Element | MDN
これはDocumentのメソッドです。
代替としてquerySelectorメソッドなどを使うのがいいかと思います。
Element.querySelector() | MDN

Comments

[Begi]

配列として扱うことで求めていた結果が取得できました。
ありがとうございました。

Answer 3

全てのtr要素のselectとinputの値を取得してサーバ側にリクエストを行うプログラムを作成するつもりです。

であれば、全ての要素に被らないnameをつけてformで送信すれば良いのでは。
nameつけないとformで送信できないのでサーバ側でも受け取れないはず。