HTML(DOM)の名前による要素の選択
前回の投稿ではDOMのid要素により、javascriptから要素を取得する方法を試しましたが、
name属性でも同様に要素を取得できるので試してみます。
例えば、HTMLソースが以下の場合の要素「test_youso2」を取得してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<h3>タイトル</h3>
<p name="test_dom2">テスト要素2</p>
<script type="text/javascript">
let test_dom2 = document.getElementsByName('test_dom2');
console.log("test_dom2 -> " + test_dom2);
</script>
</body>
</html>
また、HTMLソース内のname属性は、そのソース内で一意である必要はなく、重複して構成されていても問題はありません。
上記HTMLにブラウザでアクセスすると、javascriptが実行され、コンソールログにはNodeListオブジェクトが出力されます。
NodeListオブジェクトは一見すると配列のように見えますが、配列オブジェクトとは異なります。Arrayオブジェクトではないとも言えます。
NodeListオブジェクトでは、itemメソッドとlengthプロパティが使えます。
itemメソッドはNodeListオブジェクトのインデックスとして作用し、lengthプロパティは、取得できたオブジェクトの個数を返します。