JS Element オブジェクト (要素オブジェクト)

「ドキュメント オブジェクト モデル」セクションの調査を通じて、Web ページが読み込まれると、ブラウザは現在のページのドキュメント オブジェクト モデル (DOM) を自動的に作成し、ドキュメントのすべての部分 (要素、属性、テキストなど) 論理ツリー構造を形成します (家系図に似ています). 論理ツリーの各枝の終点はノードと呼ばれ, 各ノードにはオブジェクトが含まれています. このオブジェクトは要素オブジェクトです.このセクションで紹介します。

 

Element オブジェクトは、Document オブジェクトで提供されるメソッド (getElementsByTagName()、getElementById()、getElementsByClassName() など) を使用して取得でき、一連のメソッドとプロパティも Element オブジェクトで提供されて操作されます。ドキュメントまたは要素プロパティの要素。

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

JavaScript Element オブジェクトで提供されるプロパティとその説明を次の表に示します。

属性	説明
element.accessKey	ラジオ ボタンにアクセスするためのショートカット キーを設定または返します
element.attributes	要素の属性の配列を返します
element.childNodes	要素の 1 つの子ノードの配列を返します
element.children	要素内の子要素のコレクションを返します
element.classList	要素内のクラス名で構成されるオブジェクトを返します
element.className	要素のクラス属性を設定または返す
element.clientHeight	コンテンツの視覚的な高さを返します (境界線、マージン、スクロールバーは含みません)
element.clientWidth	コンテンツの視覚的な幅を返します (境界線、マージン、スクロールバーは含みません)
element.contentEditable	要素のコンテンツが編集可能かどうかを設定または返します
element.dir	要素内のテキストの方向を設定または返します
element.firstChild	要素の最初の子要素を返します
element.id	要素の ID を設定または返す
element.innerHTML	要素のコンテンツを設定または返す
element.isContentEditable	要素のコンテンツが編集可能かどうかを返します。編集可能な場合は true、そうでない場合は false
element.lang	要素の言語を設定または返す
element.lastChild	要素の最後の子要素を返します
element.namespaceURI	名前空間の URI を返します
element.nextSibling	指定された要素の後の兄弟要素を返します。2 つの要素は DOM ツリーで同じレベルにあります (テキスト ノード、コメント ノードを含む)。
element.nextElementSibling	指定された要素の後の兄弟要素を返します。この 2 つの要素は DOM ツリーで同じレベルにあります (テキスト ノードとコメント ノードを除く)。
element.nodeName	要素名を返します (大文字)
element.nodeType	要素のノード タイプを返します
element.nodeValue	要素のノード値を返します
element.offsetHeight	要素の高さを返します。これには、境界線とパディングが含まれますが、マージンは含まれません。
element.offsetWidth	ボーダーとパディングを含み、マージンを除く要素の幅を返します
element.offsetLeft	水平方向の要素のオフセットを返します
element.offsetParent	この要素に最も近い位置にある親要素を返します
element.offsetTop	要素の垂直方向のオフセットを返します
element.ownerDocument	要素のルート要素 (ドキュメント オブジェクト) を返します
element.parentNode	要素の親ノードを返します
element.previousSibling	要素の前の兄弟要素を返します。2 つの要素は DOM ツリーで同じレベルにあります (テキスト ノード、コメント ノードを含む)。
element.previousElementSibling	要素の前の兄弟要素を返します。2 つの要素は DOM ツリーで同じレベルにあります (テキスト ノード、コメント ノードを除く)。
element.scrollHeight	要素の全高を返します (スクロールバーによって隠されている部分を含む)
element.scrollLeft	要素のスクロール バーから要素の左側までの距離を設定または返します
element.scrollTop	要素の上にある要素のスクロール バーからの距離を設定または返します
element.scrollWidth	要素の全幅を返します (スクロールバーによって隠されている部分を含む)
element.style	要素のスタイル属性を設定または返します
element.tabIndex	要素のラベル順序を設定または返す
element.tagName	要素の名前を文字 (大文字) で返します。
element.textContent	要素とそのテキスト コンテンツを設定または返す
element.title	要素のタイトル属性を設定または返します
element.length	オブジェクトの長さを返します

Element オブジェクトのメソッド

JavaScript Element オブジェクトで提供されるメソッドとその説明を次の表に示します。

