简单的ES10新Set（）方法

Question

如何获取HTML代码段内使用的所有类名列表？

例如，下面的HTML代码段

<div class="name">
  <div class="first"></div>
  <div class="last"></div>
</div>

会输出name，first，last或name，name > first，name > last。在这里，我担心首先找到所有类选择器。嵌套可以是可选的。

我希望使用Javascript或正则表达式。

Answer 1

使用querySelectorAll获取文档中的所有元素，然后遍历它们，获取每个类，在空格上分开，并向allClasses数组添加新的元素：

＆＃13;

var allClasses = [];

var allElements = document.querySelectorAll('*');

for (var i = 0; i < allElements.length; i++) {
  var classes = allElements[i].className.toString().split(/\s+/);
  for (var j = 0; j < classes.length; j++) {
    var cls = classes[j];
    if (cls && allClasses.indexOf(cls) === -1)
      allClasses.push(cls);
  }
}

console.log(allClasses);

＆＃13;

<div class="foo">
  <div class="bar baz"></div>
</div>

＆＃13;

要仅在文档的一部分中获取类名，请在querySelectorAll调用中指定：

var allElements = document.getElementById('my-elt').querySelectorAll('*');

现代方法

使用ES6，我们可以在功能上将其写成：

[].concat(                            // concatenate
  ...[...                             // an array of
    document.querySelectorAll('*')    // all elements
  ] .
    map(                              // mapping each 
      elt =>                          // element
        [...                          // to the array of
          elt.classList               // its classes
        ]
    )
);

或者，作为一个班轮：

[].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList]));

然后，您需要将uniq应用于结果。你可以自己写，或者使用Underscore的_.uniq等。这里有一个简单的用法：

function unique(array) {
  var prev;
  return array.sort().filter(e => e !== prev && (prev = e));
}

Answer 2

使用Set从@ user1679669的单行代码和@Nermin的答案中Pi带，您可以使用此单行代码在页面上获得所有类的列表：

const allClasses = [...new Set([].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList])))];

Answer 3

这是HTML：

<div id="oye">
<div class="pop"></div>
<div class="hop"></div>
<div class="bob"></div>
</div>

<p id="my"></p>

在Jquery中，您将获得所有类名的数组，请检查以下代码

 $(document).ready(function(){
  var myclass = [];
  var parent = $("#oye");
    var divs = parent.children();

  for(var i = 0; i < divs.length; i++){

    myclass.push(divs[i].className)
  }

  //console.log(myclass);


  var myclasses = myclass.join(', ');

  $("#my").html(myclasses);


});

请参阅演示：https://codepen.io/ihemant360/pen/PzWJZP

Answer 4

简单的ES10新Set（）方法

const allClasses = Array.from(document.querySelectorAll('[class]')).flatMap(e => e.className.toString().split(/\s+/))
const classes = new Set()

allClasses.forEach(c => classes.add(c))

console.log(classes)

获取所有的类名并在空间上分割，例如，“ child first”将成为“ child”和“ first”。如果您不喜欢这种行为，则可以删除toString和split函数。

然后将每个类名称添加到集合中。不需要检查重复项，因为该集合为我们完成了这项工作。如果您确实想存储重复项，则可以改用地图。

Answer 5

我会做类似下面的代码片段，它使用jQuery，但是更容易阅读imo，Javascript版本并不会比我想象的更难。

基本上你想获得所有的nodes，然后将所有唯一的类添加到列表中。

如果你正在寻找可以用Javascript应用的动态类，那么很多更难实现。

嵌套需要更深入地了解它应该如何执行，如何处理重写类而不是欺骗类数组和类似的..

如果由于jQuery导致这种情况下降，我会感到沮丧。

var classes = [];

$('body *:not(script)').each(function(){
  _classes = $(this).attr('class') ? $(this).attr('class').split(' ') : []
  _classes.forEach(function(entry){
    if(classes.indexOf(entry) < 0){
      classes.push(entry)
    }
  })
})

console.log(classes)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dog"></div>
<span class="dog cat"></span>
<div></div>
<blockquote class="bird"></blockquote>

Answer 6

按字母顺序返回唯一类名的单行，查询部分基于@ torazaburo的答案：

[].concat(...[...document.querySelectorAll('*')].map(e=>[...e.classList])).filter((d,i,a)=>a.indexOf(d)==i).sort()

Answer 7

一维获取所有类和唯一类。

const allClasses = Array.from(new Set(document.querySelectorAll("*").map(el => el.classNames)));

const flatClasses = Array.from(new Set(allClasses.flat(1)))

Answer 8

要访问Dom中的类，您可以执行类似的操作 var nameClass = document.getElementByClassName("name"); var firstClass = document.getElementByClassName("first"); var lastClass = document.getElementByClassName("last");

查找HTML / DOM中使用的所有类名

8 个答案:

现代方法

简单的ES10新Set（）方法