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

2019-10-26 23:46:55 阅读：302 来源： 互联网

如何获取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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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