HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのattributesプロパティとは？使い方をサンプルコード付きで解説

HTML DOMのattributesプロパティは、HTMLタグ内に含まれる属性に関連付けられたプロパティで、指定したノードが持つすべての属性をNamedNodeMap型のオブジェクトとしてコレクション形式で返します。このコレクション内の各ノードには、インデックス番号を使ってアクセスできます。インデックスは0から始まる点に注意してください。

構文（Syntax）

HTML DOM attributesプロパティの構文は以下の通りです。

node.attributes

サンプルコード

attributesプロパティの実際の使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p>ボタンをクリックすると、下のリストの2番目の属性名を表示します</p>
<button id="Btn" onclick="attributeFunc()">ATTR NAME</button>
<button id="Btn" onclick="attrLength()">ATTR LENGTH</button>
<ol id="LIST" type="A" start="5" reversed>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>
<p id="SAMPLE"></p>
<script>
    function attributeFunc() {
        var x = document.getElementById("LIST").attributes[2].name;
        document.getElementById("SAMPLE").innerHTML = x;
    }
    function attrLength(){
        var x = document.getElementById("LIST").attributes.length;
        document.getElementById("SAMPLE").innerHTML = x;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOMのattributesプロパティとは？使い方をサンプルコード付きで解説

ATTR NAMEボタンをクリックした後：

HTML DOMのattributesプロパティとは？使い方をサンプルコード付きで解説

ATTR LENGTHボタンをクリックした後：

HTML DOMのattributesプロパティとは？使い方をサンプルコード付きで解説

コードの解説

上記の例では、以下のような処理を行っています。

1. 属性を持つ順序付きリストの作成

まず、id、type、start、reversedという属性を持つ順序付きリスト（ol要素）を作成しました。

<ol id="LIST" type="A" start="5" reversed>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>

2. ボタンの作成と関数の割り当て

次に、それぞれattributeFunc()関数とattrLength()関数を実行するための2つのボタン「ATTR NAME」と「ATTR LENGTH」を作成しました。

<button id="Btn" onclick="attributeFunc()">ATTR NAME</button>
<button id="Btn" onclick="attrLength()">ATTR LENGTH</button>

3. attributeFunc()関数 ― 指定インデックスの属性名を取得

attributeFunc()関数では、getElementById()メソッドでid「LIST」の要素を取得し、attributes.nameプロパティを使ってその要素の2番目（インデックス2）の属性名を取得しています。取得した属性名は、id「SAMPLE」の段落要素に表示されます。

function attributeFunc() {
    var x = document.getElementById("LIST").attributes[2].name;
    document.getElementById("SAMPLE").innerHTML = x;
}

この例の場合、リスト要素の属性は「id」「type」「start」「reversed」の4つあるため、インデックス2に該当するのは3番目の属性である「start」が表示されます。

4. attrLength()関数 ― 属性の総数を取得

attrLength()関数も同様に、id「LIST」の要素を取得した後、attributes.lengthを使用してその要素が持つ属性の総数を取得します。この例では属性が4つあるため、戻り値は「4」となり、その値がid「SAMPLE」の段落要素に表示されます。

function attrLength(){
    var x = document.getElementById("LIST").attributes.length;
    document.getElementById("SAMPLE").innerHTML = x;
}

まとめ

attributesプロパティを使えば、HTML要素が持つすべての属性情報をNamedNodeMapオブジェクトとして一括取得できます。インデックスによる個別アクセスや、lengthプロパティによる属性数の確認など、動的にDOMの属性を操作したい場面で非常に便利な機能です。

  1. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ

  2. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1