[JavaScript] HTMLタグに含まれる全属性を取得する

投稿日：2020年11月4日

HTMLタグに含まれる全属性を取得するには、.attributesを使用します。

サンプル

例）タグ（id="p1"）に含まれる全属性を取得する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タグの全属性を取得するサンプル</title>
<script>
function test(){

  //id="p1"タグのオブジェクトを取得し変数名objとする
  var obj = document.getElementById("p1");

  //objの属性一覧を取得する
  var arrAttrib = obj.attributes;

  //取得した属性の一覧をコンソールに出力する
  for (var objAttrib of arrAttrib) {
    console.log(objAttrib);
  }

}
</script>
</head>
<body>
  <p id="p1" align="center" class="cls">hoge</p>
  <input type="button" value="ボタン" onclick="test();">
</body>
</html>

<!DOCTYPE html>

<head>

<title>タグの全属性を取得するサンプル</title>

function test(){

//id="p1"タグのオブジェクトを取得し変数名objとする

var obj = document.getElementById("p1");

//objの属性一覧を取得する

var arrAttrib = obj.attributes;

//取得した属性の一覧をコンソールに出力する

for (var objAttrib of arrAttrib) {

console.log(objAttrib);

}

</script>

</head>

<body>

</body>

</html>

（結果）: id="p1" align="center" class="cls"

結果はコンソールに出力されます。

解説

pタグ（id="p1"）に指定されている属性「id」「align」「class」が表示されます。

[JavaScript] HTMLタグに含まれる全属性を取得する

サンプル

例）タグ（id="p1"）に含まれる全属性を取得する

解説

関連項目