JavaScript
この記事では「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オブジェクトの操作を行っていきます。