JavaScriptのタグ名で取得/設定するサンプルです。
getElementsByTagNameメソッドを使用します。
目次
説明 | タグ名で取得/設定するメソッド |
サンプル | value値を取得/設定する+背景色を変える |
文字列の変更+文字列の表示/非表示 |
タグ名で取得/設定するメソッド
変数 = document.getElementsByTagName(タグ名); |
getElementsByTagNameメソッドは、タグ名を指定して要素(HTMLCollection)を取得します。
タグ名とは?
上記のhtmlの場合、赤字がタグ名です。
- タグ名・・・input,p
戻り値
- getElementsByTagNameメソッドの戻り値は、対象のHTMLCollection(※)です。
- 上記例のhtmlに対してgetElementsByTagName("input")とした場合、
戻りの変数.item(0)とすれば、要素(Element)である
「<input type="text" id="text1" value="赤" maxlength="5">」を取得できます。 - get(取得する) + Elements(要素) + By + TagName(タグ名によって)です。
- 注意ポイントは、Elementsと複数形なので要素を複数取得する場合があります。
- ※ HTMLレンダリングエンジンがWebKitのブラウザ(safari等)では NodeList を返します。
Google ChromeのHTMLレンダリングエンジンはBlinkです。
HTMLCollection
- HTMLCollectionとは、要素群の集合を表現したインターフェイスです。
- 以下は、HTMLCollectionのイメージです。
- メソッドとプロパティを使えます。
- 以下はMDNのHTMLCollectionのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection
似ている他のメソッド
ID属性がある場合は、getElementByIdで「HTMLCollection」ではなく「要素」を取得できます。
querySelectorやquerySelectorAllであればCSSのセレクタで「要素」を取得できます。
- JavaScript getElementById ID属性で取得/設定する
- JavaScript querySelector セレクタで要素を取得
- JavaScript querySelectorAll 複数要素を取得
value値を取得/設定する+背景色を変える
ボタンを押すとテキストボックス内の文字(value値)が変化し背景色が変わります。
上記サンプルのコードです。
<div id="div1">
<input type="text" value="赤" maxlength="6" />
<input type="text" value="赤" maxlength="6" />
</div>
<input type="button" value="変更" onclick="clickBtn1()" />
<script>
function clickBtn1() {
const div1 = document.getElementById("div1");
const input1 = div1.getElementsByTagName("input");
if (input1.item(0).value === "赤") {
for (let i = 0; i < input1.length; i++) {
input1.item(i).value = "青";
input1.item(i).style.background = "#87CEFA";
}
} else {
for (let i = 0; i < input1.length; i++) {
input1.item(i).value = "赤";
input1.item(i).style.background = "#FA8072";
}
}
}
</script>
5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv1です。
getElementsByTagNameメソッドの引数のinputは、2,3行目のinputタグを指します。複数の要素(オブジェクト)を取得します。
14,19行目は、valueに値を設定しています。
文字列の変更+文字列の表示/非表示
ボタンを押すと1行目の文字列が代わり2行目の文字列が表示と非表示で切り替わります。
赤
赤
テスト
上記サンプルのコードです。
<div id="div2">
<p>赤</p>
<p>赤</p>
</div>
<div id="div3">
<p>テスト</p>
</div>
<input type="button" value="変更" onclick="clickBtn2()" />
<script>
function clickBtn2() {
const div2 = document.getElementById("div2");
const p2 = div2.getElementsByTagName("p");
const div3 = document.getElementById("div3");
const p3 = div3.getElementsByTagName("p");
if (p2.item(0).textContent === "赤") {
for (let i = 0; i < p2.length; i++) {
p2.item(i).textContent = "青";
p3.item(i).style.visibility = "hidden"; //非表示
}
} else {
for (let i = 0; i < p2.length; i++) {
p2.item(i).textContent = "赤";
p3.item(i).style.visibility = "visible"; //表示
}
}
}
</script>
8行目のボタンを押すと11行目の関数を実行します。
13行目の先頭はdocumentではなく、12行目で取得したdiv2です。
getElementsByTagNameメソッドの引数のpは、2,3行目のpタグを指します。複数の要素(オブジェクト)を取得します。
19,24行目は、textContentに値を設定しています。
20,25行目は、文字列の表示と非表示を設定しています。
以下はMDNのgetElementsByTagNameメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
関連の記事
JavaScript getElementById ID属性で取得/設定する
JavaScript getElementsByClassName クラスで取得
JavaScript 全ての子の要素を取得/設定する(children)
JavaScript 属性値を取得/設定/削除する(getAttribute)