2

body タグ内のすべての要素を見つけようとしていますが、要素の配列から除外したい「非表示」の特定のクラス タイプを持つ要素 (div) が 1 つあります。

本文のすべての要素を含む私の var は次のとおりです。

allTagsInBody = document.body.getElementsByTagName('*');

このリストから除外したい div は次のとおりです。

<div class="myHiddenElement"> 
    <button>Click here</button>
    <div> <button>Click here</button> </div>
    <button>Click here</button>
</div>

問題は、その div 内にいくつの要素があり、どれだけネストされているかわからないことです。

4

4 に答える 4

1

各要素を反復処理するときは、非表示のクラスがあるかどうかだけでなく、その親要素のいずれかにクラスがあるかどうかを確認する必要があります。したがって、各要素の親を再帰的にチェックする必要があります。これは、ページ上の要素の数とそれらがどの程度深くネストされているかによっては非常にコストがかかる可能性がありますが、その方法は次のとおりです。

var arr = [];
var len;
var i;
var nodes = document.querySelectorAll('body *');

function checkNode(node) {
    if (node.classList.contains('myHiddenElement')) {
        return true;        
    } else if (node.parentNode.nodeType === 1) {
        return checkNode(node.parentNode);
    }

    return false;
};

for (i = 0, len = nodes.length; i < len; i++) {
    if (checkNode(nodes[i])) {
        continue;
    } else {
        arr.push(nodes[i]);
    }
}

JSFiddleの例を次に示します。http：//jsfiddle.net/xzCfs/5/

残念ながら、CSSセレクターでこれを行う方法はないと思います。：not（）セレクターは単純なセレクターのみを受け入れ、複合セレクターは受け入れないためです（たとえば、：not（.myHiddenClass *）<-それが機能する場合は素晴らしいでしょう）。

于 2012-10-30T00:32:22.203 に答える
1 
document.querySelectorAll( '*:not(.myHiddenElement)' );

:not()セレクターと.querySelectorAll一緒にそれを行います。css2

于 2012-10-29T20:58:11.140 に答える
0

これを試して

​​var elems = document.body.childNodes;
var filtered = Array();  //holds elements that doesn't have 'myHiddenElement' class

​for(var i=0; i<elems.length; i++)
{
    if(elems[i].className != 'myHiddenElement')
      filtered.push(elems[i]);
}
于 2012-10-29T21:03:49.177 に答える
0

他のすべてが失敗した場合は、いつでも DOM を再帰的にトラバースできます (とにかく、すべてのライブラリが行うことです)。

一般的な DOM トラバース関数は次のとおりです。

# Note: Even though this function accepts a callback it is synchronous:

function traverse (node, callback) {
    // The callback function must return true to continue processing
    // otherwise stop processing down this branch:
    if (callback(node)) {
        for (var i=0;i < node.childNodes.length; i++) {
            traverse(node.childNodes[i],callback);
        }
    }
}

したがって、コレクションを構築するには:

var elements = [];
traverse(document,function(node){
    // We only care about element nodes, ignore comments, attributes etc:
    if (node.nodeType == 1 && node.className != "myHiddenElement") {
        elements.push(node);
        return true; // continue parsing this branch
    }
    return false; // ignore this branch and its children
});
于 2012-10-29T23:19:01.747 に答える