JavaScriptを利用して指定したNameのHTML要素 (DOMオブジェクト) を取得するコードを紹介します。
概要
指定したNameのHTML要素(DOMオブジェクト)を取得する場合は documentオブジェクトの
getElementsByName メソッドを利用します。
HTMLのidはHTMLファイル中の要素に重複なく指定する仕様のため、idを指定すれば1つの要素が取得できますが、Nameは複数の要素に同じ値を設定できるため、
Nameを指定した場合には複数の要素が取得される場合があります。
書式
document.getElementsByName("[取得する要素のName]");
第一引数に与えたIDの要素の配列を戻り値として返します。複数の要素が取得される場合もあるため、戻り値は配列になります。
要素がない場合は null を返します。一般的には戻り値を変数に代入して利用します。
プログラム例
コード
下記のHTMLファイルを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.divelem{
border:1px solid #ff6a00;
width:240px;
margin: 0.5rem 0 0 0;
}
-->
</style>
<script type="text/javascript">
function onButtonClick() {
var elems = document.getElementsByName("category2div");
var outelem = document.getElementById("output");
elems.forEach(function (value, index, data) {
value.style.borderColor = "#007bba";
outelem.innerHTML = outelem.innerHTML + "</br>" + value.innerHTML;
});
}
</script>
</head>
<body>
<div class="divelem" name="category1div" id="elem1">これは要素1です</div>
<div class="divelem" name="category2div" id="elem2">これは要素2です</div>
<div class="divelem" name="category1div" id="elem3">これは要素3です</div>
<div class="divelem" name="category2div" id="elem4">これは要素4です</div>
<div class="divelem" name="category1div" id="elem5">これは要素5です</div>
<div class="divelem" name="category2div" id="elem6">これは要素6です</div>
<hr />
<input type="button" onclick="onButtonClick();" value="Exec" />
<hr />
<div id="output"></div>
</body>
</html>
IDが
elem1 elem2 elem3 elem4 elem5 elem6 の6つのDIV枠と、出力用のIDが
output の枠を用意します。また、ボタンを配置しています。
ボタンをクリックすると
onButtonClick()関数を実行します。
onButtonClick関数では、Name=category2div の要素を取得します。今回の例では3つの要素が取得されます。また、出力用の id=output の要素も取得します。
getElementsByName メソッドの戻り値は配列で戻るため、forEach関数を利用して配列の個々の要素を処理します。
取得した個々の要素のボーダーカラーを "#007bba" に変更し、内部のHTMLを output の内部HTMLに設定します。複数要素がありますので output要素のHTMLには該当した要素のHTMLを追記します。
function onButtonClick() {
var elems = document.getElementsByName("category2div");
var outelem = document.getElementById("output");
elems.forEach(function (value, index, data) {
value.style.borderColor = "#007bba";
outelem.innerHTML = outelem.innerHTML + "</br>" + value.innerHTML;
});
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Exec]ボタンをクリックします。"category2div" が設定されている「要素2」「要素4」「要素6」の枠の色が青色に変わります。また、それぞれの要素の中のテキストが、
ページ下部の出力枠に表示されることも確認できます。
Nameを指定して、該当する要素を取得して要素の操作をする処理が実装できました。
補足 : ループ処理
上記コードでは、forEach文を利用していますが、オーソドックスなfor分を利用して処理を記述する場合のonButtonClick()関数は下記になります。
function onButtonClick() {
var elems = document.getElementsByName("category2div");
var outelem = document.getElementById("output");
for (i = 0; i < elems.length; i++) {
elems[i].style.borderColor = "#007bba";
outelem.innerHTML = outelem.innerHTML + "</br>" + elems[i].innerHTML;
}
}
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-04-11
作成日: 2021-02-01
