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

HTMLDOM属性プロパティ

HTMLタグ内の属性に関連付けられたHTMLDOM属性プロパティは、NamedNodeMapタイプのオブジェクトの形式で特定のノードの属性のコレクションを返します。これらのノードにアクセスするには、インデックス番号を使用できます。インデックス作成は0から始まります。

構文

以下は、HTMLDOM属性プロパティの構文です-

node.attributes

例

属性プロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<p>Click the button the second attribute of the below list</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>

出力

これにより、次の出力が生成されます-

HTMLDOM属性プロパティ

ATTRNAMEボタンをクリックした後-

HTMLDOM属性プロパティ

ATTRLENGTHボタンをクリックした後-

HTMLDOM属性プロパティ

上記の例では-

最初に、属性ID、タイプ、および逆属性を使用して順序付きリストを作成しました。

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

次に、2つのボタンATTRNAMEとATTRLENGTHを作成して、それぞれ関数attributeFunc（）とattrLength（）を実行しました。

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

attributeFunc（）関数は、IDが「LIST」に関連付けられている要素を取得し、attributes.nameプロパティを使用して2番目の属性名を取得します。次に、2番目のインデックスの属性名がID「Sample」-

の段落に表示されます。 
function attributeFunc() {
   var x = document.getElementById("LIST").attributes[2].name;
   document.getElementById("SAMPLE").innerHTML = x;
}

attrLenght（）関数は、IDが「LIST」に関連付けられている要素も取得し、attributes.lengthを使用して特定の要素が持つ属性の数を取得します。この場合は4を返します。次に、値4がIDSAMPLE-

の段落に表示されます。 
function attrLength(){
   var x = document.getElementById("LIST").attributes.length;
   document.getElementById("SAMPLE").innerHTML = x;
}

  1. HTMLDOMtextContentプロパティ

    HTML DOM textContentプロパティは、ノードとそのすべての子ノードのテキスト（空白を含む）に対応する文字列を返す/設定します。 以下は構文です- 文字列値を返す Node.textContent ここで、戻り値は次のようになります- ドキュメントノードの「Null」 指定されたノードとそのすべての子ノードのテキスト textContentを文字列値に設定します Node.textContent = string 注：HTML DOM textContent プロパティは、ノードと子ノードのテキストを単一のテキスト文字列として設定します。 HTML DOM

  2. HTMLDOMOlタイププロパティ

    HTML DOM Ol typeプロパティは、順序付きリストで使用されるマーカーのタイプに対応するtype属性の値を設定/返します。 以下は構文です- タイププロパティを返す olObject.type 設定タイプ キャラクターに olObject.type = ‘1|a|A|i|I’ Olタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol type</title> <style>   &n