jQuery 「走査系のメソッド」テキストノードも含めて、要素の子ノードを抽出する

条件にマッチした要素から、テキストノードを含むすべての子ノードを抽出して返します。.children()メソッドに似ていますが、.children()は、結果にテキストノードを含みません。iframeを使ったサイトでは、.contents()メソッドは特に便利です。iframeとメインページが同一のドメインに属していれば、.contents()メソッドは、メインページからiframeに表示しているドキュメントのコンテンツを操作することもできます。ただし、Safari等一部のブラウザでは動作しないケースもありますので、ブラウザを限定できないサイトでは十分検証を行う必要があります。

書式

.contents()

$('div').contents()

サンプル

iframe内の要素を指定して背景色を塗る

<body>
    <div class="main">
    <div class="header">
      <h1> サンプル </h1>
    </div>
      <div class="content">
        <div>メインページのコンテンツです。</div>
        <iframe id="frame1" src="http://localhost/xxxxx.html"></iframe>
      </div>
    <div class="footer">
    <hr>
    <div class="copyright">2019 xxxx all rights reserved.</div>
    </div>
    </div>
    <script>
      $(document).ready(function(){
       $('#frame1').contents().find('p').css('backgroundColor','yellow').css('border','1px solid red');
      });
    </script>
</body>

カテゴリー:JavaScriptjQueryオブジェクトの走査