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

HTML DOM getElementsByClassName（）メソッド

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

構文

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

document.getElementsByClassName(classname)

ここで、クラス名は、アクセスする要素のクラス名を示す文字列型です。複数のクラス名は、スペースで区切って検索することもできます。

例

getElementsByClassName（）メソッドの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<script>
   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";
   }
</script>
</head>
<body>
<h1>getElementsByClassName() example</h1>
<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p class="PARA1"> 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 getElementsByClassName（）メソッド

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

HTML DOM getElementsByClassName（）メソッド

上記の例では-

classname =” PARA1”が関連付けられた2つの段落を作成しました。

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

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

要素を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: