0

純粋なJavascriptでこれを機能させるにはどうすればよいですか？クラス"destroy"を持たないHTMLドキュメントのBodyセクションのすべて（divs、ps、as、spans、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

classNameDOMツリーをウォークスルーして、各要素のプロパティを調べることができます。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 に答える