方法	説明
element.addEventListener()	指定された要素のイベントを定義します
element.appendChild()	要素に新しい子要素を追加します
element.cloneNode()	要素を複製する
element.compareDocumentPosition()	現在の要素の位置をドキュメント内の指定された要素と比較すると、戻り値は次のようになります。   1: 2 つの要素に関係がなく、同じドキュメントに属していないことを示します。 2: 現在の要素が指定された要素の後にあることを示します。 4: 現在の要素は、指定された要素の前にあります。 8: 現在の要素は指定された要素内にあります。 16: 指定された要素は現在の要素内にあります。 32: 2 つの要素に関係がないか、同じ要素の 2 つの属性です。
element.focus()	要素にフォーカスする
element.getAttribute()	指定した要素の属性値を属性名で取得する
element.getAttributeNode()	属性名から指定された要素の属性ノードを取得します
element.getElementsByTagName()	タグ名で現在の要素の下にあるすべての子要素のコレクションを取得します
element.getElementsByClassName()	現在の要素の下にある子要素のコレクションをクラス名で取得します
element.hasAttribute()	要素が指定された属性を持つかどうかを判断し、存在する場合は true を返し、存在しない場合は false を返します。
element.hasAttributes()	要素に属性があるかどうかを判断し、存在する場合は true を返し、存在しない場合は false を返します。
element.hasChildNodes()	要素に子要素があるかどうかを判断し、ある場合は true を返し、子要素がない場合は false を返します。
element.hasFocus()	要素にフォーカスがあるかどうかを判断する
element.insertBefore()	既存の子要素の前に新しい子要素を挿入する
element.isDefaultNamespace()	指定された namespaceURI がデフォルトの場合は true、そうでない場合は false を返します。
element.isEqualNode()	2 つの要素が等しいかどうか調べます
element.isSameNode()	現在の要素が指定された要素と同じ要素かどうかを確認します
element.isSupported()	現在の要素が機能をサポートしているかどうかを判断する
element.normalize()	隣接するテキスト ノードを結合し、空のテキスト ノードを削除する
element.querySelector()	CSS セレクタに従って最初に一致する要素を返します
document.querySelectorAll()	CSSセレクタに従って、一致するすべての要素を返します
element.removeAttribute()	指定された属性を要素から削除します
element.removeAttributeNode()	指定された属性ノードを要素から削除します
element.removeChild()	子要素を削除する
element.removeEventListener()	addEventListener() メソッドによって追加されたイベントを削除する
element.replaceChild()	子要素を置き換える
element.setAttribute()	指定されたプロパティの値を設定または変更します
element.setAttributeNode()	指定された属性ノードを設定または変更します
element.setUserData()	要素内の指定されたキーにオブジェクトを関連付けます
element.toString()	要素を文字列に変換する
nodelist.item()	ドキュメント ツリーに基づいて要素のインデックスを返します

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body onload="accesskey()">
    <a id="r" class="aaa bbb ccc" href="javascript:;">Alt + rでアクセス</a><br>
    <a id="g" href="javascript:;">Alt + gでアクセス</a>
    <script type="text/javascript">
        function accesskey(){
            document.getElementById('r').accessKey="r"
            document.getElementById('g').accessKey="g"
        }
        var ele = document.getElementById('r');
        console.log(ele.attributes);                            // 出力：NamedNodeMap {0: id, 1: href, id: id, href: href, length: 2}
        console.log(document.body.childNodes);                  // 出力：NodeList(7) [text, a#r, br, text, a#g, text, script]
        console.log(ele.classList);                             // 出力：DOMTokenList(3) ["aaa", "bbb", "ccc", value: "aaa bbb ccc"]
        console.log(ele.className);                             // 出力：aaa bbb ccc
        console.log(ele.clientHeight);                          // 出力：DOMTokenList(3) ["aaa", "bbb", "ccc", value: "aaa bbb ccc"]
        console.log(ele.tagName);                               // 出力：A
        console.log(ele.compareDocumentPosition(document.getElementById('g')));     // 出力：4
        console.log(ele.getAttribute('href'));                  // 出力：javascript:;
        console.log(ele.getAttributeNode('href'));              // 出力：href="javascript:;"
    </script>
</body>
</html> 

実行結果は次の図のとおりです。