ShadowDomの要素を取得するスニペット
Tag:JavaScriptWeb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
//jQueryなし function querySelectorAllShadow(selector, context){ context = context || document; var docs = [context]; dig(context); var result = []; docs.forEach(function(doc){ Array.apply(null, doc.querySelectorAll(selector)).forEach(function(dom){ result.push(dom); }); }); return result; function dig(doc){ Array.apply(null, doc.querySelectorAll('*')).forEach(function(dom){ if(dom.shadowRoot!=null){ docs.push(dom.shadowRoot); dig(dom.shadowRoot); } }) } } //要素の配列を返す querySelectorAllShadow('.footer div'); //jQueryあり $.shadowDom = function(selector, context){ context = context || document; var docs = [context]; dig(context); var result = $(); docs.forEach(function(doc){ Array.apply(null, doc.querySelectorAll(selector)).forEach(function(dom){ result = result.add(dom); }); }); return result; function dig(doc){ Array.apply(null, doc.querySelectorAll('*')).forEach(function(dom){ if(dom.shadowRoot!=null){ docs.push(dom.shadowRoot); dig(dom.shadowRoot); } }) } }; //jQueryオブジェクトを返す $.shadowDom('a'); //実DOMとshadowDomを股がる走査はできない。 //絞り込みたい場合は第2引数にコンテキストを指定する。 $.shadowDom('.footer div', $('.text')[0]); |
