JavaScript elementオブジェクト
JavaScriptのelementオブジェクトはHTML及びXHTMLの要素を表現するオブジェクトであり、DOMのHTMLElementインタフェースが実装されている。
elementオブジェクトのプロパティ
| プロパティ | 説明 |
|---|---|
| accessKey | 要素のアクセスキー |
| attribute | 要素の属性(NamedNodeMap) |
| childNodes | 要素の子ノード(NodeList) |
| className | 要素のクラス(class属性の値) |
| clientHeight | 要素の表示されている部分の高さ |
| clientWidth | 要素の表示されている部分の幅 |
| dir | 要素のテキストの方向 |
| firstChild | 要素の最初の子 |
| id | 要素のID(id属性の値) |
| innerHTML | 要素の内容 |
| lang | 要素の言語コード |
| lastChild | 要素の最後の子 |
| namespaceURI | 要素の名前空間URI |
| nextSibling | 要素と同じノードツリー階層の次のノード |
| nodeName | 要素の名前(name属性の値) |
| nodeType | 要素のノードタイプ |
| nodeValue | 要素の値 |
| ownerDocument | ルート要素(Documentオブジェクト) |
| parentNode | 要素の親ノード |
| previousSibling | 要素と同じノードツリー階層の前の要素 |
| scrollHeight | 要素全体の高さ |
| scrollLeft | 左にスクロールされている要素のピクセル数 |
| scrollTop | 上にスクロールされている要素のピクセル数 |
| scrollWidth | 要素全体の幅 |
| style | 要素のスタイル(style属性の値) |
| tabIndex | 要素のタブ順序 |
| tagName | 要素のタグ名 |
| textContent | ノードとその子孫のテキスト内容 |
| title | 要素のタイトル(title属性の値) |
elementオブジェクトのメソッド
| メソッド | 説明 |
|---|---|
| appendChild | 要素の最後の子ノードに新たに子ノードを追加する。 |
| cloneNode | 要素のクローン |
| compareDocumentPosition | 2つの要素のドキュメントの位置を比較する。 |
| dispatchEvent | イベントを発生させる。 |
| getAttribute | 指定した属性の値を返す。 |
| getAttibuteNode | 指定した属性ノードを返す。 |
| getElementsByTagName | 指定したタグ名の子要素のコレクションを返す。 |
| hasAttribute | 指定した属性を要素が持つかどうかを返す。 |
| hasAttributes | 要素が何らかの属性を持つかどうかを返す。 |
| hasChildNodes | 要素が何らかの子ノードを持つかどうかを返す。 |
| insertBefore | 子ノードを指定した要素の前に挿入する。 |
| isDefaultNamespace | 指定した名前空間がデフォルトかどうかを返す。 |
| isEqualNode | 2つの要素が等しいかどうかを返す。 |
| isSameNode | 2つの要素が同じノードかどうかを返す。 |
| removeAttribute | 指定した属性を要素から削除する。 |
| removeAttributeNode | 指定した属性ノードを削除して、削除したノードを返す。 |
| removeChild | 指定した子ノードを要素から削除する。 |
| replaceChild | 要素の子ノードを置き換える。 |
| setAttribute | 指定した属性に値を設定する。 |
| setAttributeNode | 指定した属性ノードを設定する。 |
| toString | 要素を文字列に変換して返す。 |
removeChild
removeChildは指定した子ノードを要素から削除するメソッドである。
JavaScriptでHTMLの子要素をすべて削除する例を示す。
var element = document.getElementById("result");
// 最初の子要素があれば繰り返す
while (element.firstChild) {
// 最初の子要素を削除する
element.removeChild(element.firstChild);
}classNameプロパティ
要素のクラス名は、elementObject.classNameで参照することができる。
要素のクラス名を参照するJavaScriptのサンプルコードを次に示す。
<p id="pre01" class="samp">要素</p>
<script>
var element = document.getElementById('pre01');
document.write("<p>要素のクラス名は" + element.className + "です。</p>");
</script>上記のJavaScriptサンプルコードの実行例を次に示す。
要素
また、elementObject.classNameに値を設定することによって、要素のクラス名を変更できる。
scrollTopプロパティ
現在の縦スクロール位置
document.getElementById('id').scrollTop
scrollHeightプロパティ
スクロール要素の高さ
document.getElementById('id').scrollHeight
scrollLeftプロパティ
現在の横スクロール位置
document.getElementById('id').scrollLeft
scrollWidthプロパティ
スクロール要素の横幅
document.getElementById('id').scrollWidth
一番下までスクロールさせる例
document.getElementById('div1').scrollTop = document.getElementById('div1').scrollHeight