JavaScriptでHTML要素にID属性を追加する方法

このシンプルなコードスニペットを使えば、JavaScriptだけで既存のHTML要素にID属性を追加できます。CSSでのスタイリングや、JavaScriptによるイベント処理のフックとして活用できる便利なテクニックです。

コード

let featuredTitle = document.querySelector("h1");
featuredTitle.id = "featured-title";

コードの解説

動画内で行っている処理は以下の通りです。

• まず、document.querySelector("h1")でWebページ上のh1要素を取得し、featuredTitleという変数に代入します。
• 次に、ドット記法(変数名.属性)を使って、その要素にID属性を設定します。ここではfeaturedTitle.idとし、値として'featured-title'を指定しています。

この方法は、DOM内の任意の既存要素に対して使用できます。h1に限らず、divやp、buttonなど、どんな要素にも同じ手順でIDを付与できます。

setAttribute()メソッドを使う代替手段

ID属性を追加するもう一つの方法として、setAttribute()メソッドを使うこともできます。

let featuredTitle = document.querySelector("h1");
featuredTitle.setAttribute("id", "featured-title");

どちらの方法でも結果は同じですが、ドット記法の方がコードが短く、直感的で読みやすいというメリットがあります。

追加したIDの活用方法

動的に作成したIDは、次のような用途に活用できます。

• CSSでのスタイリング: 新しく付けたIDをセレクタとして使い、特定の要素だけにスタイルを適用できます。
• JavaScriptでのイベント処理: クリックイベントなどのインタラクティブな挙動を、IDを基準に簡単に紐づけられます。

HTML側のコードを変更せずに、JavaScriptから柔軟に要素へIDを付与できるので、動的なWebページの構築において非常に役立つテクニックです。