どのようにjQueryを使ってHTMLの任意のチャンク内の要素を見つけるには？

Question

私はChromeの拡張機能内で観察可能な変異を使用していますし、それがうまく機能しています：

var insertedNodes = []; 
var observer = new MutationObserver(function (mutations) { 
    mutations.forEach(function (mutation) { 
     // loop through each chunk of html that changes on the page 
     for (var i = 0; i < mutation.addedNodes.length; i++){ 
      newHTMLChunk = mutation.addedNodes[i]; 
      //console.log(newHTMLChunk); 
     } 
    }) 
}); 
observer.observe(document, { 
    attributes: true, 
    childList: true, 
    characterData: true, 
    subtree:true 
}); 

各反復の内側（YouTubeの内部で、この場合には）、newHTMLChunkは、以下のようなHTMLのチャンクに評価されます。

<li class="channels-content-item yt-shelf-grid-item"> 
    <div class="yt-lockup clearfix yt-lockup-video yt-lockup-grid vve-check" data-context-item-id="Kky3wgURBJ0" data-visibility-tracking="QJ2JxKig-K2mKg=="> 
     <div class="yt-lockup-dismissable"> 
     <div class="yt-lockup-thumbnail"> 
      <span class=" spf-link ux-thumb-wrap contains-addto"> 
       <a href="/watch?v=Kky3wgURBJ0" class="yt-uix-sessionlink" aria-hidden="true" data-sessionlink="ei=PkhhWMS-CoXMugKIxL_YDg&amp;feature=c4-videos-u"> <span class="video-thumb yt-thumb yt-thumb-196"> 
       <span class="yt-thumb-default"> 
       <span class="yt-thumb-clip"> 
       <img alt="" src="https://i.ytimg.com/vi/Kky3wgURBJ0/hqdefault.jpg?custom=true&amp;w=336&amp;h=188&amp;stc=true&amp;jpg444=true&amp;jpgq=90&amp;sp=68&amp;sigh=PSGK-mxzthJQOk44ZEKdd1jCrkA" onload=";__ytRIL(this)" width="196" data-ytimg="1" aria-hidden="true"> 
       ...more here ... 

今、私は何をしようとしている以下の通りです：

1. はその<img>要素へのハンドルを取得します。 （これは、HTMLの塊で唯一の画像要素となります。）
2. data-context-item-id属性を含む<div>要素へのハンドルを取得します。 （この場合、値はKky3wgURBJ0です）

jQueryは、上記のように任意のhtmlの要素を見つけることができますか？それとも、Webページ全体でしか動作しないのでしょうか？あなたの助けを前にありがとう。

Answer 1

上記のように、jQueryは任意のhtmlの要素を見つけることができますか？

はい、可能です。ここに例があります。

// create a container for your html 
var $div = $('<div>') 

// inject html 
$div.html(newHTMLChunk) 

// traverse 
$div.find('div[data-context-item-id="Kky3wgURBJ0"]') 

---

編集：あなたはDOMツリーとして直接アクセスできる場合は、なぜHTMLにaddedNodesを変換します。これはDocumentFragment

あなたは奇妙な何かをやってInserting arbitrary HTML into a DocumentFragment