芝生やDIY等のライフハックやWeb制作情報を発信するメディア

メニューを開く

【意外と知らない】jQueryで別ページのhtmlを取得してDOM操作する方法

Web2018年3月23日

.load()メソッドを使った別ファイルのhtml取得はとても簡単ですが、「共通化や自動更新はしたいけどちょっとマークアップを変えたい」「同じ要素なんだけどもページごとに違う使い方をしたい」という場合、.load()メソッドだと限界があります。

そんな時、ajaxで別ページの要素を取得してDOM操作できると色々捗ります。本記事では、ajaxを活用した別ページのhtml取得方法についてご紹介させていただきたいと思います。

サンプルコード

以下のようにdataType:'html'でajax通信することで、簡単に別ページのDOMが取得できます。

  • ただし同ドメインのページに限ります(クロスドメイン不可)
$(function(){
  'use scrict';

  $.ajax({
    type:'GET',
    url:'/about/',
    dataType:'html'
  })
  .then(

    //通信成功時
    function(data){
      var contents = $(data).find('h1.hdg-l1-01').next();
      $('.hoge').append(contents);
    },
  
    //通信失敗時
    function(){
      alert("読み込み失敗");
  });
});

上記は単純に取得した要素を.hogeの中に放り込んでいるだけなので、.load()と対してやっていることは変わりませんが、DOM操作してからappendすることで、同じ要素でも全く違った見せ方にすることもできます。

例えば以下のサンプルコードでは、/about/のH1テキストを取得して文字列を置換し、さらにリンクリストモジュールの形式にDOM操作してからappendしています。

$(function(){
  'use scrict';

  $.ajax({
    type:'GET',
    url:'/about/',
    dataType:'html'
  })
  .then(

    //通信成功時
    function (data) {
      var contents = $(data).find('h1.hdg-l1-01').next().text();
      contents = contents.replace(contents,'サイトについて');
      contents = '<ul class="list-link-01"><li><a href="/about/">' + contents + '</a></li></ul>';
      $('.moge').append(contents);
    },
  
    //通信失敗時
    function () {
      alert("読み込み失敗");
  });
});
  • jQueryを読み込んでいる場合のスクリプトとなります

解説

ajaxで取得したオブジェクトはdataに格納されます。あとは取得したい任意の要素に$(data)〜でアクセスするだけです。同ページ内にある要素と同じ感覚で扱うことができるようになります。

わかりづらくなりそうだったのであえて用意しませんでしたが、例えばfor文やeach()を活用し、複数ある要素をAのページではリストで見せているんだけど、Bのページではセレクトボックスとして扱いたい、などの場合にこの手法は力を発揮します。

「Aのページをメンテナンスすれば体裁の違うBのページも勝手に更新される」という仕組みを、ちょっとしたスクリプトを書けば作り出すことができるわけです。

.load()を使っても似たようなことはできなくも無いですが、処理としては.load()後に要素を取得して一旦非表示にして、DOM操作してからまたappend、みたいなことをやらなきゃなのでコードも増えますし、処理としては美しくないんですよね。

  • 決して.load()をディスっているわけではない

また、PCとスマートフォン用で別々にhtmlを用意しているサイトなどの場合、新着情報やお知らせにおいて、「PCサイトを更新すればスマートフォンも更新される」といった仕組みで運用工数を減らす活用方法もあります。

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

まとめ

以上、別ページのhtmlを取得してDOM操作する方法をご紹介させていただきました。実際、サイトの機能としてこういったものを実装するケースはあまりないと思います。

しかし「ajaxを使って別ページのhtmlを簡単に扱うことができる」ということを知っておくと、いざという時に実装の解決の糸口になる可能性もありますので、知っておいて損はないです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

  • 承認制のため、即時には反映されません。

ページの先頭に戻る