从文档片段中删除带有 (nodeName = "script") 的所有节点 *在将其放入 dom* 之前

Question

我的目标是删除所有 <[script]>在将片段插入 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）。我想以原始方式做到这一点。预先感谢您的帮助

Answer 1

收集所有

但是，您可以创建一个临时容器并附加片段中的所有元素，然后遍历并删除所有

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);

Answer 2

如果我错了，请纠正我，但如果 documentFragment 是真正的 DOM 片段，您应该能够执行以下操作：

var scripts = documentFragment.getElementsByTagName('script');
if (scripts.length){
  for (var i=0, l = scripts.length;i<l;i++){
    documentFragment.removeChild(scripts[i]);
  }
}

对吗？

更正：您不能将 getElementsByTagName 应用于 documentFragment，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); //<==

Answer 3

2022 年，Chrome，querySelector 系列适用于文档片段：

frag.content.querySelectorAll('script').forEach(
    (s)=>s.remove()
    );