HTMLデータ取得

2023-08-092025-02-19

JavaScriptでHTMLタグの情報を取得し、ブラウザ上で表示する方法をご紹介します。

HTML

上記のコードでは、HTMLファイルとJavaScriptファイルを分けています。HTMLファイルで<script>要素を使用して外部のJavaScriptファイルを読み込んでいます。

JavaScript

JavaScriptファイルでは、DOMContentLoadedイベントを使用して、DOMが完全に読み込まれた後に処理を開始するようにしています。これにより、HTML要素がまだ読み込まれていないタイミングでJavaScriptが実行されることを防ぎます。

そして、同じくJavaScriptファイル内でDOM要素を取得し、ボタンのクリックイベントをリスニングして、入力フィールドの値を取得してコンソールに表示する処理を行っています。

このようにすることで、コードがより構造化され、保守性が高まります。

コードの実行

コード

CopyCode

    <!DOCTYPE html>

    <html>
    
    <head>

        <title>Value Retrieval Example</title>

    </head>
    
    <body>

        <input type="text" id="nameInput" value="John Doe">

        <button id="submitButton">Submit</button>
    
        <!-- 外部のJavaScriptファイルを読み込む -->

        <script src="script.js"></script>

    </body>

    </html>


　（今回は空ファイルです。）

            
    document.addEventListener("DOMContentLoaded", function() {

        var nameInput = document.getElementById("nameInput");
    
        var submitButton = document.getElementById("submitButton");
    
        submitButton.addEventListener("click", function() {
    
            var inputValue = nameInput.value;

            console.log("入力された値: " + inputValue);
            
        });

    });