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

DOM要素を取得してconsole.logでコンソールに出力する方法【JavaScript入門】

JavaScriptでDOMに関連する変数をコンソールに表示したい場合、document.getElementById("")を使用して対象の要素を取得し、その結果をconsole.log()で出力します。

この記事では、実際のコード例を使って、DOM要素をコンソールにログとして表示する手順をわかりやすく解説します。

コード例

以下は、テキスト入力フィールドのDOM要素を取得してコンソールに表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   <input type="text" id="printTheData" value="My Name is David">
</body>
<script>
   const data = document.getElementById("printTheData");
   console.log(data);
</script> 
</html>

プログラムの実行方法

上記のコードを任意のファイル名（例：index.html）で保存します。次に、VS Codeエディタ上でファイルを右クリックし、「Open with Live Server」を選択すると、ブラウザでページが開かれます。

ページが表示されたら、キーボードのF12キー（または右クリック→「検証」）を押して開発者ツールを開き、「Console」タブを確認してください。

実行結果

実行結果は以下のとおりです。

DOM要素を取得してconsole.logでコンソールに出力する方法【JavaScript入門】

コンソールへの出力は次のようになります。

DOM要素を取得してconsole.logでコンソールに出力する方法【JavaScript入門】

このように、console.log()の出力には、指定したIDを持つHTMLInputElementオブジェクトが表示されます。ここには、value値（「My Name is David」）やid属性、type属性など、要素に関するさまざまな情報が含まれています。

補足：要素の値だけを出力したい場合

要素全体ではなく、入力フィールドの値のみを表示したい場合は、.valueプロパティを利用します。

console.log(data.value); // 出力: My Name is David

用途に応じて、要素そのものを出力するか、特定のプロパティを出力するかを選びましょう。

  1. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

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

    console.log()メソッドとはHTML DOMのconsole.log()メソッドは、メッセージをブラウザのコンソールに出力するために使用されるメソッドです。コンソールは主にデバッグやテストの目的で活用され、開発者がコードの動作を確認する際に欠かせないツールとなっています。出力できるメッセージは文字列型だけでなく、オブジェクト型や配列なども扱えるため、変数の中身を手軽にチェックできるのが特徴です。基本構文console.logメソッドの構文は以下のとおりです。console.log(msg)引数のmsgには、文字列・配列・オブジェクトなど任意の値を指定できます。また、カンマで区切ること