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

HTML DOM getElementsByTagName（）メソッド

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

返されたHTMLcollectionは、いくつかの要素を削除または追加した後、getElementsByTagName（）メソッドを何度も呼び出さなくても、DOMツリーとの同期を維持します。

構文

以下は、getElementsByTagName（）メソッドの構文です-

element.getElementsByTagName(tagname)

ここで、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（）メソッド

変更ボタンをクリックすると-

HTML DOM getElementsByTagName（）メソッド

上記の例では-

属性が関連付けられていない2つの段落を作成しました-

<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（）メソッドは、ドキュメントオブジェクトに対してgetElementsByTagName（）メソッドを使用して、両方の

要素をnodeListObjectとして取得し、それを変数pに割り当てます。インデックス番号を使用して、最初の段落のテキストを変更し、2番目の段落にスタイルを適用します-

function changePara() {
   var p = document.getElementsByClassName("PARA1");
   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（）メソッドは、要素に属性があるかどうかをチェックします。要素に属性が含まれている場合はtrueを返し、含まない場合はfalseを返します。このメソッドが要素ノード以外のノードで呼び出された場合、戻り値は常にfalseになります。 構文 以下は、hasAttribbutes（）メソッドの構文です- node.hasAttributes() 例 hasAttributes（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>hasAttributes(

  2. HTML DOM focus（）メソッド

    HTML DOM focus（）メソッドは、HTML要素にフォーカスを与えるために使用されます。フォーカスをすべてのHTML要素に適用することはできません。例：タグにフォーカスすることはできません。要素からフォーカスを削除するには、blur（）メソッドを使用します。 構文 以下は構文です- HTMLElementObject.focus() 例 focus（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <style>    input[type=text]:focus, p: