【HTML】HTML上の要素[id、class、name]を一覧化(リスト化)する方法【ツール】

HTML
2023.05.22

はじめに

idは重複してないか、このnameは使用済みか、このclassの修正をする際の影響範囲は。。など確認をしたい場合は以下の方法で確認できます。

HTML上の要素[id、class、name]を一覧化(リスト化)する方法です。

HTML上の要素[id、class、name]を一覧化(リスト化)する方法

一覧化(リスト化)ツール作成

まずは、一覧化するためのHTMLを作成します。

以下のソースをコピーしテキストエディタへ貼付け、保存してください。(ファイル名は任意、拡張子は.html)

以下HTMLの★部分へ要素を一覧化(リスト化)したいHTMLのBody部を貼り付けます。

<html>
    <head>
        <script>
window.onload = function onLoad() {

  var classList = Array.prototype.reduce.call(document.querySelectorAll('[class]'), (classList, element) => (Array.prototype.push.apply(classList, element.classList), classList), []);
  classList = classList.filter(function (x, i, self) {return self.indexOf(x) === i;});

  for(var i=0;i<classList.length;i++){
    console.log('class : ('+ i +')',classList[i]);
  }

  var y = document.querySelectorAll("[id]");
  for(var i=0;i<y.length;i++){
    console.log('id : ('+ i + ')',y[i].id,' <' + y[i].nodeName + '>');
  }

  var z = document.querySelectorAll("[name]");
  for(var i=0;i<z.length;i++){
    console.log('name : ('+ i + ')',z[i].name,' <' + z[i].nodeName + '>');
  }

}
       </script>
    </head>


    <body>

<!-- ★ここへHTMLのbody部を貼り付ける -->

    </body>
</html>

一覧化(リスト化)実施方法

  1. ブラウザを開く
  2. 作成した一覧化(リスト化)用htmlファイルをブラウザへドラッグ＆ドロップ
  3. F12でデベロッパーツールを開き、コンソールを表示
緑網掛け：id、黄色網掛け：class、青網掛け：name

上記のHTMLの場合は以下のようにコンソールに出力されます。

表示されていない場合はF5を押して更新して下さい。

右側：F12デベロッパーツールのコンソールへ要素[id、class、name]が一覧化(リスト化)される

保存したい場合は、コンソールの出力結果を右クリックし「Save as…」で保存できます。

要素[id、class、name]とは？

HTMLのid、class、およびnameは、要素に対して識別子や属性を指定するための属性です。これらの属性は、ウェブページの構造やスタイリング、JavaScriptの操作などで使用されます。
以下にそれぞれの属性について説明します。

  1. id属性:
    • id属性は、HTML要素を一意に識別するための識別子を指定します。各要素には異なるidを持つ必要があります。
    • id属性はJavaScriptから要素を操作するために使用され、CSSスタイルを適用するためにも使用されます。例えば、<div id="myDiv">という要素は、JavaScriptでdocument.getElementById("myDiv")としてアクセスできます。
<div id="myDiv">これはid属性を持つ要素です。</div>
  1. class属性:
    • class属性は、複数の要素に同じスタイルや操作を適用するための共通のクラス名を指定します。複数の要素が同じクラス名を持つことができます。
    • class属性はCSSスタイルの適用に広く使用され、JavaScriptを介して複数の要素を選択および操作するためにも使用されます。クラス名はスペースで区切られることが一般的です。
<p class="highlight">これはクラス属性を持つ要素です。</p>
<p class="highlight">同じクラス属性を持つ別の要素です。</p>
  1. name属性:
    • name属性は、フォーム要素内のコントロール（例: input、select、textarea）に名前を割り当てるために使用されます。
    • この属性は、フォームデータをサーバーに送信するときに、各コントロールの名前と値の組み合わせを識別します。また、JavaScriptでフォーム要素内のコントロールをアクセスするのにも使用されます。
<form>
 <input type="text" name="username" value="John">
 <input type="password" name="password">
 <input type="submit" value="Submit">
</form>

要素にid、class、nameを適切に設定することで、ウェブページのスタイリングや操作、フォームデータの処理などが効率的に行えます。また、JavaScriptやCSSを使用してこれらの属性を操作することで、ウェブページの動的な挙動を実現できます。

まとめ

HTML上の要素[id、class、name]を一覧化(リスト化)する方法を説明しました。

idの重複チェックやclass修正時の影響範囲確認の際に便利です。

コメント

タイトルとURLをコピーしました