javascript - 如何获取所有包含连字符/破折号(？)的类应用于任何 DOM 元素并将它们保存到 JavaScript 数组中？

Question

如何将所有包含连字符/破折号(？)的类应用于任何 DOM 元素并将它们保存到 JavaScript 数组中？

我的失败方法:

  var getClasses     = [];
  var classesContain = [];

  document.querySelectorAll('*').forEach( x => { 
  
    var y = x.className.split(' '); 
    getClasses.push(y); 
   
   });
   
  getClasses.forEach( c => { 
  
    if(c.contains('-')){ 
    
      classesContain.push(c); 
      
    } 
    
  });

Answer 1

您的尝试已经非常接近工作了。问题是您将数组推送到getClasses而不是单个类中，并且字符串和数组都没有标准的contains方法(有includes，这可能就是你的意思)。另外，如果您只想要包含 - 的内容，您可以提前将其过滤掉:

let classesWithDash = new Set();
document.querySelectorAll('*').forEach(element => { 
  for (const cls of element.className.split(' ').filter(name => name.includes("-"))) {
      classesWithDash.add(cls);
  }
});
// Now, `classesWithDash` is a set containing the class names with dashes
// If you want an array:
classesWithDash = [...classesWithDash];

实例:

let classesWithDash = new Set();
document.querySelectorAll('*').forEach(element => { 
  for (const cls of element.className.split(' ').filter(name => name.includes("-"))) {
      classesWithDash.add(cls);
  }
});
// Now, `classesWithDash` is a set containing the class names with dashes
// If you want an array:
classesWithDash = [...classesWithDash];
console.log(classesWithDash);

<div class="foo foo-bar"></div>
<div class="another-one"></div>
<div class="nodash"></div>

<小时/>

(我一直不明白为什么 Set 没有 addAll 方法，或者至少接受多个值来 add就像push一样...)