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 要素を文字列に変換して返す。

classNameプロパティ

要素のクラス名は、elementObject.classNameで参照することができる。

要素のクラス名を参照するJavaScriptのサンプルコードを次に示す。

<p id="pre01" class="samp">要素</p>
<script  type="text/javascript">
<!--
    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

スポンサーリンク