JavaScript/DOM/Element

Element（エレメント）

Elementオブジェクトは、DOM（Document Object Model）において、HTMLやXML文書内の各要素を表すオブジェクトです。Elementは、ウェブページの構造を形成する基本的な単位であり、JavaScriptで操作することで、ページの内容を動的に変更することができます。

Elementオブジェクトの役割

Elementオブジェクトは、DOMツリー内の各HTMLまたはXML要素を表します。例えば、<div>, <p>, <span>などの要素は、それぞれElementオブジェクトとしてJavaScriptで扱うことができます。これにより、要素のプロパティやスタイル、イベントの操作が可能になります。

主な機能

1. 属性の操作

Elementオブジェクトは、HTML要素の属性にアクセスしたり、変更したりするためのメソッドを提供します。例えば、getAttribute(), setAttribute(), removeAttribute()などがあります。

例

const element = document.getElementById("myElement");
console.log(element.getAttribute("class")); // class属性を取得
element.setAttribute("class", "newClass"); // class属性を変更 
element.removeAttribute("id"); // id属性を削除

2. スタイルの操作

Elementオブジェクトでは、CSSスタイルを操作することができます。styleプロパティを使用して、インラインスタイルを設定したり変更したりできます。

例

const element = document.getElementById("myElement");
element.style.backgroundColor = "red"; // 背景色を赤に変更 
element.style.fontSize = "20px"; // フォントサイズを20pxに変更

3. 要素の操作

Elementオブジェクトは、要素の子要素を操作するためのメソッドも提供しています。appendChild(), removeChild(), replaceChild()などで、要素の追加・削除・置換ができます。

例

const parentElement = document.getElementById("parent");
const newElement = document.createElement("div");
newElement.textContent = "新しい要素";
parentElement.appendChild(newElement); // 新しい要素を追加

4. イベントの処理

Elementオブジェクトは、個々のHTML要素に対してイベントリスナーを設定することができます。addEventListener()メソッドを使って、クリックやキーボードイベントなどを処理することができます。

例

const element = document.getElementById("myElement");
element.addEventListener("click", () => alert("要素がクリックされました"));

5. クラスの操作

Elementオブジェクトでは、要素のクラスを操作するためのメソッドも提供されます。classListプロパティを使って、クラスを追加、削除、切り替えなどが可能です。

例

const element = document.getElementById("myElement");
element.classList.add("newClass"); // クラスを追加 
element.classList.remove("oldClass"); // クラスを削除 
element.classList.toggle("active"); // クラスを切り替え

ElementオブジェクトとDocumentオブジェクト

Documentオブジェクトは、ページ全体を表すのに対し、Elementオブジェクトは、その中の各HTML要素を表します。Documentオブジェクトを使ってElementオブジェクトを取得し、それらを操作することができます。

例

const element = document.getElementById("myElement");
console.log(element.tagName);  // 要素のタグ名を取得

まとめ

Elementオブジェクトは、DOMツリー内のHTMLやXMLの各要素を表現するオブジェクトであり、ページの内容を操作するための基本的なインターフェースを提供します。Elementオブジェクトを使うことで、属性やスタイル、子要素の操作、イベントの設定など、動的なウェブページの作成が可能となります。 このWikitextでは、Elementオブジェクトの役割や主な機能について、具体的なコード例を交えて説明しています。