0

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

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

4

5 回答 5

3

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

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

于 2011-04-29T11:29:56.030 回答
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);
于 2011-04-29T11:35:48.863 回答
0

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

  1. document.getElementsByTagName('*');
  2. 循环它
  3. 测试.className每个元素的属性值
  4. 利用foo.parentNode.removeChild(foo)

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

于 2011-04-29T11:32:50.090 回答
0

您可以遍历 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)规范（用于正则表达式）。

于 2011-04-29T11:34:15.723 回答
0

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

尝试这个

$("body").children(':not(.destroy)').remove();
于 2011-04-29T11:36:58.827 回答