Javascript |如何删除没有类“.destroy”的任何东西（divs，p's，a's，...）？答案

【问题标题】：Javascript | How to erase anything (divs, p's, a's, ...) which has not class ".destroy"?Javascript |如何删除没有类“.destroy”的任何东西（divs，p's，a's，...）？
【发布时间】：2011-04-29 11:26:50
【问题描述】：

如何使用纯 Javascript 进行这项工作？删除没有类“destroy”的 HTML 文档的 Body 部分中的所有内容（div、ps、as、span、imgs、...）。

PS.：纯 Javascript 意味着：没有 JQuery 或其他框架..

【问题讨论】：

<html> 或 <head> 元素呢？
& 应该保持不变 - 只在部分进行

标签： javascript document erase

【解决方案1】：

循环遍历document.body.getElementsByTagName(*)，检查每个element.className.test(/\bdestroy\b/)，并调用element.parentNode.removeChild(element)。

如果您愿意使用 jQuery，请致电$(':not(.destroy)').remove()

【讨论】：

【解决方案2】：

您可以递归地遍历 DOM 并检查每个节点的类。像这样的

function walk_the_DOM(node) {
    if (node.className && (node.className.indexOf("destroy")>-1)) {
        node.parentNode.removeChild(node);
    } else {
      node = node.firstChild;
      while (node) {
       walk_the_DOM(node);
       node = node.nextSibling;
      }
    }
 };

walk_the_DOM(document.body);

【讨论】：

【解决方案3】：

假设“纯 JavaScript”是指“没有任何第三方库（如纯 JS 的 jQuery），但使用浏览器提供的 DOM API（通常不是用 JS 编写）”，那么：

document.getElementsByTagName('*');
循环遍历它
测试每个元素的.className 属性值
使用foo.parentNode.removeChild(foo)

您将需要完善您的规则。否则，您最终将删除您要保留的所有节点的父元素（包括 <html> 元素）（在此过程中删除它们的所有后代）。

【讨论】：

【解决方案4】：

如果你删除所有内容，你也会删除body、head 和其他人。因此，为避免这种情况，您可以使用 Jquery 尝试以下代码

试试这个

$("body").children(':not(.destroy)').remove();

【讨论】：

【解决方案5】：

您可以遍历 DOM 树并检查每个元素的 className 属性。遍历 DOM 树比人们想象的要容易得多：

var reMatch = /\bdestroy\b/;

function walk(node) { 
    var child, next, tagName;

    switch (node.nodeType) {
        case 1: // Element
            // Element, we exempt some of them; the rest,
            // check if they match
            tagName = node.tagName.toUpperCase();
            if (tagName !== "HTML" &&
                tagName != "HEAD" &&
                tagName !== "BODY" &&
                !reMatch.test(node.className)) {
                // Not exempt, doesn't have the class; remove it
                node.parentNode.removeChild(node);
                break;
            }
            /* FALL THROUGH TO */
        case 9: // Document
            // Document or Element, walk our child nodes
            for (child = node.firstChild;
                 child;
                 child = next) {
                // Important to grab the next one *before* visiting it,
                // as visiting it may remove it!
                next = child.nextSibling;
                walk(child); 
            }
            break; 
    } 
}

然后开始：

walk(document.body);

...或沿着这些路线（未经测试，但它应该让你继续前进）。显然用常量替换这些幻数（并非所有实现都在Node 上定义它们应该如此）。 DOM 规范中的详细信息：DOM2、DOM2 HTML、DOM3，以及 ECMAScript (JavaScript) 中的 specification（用于正则表达式）。

【讨论】：