UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#276 JavaScript DOM操作 getElementByIdに関して

記入日:2023-10-11 編集日:2023-10-11

JavaScript DOM操作 getElementByIdに関して解説をしてみようと思います。

この記事を読むと(約5分)
JavaScript DOM操作 getElementByIdに関してイメージできます。

JavaScript DOM操作 getElementById

JavaScriptにおけるDOM操作の一つであるgetElementByIdメソッドは、指定したID属性を持つ要素を取得するために使用されます。 以下に、具体的な事例を交えながらgetElementByIdメソッドの使い方を解説します。

事例 1: HTMLの構造
まずは、次のような簡単なHTMLの例を考えましょう。

<!DOCTYPE html>
<html>
<head>
    <title>getElementByIdの事例</title>
</head>
<body>
    <h1 id="main-heading">メインタイトル</h1>
    <p>これは段落です。</p>
    <button id="my-button">クリック</button>
</body>
上記のHTMLでは、<h1>要素にmain-headingというIDが、<button>要素にmy-buttonというIDが指定されています。

事例 2: getElementByIdを使って要素を取得
JavaScriptでgetElementByIdを使って上記の要素を取得する方法は次の通りです。

// h1要素を取得
var headingElement = document.getElementById('main-heading');

// button要素を取得
var buttonElement = document.getElementById('my-button');
上記のコードでは、まずgetElementByIdメソッドを使ってmain-headingというIDを持つ要素を取得し、それをheadingElementという変数に代入しています。同様に、my-buttonというIDを持つ要素を取得し、buttonElementに代入しています。

事例 3: 取得した要素の操作
取得した要素に対して操作を行うことができます。例えば、テキストを変更する場合は以下のようになります。

// headingElementのテキストを変更
headingElement.innerText = '新しいタイトル';

// buttonElementのテキストを変更
buttonElement.innerText = 'クリックしてください';

事例 4: イベントリスナーの追加
取得した要素に対してイベントリスナーを追加することもできます。例えば、ボタンがクリックされたときにアラートを表示する場合は次のようになります。

buttonElement.addEventListener('click', function() {
    alert('ボタンがクリックされました!');
});

まとめ
以上がgetElementByIdメソッドの基本的な使い方です。このメソッドを使うことで、特定のIDを持つ要素を取得し、それに対してさまざまな操作を行うことができます。この例では単純なHTMLを使用しましたが、実際のプロジェクトではより複雑な構造を持つことが一般的です。それに対応するためにも、getElementByIdは非常に便利なメソッドです。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。