JavaScript

JavaScript element object.

element

　Elementオブジェクトとは、HTML/XML要素を内包したオブジェクトになります。Elementでは属性の管理とスタイル属性を保有しています。

Elementオブジェクトの一例

　主に下記の様なオブジェクトを内包しています。

• Button
• Checkbox
• FileUpload
• Hidden
• Password
• Radio
• Reset
• Text
• Textarea
• Submit
• Select
• Option

Elementオブジェクトのプロパティの一例

　上記のオブジェクトにはそれぞれにプロパティが設定されていますが、共通なプロパティもあります。

id

要素の ID（id属性の値）

className

要素のクラス（class属性の値）

innerHTML

要素の内容

className

要素のクラス（class属性の値）

clientHeight

要素の表示されている部分の高さ

clientWidth

要素の表示されている部分の幅

style

要素のスタイル（style属性の値）

childNodes

要素の子ノード

　上記は代表的なもので、もっとたくさんのプロパティがあります。

Elementオブジェクトの取得方法

　Elementオブジェクトの取得方法にはいくつか方法があります。まずは、一般的な方法としてオブジェクトの IDやクラス名を指定して取る方法です。

<p id="element_id" class="element_class">test</p>

//IDを指定する場合
var id_elm = document.getElementById("element_id");

//クラス名を指定する場合
var class_elm = document.getElementByClassName("element_class");

　このほかにも、「document.querySelector()」という関数もあります。これは、IDでも CLASSでも使えるのですが、IDの場合は ”#element_id”、CLASSの場合は ”.element_class” で指定する必要があります。

　ここでは、取得方法のみを紹介しましたが、新しいオブジェクトを作成する「createElement」や逆に子要素を削除する「removeChild」などもあります。これらを利用し、Elementオブジェクトの操作を行っていきます。