通过 CSS3 选择器过滤 NodeList

Question

I have a NodeList object - let's say, returned by $element.children - and I would like to filter it by a CSS3 selector to only have certain elements left which meet my criteria. The function should basically look as following:

 var filter = (function($elementsToFilter, selector){ var $elementsFiltered; // ...? return $elementsFiltered; }); filter(document.querySelector('#element').children, '.two.three')

 <div id="element"> <div class="one two three">Yes</div> <div class="two three">Yes</div> <div class="two">No</div> <div class="three">No</div> </div>

1. Might this not be useful for production (Bad practice)?
2. What is the fastest way to dynamically select the elements with 'Yes' in the 'filter' function?

Please note, that I am NOT looking for a framework solution, eg in jQuery. Thanks in advance!

Answer 1

Question 1:

You most efficient method I can think of without using document.querySelector() is to use the contains() function on Element.classList .

for (elem in document.getElementById('element').children) {
  if (elem.classList.contains('two') && elem.classList.contains('three')) {
     // Do something
  }
}

Alternatively, you could merge your selectors into one like this:

for (elem in document.querySelector('#element > .two.three')) {
  // Do something
}

Question 2:

If you control the server-side code which generates this HTML, you may find it easier to use a data attribute like this:

<div id="element">
  <div class="one two three" data-select>Yes</div>
  <div class="two three" data-select>Yes</div>
  <div class="two">No</div>
  <div class="three">No</div>
</div>

Then with similar options to question 1:

for (elem in document.getElementById('element').children) {
  if (elem.dataset.select !== undefined) {
    // Do something
  }
}

The explicit check for undefined is necessary here ( ref ).

for (elem in document.querySelector('#element > [data-select]') {
  // Do something
}

---

As an aside, javascript now has the Array.filter() function. You can use this with Array.from() to replace your homebrew filter function (example taken from my first code snippet):

let filtered = Array.from(document.getElementById('element').children).filter(elem => {
  return elem.classList.contains('two') && elem.classList.contains('three');
});

Or create a filterByClasses function:

function filterByClasses(elements, classes) {
  return Array.from(elements).filter(elem => {
    return !classes.map(elem.classList.contains).includes(false);
  }
}

// Usage:
let filtered = filterByClasses(
                 document.getElementById('#element').children,
                 ['two', 'three']
               );