HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのgetElementsByTagName()メソッドとは？使い方を徹底解説

HTML DOM getElementsByTagName()メソッドとは

HTML DOM の getElementsByTagName() メソッドは、ドキュメント内から指定したタグ名を持つすべての要素のコレクションを取得するためのメソッドです。該当する要素は NodeList オブジェクトとして返され、インデックス番号を指定することで、コレクション内の任意の要素にアクセスできます。

また、このメソッドが返す HTMLCollection は常に DOM ツリーと同期しています。そのため、要素を追加・削除した後も、getElementsByTagName() を何度も呼び直すことなく、最新の状態が反映されたコレクションを参照できます。

構文

getElementsByTagName() メソッドの構文は以下のとおりです。

element.getElementsByTagName(tagname)

tagname は必須パラメータで、取得したい子要素のタグ名を指定します。

使用例

getElementsByTagName() メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<script>
   function changePara() {
      var p = document.getElementsByTagName("P");
      p[0].innerHTML = "This text has been changed";
      p[1].style.color = "red";
      p[1].style.backgroundColor = "yellow";
   }
</script>
</head>
<body>
<h1>getElementsByTagName() example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのgetElementsByTagName()メソッドとは？使い方を徹底解説

「CHANGE」ボタンをクリックすると、以下のように表示が変化します。

HTML DOMのgetElementsByTagName()メソッドとは？使い方を徹底解説

コードの解説

まず、属性を持たない2つの段落（<p> 要素）を作成しました。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

次に、ユーザーがクリックすると changePara() 関数を実行する「CHANGE」ボタンを作成しています。

<button onclick="changePara()">CHANGE</button>

changePara() 関数では、document オブジェクトに対して getElementsByTagName() メソッドを呼び出し、2つの <p> 要素を NodeList オブジェクトとして変数 p に代入しています。その後、インデックス番号を使って、1つ目の段落のテキスト内容を変更し、2つ目の段落には文字色や背景色などのスタイルを適用しています。

function changePara() {
   var p = document.getElementsByTagName("P");
   p[0].innerHTML = "This text has been changed";
   p[1].style.color = "red";
   p[1].style.backgroundColor = "yellow";
}
  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや