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

HTML DOM console.groupCollapsed()メソッド


HTML DOM console.groupCollapsed()メソッドは、折りたたまれたメッセージグループの開始を指定します。

構文

以下は構文です-

console.groupCollapsed(label)

ここで、labelはグループのラベルです。

console.groupCollapsed()メソッドの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>console.groupCollapsed() Method</h1>
<p>Press F12 key to view the message in the console view.</p>
<button type="button" onclick="normMessage>NORMAL</button>
<button type="button" onclick="CollMessage()">COLLAPSED</button>
<script>
   function normMessage(){
      console.log("Hello world!");
   }
   function CollMessage(){
      console.groupCollapsed();
      console.log("This message will be inside a collapsed group!");
      console.log("This message will also be inside a collapsed group!");
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTML DOM console.groupCollapsed()メソッド

NORMALボタンをクリックし、開発者向けオプションのコンソールビューを確認すると-

HTML DOM console.groupCollapsed()メソッド

COLLAPSEDボタンをクリックし、開発者向けオプションのコンソールビューを確認すると-

HTML DOM console.groupCollapsed()メソッド

COLLAPSEDボタンをクリックし、開発者向けオプションのコンソールビューを確認すると-

上記の例では-

ユーザーがクリックするとColllMessage()メソッドとgroupMessage()メソッドを実行する2つのボタンCOLLAPSEDとGROUPを作成しました。

<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="CollMessage()">COLLAPSED</button>

normMessage()メソッドにはconsole.log()メソッドがあり、パラメーターとして提供された文字列またはオブジェクトを受け取り、それをコンソールに表示するだけです。

function normMessage(){
   console.log("Hello world!");
}

CollMessage()メソッドにはconsole.groupCollapsed()メソッドがあり、この時点以降に書き込まれるすべてのメッセージが折りたたまれたメッセージグループ内に表示されることを示しています。 group()メソッドのデフォルトの拡張ビューとは異なり、メッセージはメッセージグループ内で折りたたまれます-

function CollMessage(){
   console.groupCollapsed();
   console.log("This message will be inside a collapsed group!");
   console.log("This message will also be inside a collapsed group!");
}

  1. HTML DOM console.groupEnd()メソッド

    HTML DOM console.groupEnd()メソッドは、メッセージグループの終わりを示すために使用されます。コンソールの現在のメッセージグループを終了します。 構文 Follwingは、console.groupEnd()メソッドの構文です- console.groupEnd() 例 HTML DOM console.groupEnd()メソッドの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>console.groupEnd() Method</h1> <p>Pre

  2. HTML DOM createEvent()メソッド

    HTML DOM createEvent()メソッドは、パラメーターでタイプが指定されるイベントオブジェクトを作成するために使用されます。作成されたイベントは、使用する前に初期化する必要があります。イベントをHTML要素にディスパッチするには、その指定されたノードでdispatchEvent()メソッドを使用する必要があります。 構文 以下は、HTML DOM createEvent()メソッドの構文です- document.createEvent( eventType ) ここで、typestringtypeのeventTypeは必須パラメーターです。イベントのタイプは、Animatio