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 规范中的详细信息:DOM2DOM2 HTMLDOM3以及 ECMAScript (JavaScript)规范(用于正则表达式)。

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

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

尝试这个

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