ドキュメントフラグメント *から(nodename =“ script”)ですべてのノードを削除してからdom *に配置します
-
01-10-2019 - |
質問
私の目標は、フラグメントをDOMに挿入する前に、ドキュメントフラグメントからすべての<[スクリプト]>ノードをドキュメントフラグメントから削除することです(残りのフラグメントの残りをそのまま残します)。
私の断片はによって作成され、次のようになります:
range = document.createRange();
range.selectNode(document.getElementsByTagName("body").item(0));
documentFragment = range.cloneContents();
sasDom.insertBefore(documentFragment, credit);
document.body.appendChild(documentFragment);
私は別の投稿で良いレンジウォーカーの提案を受けましたが、間違った質問をしたことに気付きました。私は範囲について答えを得ましたが、私が尋ねるつもりだったのは、ドキュメントのフラグメントでした(または、おそらくフラグメントの範囲を設定する方法がありますか?hrmmm)。提供されたウォーカーは次のとおりです。
function actOnElementsInRange(range, func) {
function isContainedInRange(el, range) {
var elRange = range.cloneRange();
elRange.selectNode(el);
return range.compareBoundaryPoints(Range.START_TO_START, elRange) <= 0
&& range.compareBoundaryPoints(Range.END_TO_END, elRange) >= 0;
}
var rangeStartElement = range.startContainer;
if (rangeStartElement.nodeType == 3) {
rangeStartElement = rangeStartElement.parentNode;
}
var rangeEndElement = range.endContainer;
if (rangeEndElement.nodeType == 3) {
rangeEndElement = rangeEndElement.parentNode;
}
var isInRange = function(el) {
return (el === rangeStartElement || el === rangeEndElement ||
isContainedInRange(el, range))
? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
};
var container = range.commonAncestorContainer;
if (container.nodeType != 1) {
container = container.parentNode;
}
var walker = document.createTreeWalker(document,
NodeFilter.SHOW_ELEMENT, isInRange, false);
while (walker.nextNode()) {
func(walker.currentNode);
}
}
actOnElementsInRange(range, function(el) {
el.removeAttribute("id");
});
そのウォーカーコードは次のように解除されます。 フラグメントの範囲でノードからすべてのID属性を削除します
お願いします ライブラリはありません(つまり、jQuery)。これを生の方法でやりたいです。よろしくお願いします
解決
すべてを集める最も簡単な方法 <script>
ノードは使用します getElementsByTagName
, 、しかし残念ながら、それは実装されていません DocumentFragment
.
ただし、一時的なコンテナを作成し、フラグメント内のすべての要素を追加してから、すべてを通過してすべてを削除できます。 <script>
そのような要素:
var temp = document.createElement('div');
while (documentFragment.firstChild)
temp.appendChild(documentFragment.firstChild);
var scripts = temp.getElementsByTagName('script');
var length = scripts.length;
while (length--)
scripts[length].parentNode.removeChild(scripts[length]);
// Add elements back to fragment:
while (temp.firstChild)
documentFragment.appendChild(temp.firstChild);
他のヒント
私が間違っている場合は私を修正してください、しかし、文書のフラグメントが本当のdomの断片である場合、あなたは次のようなことをすることができるはずです:
var scripts = documentFragment.getElementsByTagName('script');
if (scripts.length){
for (var i=0, l = scripts.length;i<l;i++){
documentFragment.removeChild(scripts[i]);
}
}
右?
修正:GetElementsByTagnameを文書に適用することはできません。JPは正しいです。ただし、getelementsbytagnameをサポートする(クローン化された)ノードの場合、フラグメントの子になることができます。数日前に私がより大きなスクリプト内で使用する(動作)コードを次に示します。
var fragment = d.createDocumentFragment(), f;
fragment.appendChild(document.createElement('div'));
fragment.firstChild.appendChild(zoeklijst.cloneNode(true));
f = fragment.firstChild;
return f.getElementsByTagName(getList); //<==