删除特定DIV的css使用所有类的列表时

Question

我从stackoverflow找到了以下代码：

<script type="text/javascript">
var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
    var tag = allTags[tg];
    if (tag.className) {
     var classes = tag.className.split(" ");
     for (var cn = 0; cn < classes.length; cn++){
     var cName = classes[cn];
     if (! classNames[cName]) 
         {
       classNames[cName] = true;
     }
   }
    }   
}
var classList = [];
for (var name in classNames) 
    classList.push(name+'<br />');
document.getElementById('allclasses').innerHTML = classList.sort();
</script>

以上作品很棒，但仅适用于课程，ID是什么 现在有一个场景就像这样的div：

<div class="head">
   internal divs having classes, IDs should be ignored --
</div> 

<div class="footer">
   internal divs having classes, IDs should be ignored --
</div> 

我如何对代码进行上述更改，我问，因为我在Javascript中愚蠢，我需要让它作为任务给出...

Answer 1

假设你只是想要一个列表，如果ID，就像你的班级列表一样，那里有一个jQuery版本。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/LXhtr/

jQuery中的ID版本：

var ids = {};
$('[id]').each(function () {
    var id = this.id;
    ids[id] = id;
});
var idList = [];
for (var id in ids) {
    idList.push(id + '<br />');
}
$('#allids').html(idList.sort());

注意：

$('[id]')是一个jQuery选择器，它返回任何带id的元素。对于具有类的任何元素，$('[class]')都会执行相同的操作。正如您所看到的，jQuery比原始JavaScript更精简。如果需要，仍然可以使这些更短，但是这会远离你现有的代码，你可能无法识别任何东西：）

更新：http://jsfiddle.net/TrueBlueAussie/LXhtr/3/

您想要排除class="header"或class="footer"内的任何内容。

你可以在jQuery中使用:not([class=header]):not([class=header] *)之类的选择器执行此操作，这些选择器基本上可以说，不包含此匹配，或者此匹配项下的任何内容。

var ids = {};
$('[id]:not([class=header]):not([class=footer]):not([class=header] *):not([class=footer] *)').each(function () {
    var id = this.id;
    ids[id] = id;
});
var idList = [];
for (var id in ids) {
    idList.push(id + ' <br/>');
}
$('#allids ').html(idList.sort());