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

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

例如,下面的HTML代码段,

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

输出名称,名字,姓氏或名称,名称>首先,名称>持续.在这里,我担心首先找到所有的类选择器.嵌套可以是可选的.

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

解决方法:

使用querySelectorAll获取文档中的所有元素,然后遍历它们,获取每个人的类,在空格处将其分解,然后将新元素添加到allClasses数组中：

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);

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

要仅在文档的一部分中获得类名,请在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));
}

标签：html,javascript,css-selectors
来源： https://codeday.me/bug/20191026/1940287.html