Javascript |Как стереть что-либо (div, p, a, ...), которое не имеет класса ".destroy"? - PullRequest
0 голосов
/ 29 апреля 2011

Как я могу заставить это работать с чистым Javascript? Удалите все (divs, ps, as, spans, imgs, ...) в разделе «Тело» HTML-документа, в котором НЕ содержится класс «destroy».

PS .: Чистый Javascript означает: нет JQuery или других фреймворков.

Ответы [ 5 ]

3 голосов
/ 29 апреля 2011

Прокрутите document.body.getElementsByTagName(*), проверьте, каждый ли element.className.test(/\bdestroy\b/), и позвоните element.parentNode.removeChild(element).

. Если вы хотите использовать jQuery, позвоните $(':not(.destroy)').remove()

.
2 голосов
/ 29 апреля 2011

Вы можете рекурсивно обойти 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);
0 голосов
/ 29 апреля 2011

Если вы удалите все, вы удалите body, head и другие тоже. Поэтому, чтобы избежать этого, вы можете попробовать следующий код, используя Jquery

Попробуйте это

$("body").children(':not(.destroy)').remove();
0 голосов
/ 29 апреля 2011

Вы можете пройтись по дереву 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) спецификация (для регулярного выражения ).

0 голосов
/ 29 апреля 2011

Предполагая, что под «чистым JavaScript» вы подразумеваете «без каких-либо сторонних библиотек (например, jQuery, который является чистым JS), но с API-интерфейсами DOM, предоставляемыми браузерами (которые обычно не пишутся в JS)», тогда:

  1. document.getElementsByTagName('*');
  2. Цикл над ним
  3. Проверка значения свойства .className для каждого элемента
  4. Использование foo.parentNode.removeChild(foo)

Вы будете нуждаться в уточнении ваших правил.В противном случае вы в конечном итоге удалите родительские элементы (включая элемент <html>) всех узлов, которые вы хотите сохранить (удалив всех их потомков в процессе).

...