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()などがあります。

例

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

2. スタイルの操作

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

例

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

3. 要素の操作

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

例

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

4. イベントの処理

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

例

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

5. クラスの操作

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

例

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

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

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

例

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

まとめ

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