JavaScript「id名から中身を取得する方法」

タグについたid名で取得しよう

こんにちは、徳です。

デジタルDIYができるようコーディング・プログラミング・画像加工・動画編集などを本やYouTubeで勉強しています。

現在は初心者なので、とにかくゆっくり進んでいくと思います。

また、「間違っていること」や「こうした方が良いよ」などがあれば、コメントなどしていただけたら幸いです。

では、いきましょう！

JavaScript

今回は、

id名から中身を取得する方法

を紹介させていただきます。

JavaScriptでは、HTML内の要素を変更することでWebページに動きをつけることができます。

DOM操作の流れとしては、

このように、先にHTMLの中にある要素を変数に入れる必要があります。

その一つの方法が、

id名から中身を取得すること

です。

それではよろしくお願いします。

id名から中身を取得する

id名から中身を取得するとは

id名から中身を取得するとは、

タグについたid名から中身をJavaScriptで取り出して変数に代入する

ということです。

なぜ取得する必要があるの?

JavaScriptではDOM操作と言って、HTMLの中身を変えることでWebページに動くをつけることができます。

しかし、JavaScriptで値を変えるには変数に代入する必要があります。

なぜなら、変数に代入できれば他の値を代入して戻すことでコードが変わるからです。

つまり、

このようにすることでHTMLが変わります。

どんなときに使用するの?

id名から中身を取得するのは、

HTMLからid名で中身を取得したいとき

に使用します。

使うメソッド

id名から中身を取得するには、

• document.querySelector()メソッド
• document.getElementById()メソッド

を使用します。

document.querySelector()メソッド

書き方

let 変数名 = document.querySelector("#id名");

document.getElementById()メソッド

書き方

let 変数名 = document.getElementById("id名");

例

document.querySelector()メソッド

let ele = document.querySelector("#name");

console.log(ele);

document.getElementById()メソッド

let ele = document.getElementById("name");

console.log(ele);

まとめ

今回は、

id名から中身を取得する方法

について紹介させていただきました。

こちらは、DOM操作でHTMLのタグの要素を変数に代入するために使用します。

DOM操作は、JavaScriptでのメインの使い方になるので使いながら慣れていきましょう。

最後まで読んでいただき、ありがとうございました。