[Javascript] エレメントの属性情報を全て取得する。

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

Javascriptを使ってWEBサービスでページ内のエレメントをコントロールする時に、data属性(data-***)をうまく使う事で色々と柔軟な処理を行う事が可能になります。
先日記事で書いた、静的HTMLページにテンプレートHTMLを読み込んでjavascriptを実行させるようにするプログラムで、属性コントロールをもっと柔軟にするように改良する事ができたので、今回紹介したいと思います。
 

HTML静的ページで部分的な別ファイルのソースを読み込む方法
 

前回記事で紹介しているajax.jsの中のscriptタグの属性を「src」「class」「id」の3種類しか適応できていなかったので、その他の属性が入った場合は引き継がれない仕様でした。
 

そもそも、SCRIPTタグにそれ以外の属性が入るとは考えていなかったんですが、APIなどのWEBサービスでは、data-attributeはかなり使われている様なので、対応しておこうと思いました。

属性を全て取得するには

javascriptには、便利な機能が備わっており、「エレメント.attributes」で簡単にセットされている属性一覧が配列で取得されます。
 

その配列内にそれぞれ、「name」と「value」というobject形式で、格納されている仕様です。
 

 

上記で、取得されている事が確認できます。

ajax.jsを書き直す

とりあえず、前回記事の”ajax.js”を修正しておきました。
 

簡単解説

146行目あたりの属性判定していた箇所を、for文に書き換えています。
 

古いscriptタグ(tags.childNodes[0])を新しく作成したscriptタグ(newScript)に属性を全て適用しています。
 

さほど難しく無いコードなので、読んで理解してみてください。
※わかりにくければ、質問ください。
 

こうして、静的ページの読み込みajaxが非常に制度が向上しました。
 

この便利さに気がついているエンジニアの方、めちゃくちゃ高速なWEBサービスが作れることに気がつきましたか?

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です