JavaScript HTML DOM 例 - JavaScriptでHTML要素を操作する
このチュートリアルでは、JavaScript HTML DOMを使用してHTML要素にアクセスし、操作する方法を例を挙げて説明します。要素の取得、要素の内容の変更、要素のスタイルの変更、要素イベントの処理などの実用的なテクニックを学習します。
1. HTML要素へのアクセス
ここでは、getElementById、getElementsByTagName、getElementsByClassNameなどのメソッドを使用してHTML要素を取得する方法について説明します。また、innerHTMLプロパティを使用して要素の内容を取得または変更する方法についても説明します。
1.1 getElementById
getElementByIdメソッドは、指定されたIDを持つ要素を返します。
<p id="myParagraph">これは段落です。</p>
<script>
const paragraph = document.getElementById("myParagraph");
console.log(paragraph.innerHTML); // "これは段落です。" を出力
</script>
1.2 getElementsByTagName
getElementsByTagNameメソッドは、指定されたタグ名を持つすべての要素のコレクションを返します。
<p>段落1</p>
<p>段落2</p>
<script>
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // 2 を出力
console.log(paragraphs[0].innerHTML); // "段落1" を出力
</script>
1.3 getElementsByClassName
getElementsByClassNameメソッドは、指定されたクラス名を持つすべての要素のコレクションを返します。
<p class="myClass">段落1</p>
<p>段落2</p>
<p class="myClass">段落3</p>
<script>
const myClassElements = document.getElementsByClassName("myClass");
console.log(myClassElements.length); // 2 を出力
</script>
1.4 innerHTML
innerHTMLプロパティは、要素の内容（HTMLを含む）を取得または設定します。
<p id="myParagraph">これは段落です。</p>
<script>
const paragraph = document.getElementById("myParagraph");
paragraph.innerHTML = "<strong>これは太字の段落です。</strong>";
</script>
2. HTML要素の変更
ここでは、JavaScriptを使用してHTML要素の属性（src、href、styleなど）を変更する方法、および新しいHTML要素を作成してページに追加する方法について説明します。
2.1 属性の変更
<img id="myImage" src="image1.jpg" alt="画像1">
<script>
const image = document.getElementById("myImage");
image.src = "image2.jpg"; // 画像のソースを変更
</script>
2.2 新しい要素の作成と追加
<ul id="myList"></ul>
<script>
const list = document.getElementById("myList");
const newItem = document.createElement("li"); // 新しいリストアイテムを作成
newItem.innerHTML = "新しいアイテム";
list.appendChild(newItem); // リストに新しいアイテムを追加
</script>
3. HTML要素のスタイルの変更
ここでは、JavaScriptを使用して要素のCSSスタイルを操作する方法について説明します。styleプロパティを直接変更する方法と、classNameプロパティを使用してスタイルクラスを切り替える方法について説明します。
3.1 styleプロパティの直接変更
<p id="myParagraph">これは段落です。</p>
<script>
const paragraph = document.getElementById("myParagraph");
paragraph.style.color = "red"; // テキストの色を赤に変更
paragraph.style.fontSize = "20px"; // フォントサイズを20pxに変更
</script>
3.2 classNameプロパティを使用したスタイルクラスの切り替え
<style>
.highlight {
background-color: yellow;
}
</style>
<p id="myParagraph">これは段落です。</p>
<script>
const paragraph = document.getElementById("myParagraph");
paragraph.className = "highlight"; // highlightクラスを追加
</script>
4. HTML DOMイベント
ここでは、onclick、onload、onmouseoverなどの一般的なHTML DOMイベントについて説明し、JavaScriptを使用してこれらのイベントをリッスンして処理し、動的なインタラクション効果を実現する方法を示します。
4.1 onclick
<button id="myButton">クリック</button>
<script>
const button = document.getElementById("myButton");
button.onclick = function() {
alert("ボタンがクリックされました！");
};
</script>
4.2 onload
<script>
window.onload = function() {
console.log("ページが読み込まれました。");
};
</script>
4.3 onmouseover
<p id="myParagraph">マウスを上に移動</p>
<script>
const paragraph = document.getElementById("myParagraph");
paragraph.onmouseover = function() {
this.style.backgroundColor = "yellow";
};
paragraph.onmouseout = function() {
this.style.backgroundColor = "";
};
</script>
まとめ
このチュートリアルでは、JavaScript HTML DOMを使用してHTML要素を操作する方法の基礎を学びました。要素の取得、内容の変更、スタイルの変更、イベント処理などの基本的な操作を理解することで、動的でインタラクティブなWebページを作成することができます。
関連情報
よくある質問
Q1: JavaScriptでHTML要素の内容を変更するにはどうすればよいですか？
A1: innerHTMLプロパティを使用します。例： element.innerHTML = "新しい内容";
Q2: 特定のクラス名を持つすべての要素を選択するにはどうすればよいですか？
A2: getElementsByClassNameメソッドを使用します。例： document.getElementsByClassName("クラス名");
Q3: ボタンクリックなどのイベントを処理するにはどうすればよいですか？
A3: イベントリスナーを使用します。例： button.addEventListener("click", function() { /* イベント処理 */ });