JavaScriptでHTML要素を操作する
JavaScriptを使用してHTMLの要素を取得、追加、修正、削除する方法について説明します。
これらの技術は、ウェブページを動的に制御するために頻繁に使用されます。
HTML要素の取得方法
JavaScriptでHTML要素を取得する基本的な方法は、documentオブジェクトのメソッドを使用することです。
ここでは、"getElementById"、"getElementsByClassName"、"getElementsByTagName"、そして"querySelector"と"querySelectorAll"の使用方法を見ていきましょう。
ソースコード例
HTML
|
1 2 |
<div id="myDiv" class="myClass">Hello, world!</div> <div class="myClass">Another div</div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// IDで要素を取得 let elementById = document.getElementById('myDiv'); console.log(elementById); // クラス名で要素を取得 let elementsByClassName = document.getElementsByClassName('myClass'); console.log(elementsByClassName); // タグ名で要素を取得 let divs = document.getElementsByTagName('div'); console.log(divs); // querySelectorとquerySelectorAll let firstDiv = document.querySelector('div'); console.log(firstDiv); let allDivs = document.querySelectorAll('div'); console.log(allDivs); |
出力結果Hello, world!HTMLCollection(2) [div#myDiv.myClass, div.myClass] HTMLCollection(2) [div#myDiv.myClass, div.myClass]Hello, world!NodeList(2) [div#myDiv.myClass, div.myClass]
HTML要素の追加、修正、削除
取得したHTML要素は、JavaScriptを使って自由に操作することができます。
ここでは、要素の追加、修正、削除の方法を見ていきましょう。
ソースコード例
HTML
|
1 |
<div id="myDiv">Hello, world!</div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 要素の取得 let myDiv = document.getElementById('myDiv'); // 要素の修正 myDiv.textContent = 'Hello, JavaScript!'; // 要素の追加 let newElement = document.createElement('p'); newElement.textContent = 'I am a new element.'; myDiv.appendChild(newElement); // 要素の削除 myDiv.removeChild(newElement); |
出力結果 Hello, JavaScript! I am a new element. Hello, JavaScript! 
ループ処理による複数取得
JavaScriptでは、ループ処理を使用して複数の要素を一度に取得することができます。
これは、特定のクラス名を持つすべての要素に対して同じ操作を行いたいときなどに非常に便利です。
ソースコード例
HTML
|
1 2 |
<div class="myClass">Hello, world!</div> <div class="myClass">Another div</div> |
JavaScript
|
1 2 3 4 5 6 7 |
// クラス名で要素を取得 let elements = document.getElementsByClassName('myClass'); // ループを使用してすべての要素を操作 for (let i = 0; i < elements.length; i++) { elements[i].textContent = 'Modified by JavaScript!'; } |
出力結果
Modified by JavaScript! Modified by JavaScript! 
要素のスタイルの変更
JavaScriptを使ってHTML要素のスタイルを動的に変更することもできます。
これにより、ユーザーのアクションに応じて見た目を変えることが可能になります。
ソースコード例
HTML
|
1 |
<div id="myDiv2">Hello, world!</div> |
JavaScript
|
1 2 3 4 5 |
// 要素の取得 let myDiv2 = document.getElementById('myDiv2'); // スタイルの変更 myDiv2.style.color = 'red'; |
上記のコードでは、指定した要素のテキストカラーを赤に変更しています。
イベントリスナーの追加
JavaScriptでは、特定のイベントが発生したときに実行される関数を設定することができます。これを「イベントリスナー」の追加と言います。
例えば、ボタンがクリックされたときに何かの処理を行いたい場合、以下のようなコードを書くことができます。
ソースコード例
HTML
|
1 |
<button id="myButton">Click me!</button> |
JavaScript
|
1 2 3 4 5 6 7 |
// 要素の取得 let myButton = document.getElementById('myButton'); // イベントリスナーの追加 myButton.addEventListener('click', function() { alert('Button clicked!'); }); |
上記のコードでは、ボタンがクリックされたときにアラートが表示されるようになります。
出力結果
クリックしたら、「Button clicked!」とアラートが表示されます。
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
まとめ
この記事では、JavaScriptを使ってHTML要素を操作する方法について学びました。
要素の取得、追加、修正、削除、複数取得、イベントリスナーの追加、スタイルの変更など、多彩な操作が可能であることがわかりました。
これらの知識を活用して、動的でインタラクティブなウェブページを作成しましょう。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
