javascript : .filter(cssSelector)

 

javascript : DomElementList.filter(cssSelector)

---

Target:

Applicable with any DOM element or elements List.

• getElementById
• getElementsByTagName
• getElementsByClassName
• getElementsByName
• querySelector
• querySelectorAll

---

Description :

it return DOMNodeList of element/elements List with filter of selector if matched.

Note: use for removing elements from list that are not matched with selector.

---

Syntax:

DOMElement.filter(selector)

DOMNodeList.filter(selector)

HTMLCollection.filter(selector)

---

Usase:

1. document.getElementById('firstDiv').filter('div')
   if element having id firstDiv is div then the DOMNodeList that returned has firstDiv element otherwise the list will empty.
2. document.getElementsByTagName('div').filter('.firstDiv')
   the getElementsByTagName selects all div and filter() method removes all dives that has not class name firstDiv and return DOMNodeList of all dives having class firstDiv.
3. document.getElementsByClassName('FirstDiv').filter('div')
   the getElementsByClassName selects all elements having class FirstDiv and filter() method remove all elements that are not div and returns DOMNodeList of divs having class firstDiv.
4. document.getElementsByName('FirstDiv').filter('div')
   the getElementsByName selects all elements having name attribute "FirstDiv" and filter() method remove all elements that are not div and returns DOMNodeList of divs having name attribute firstDiv.
5. document.querySelector('.FirstDiv').filter('div')
   the querySelector selects element having class "FirstDiv" and filter() method check that the element is div or not. if element is div then it return DOMNodeList with this element other wise empty DOMNodeList
6. document.querySelectorAll('.FirstDiv').filter('div')
   the querySelectorAll selects all elements having class FirstDiv and filter() method remove elements that are not div and return DOMNodeList of all divs that have class firtDiv.

Download MYJS.js

MyJs is a collection of java script extension methods that enhances the JavaScript objects, class object, DOM element, domElementsCollections, Date, String, Number and other data type. 

Include in you project landing page (master page) and it will extends your DOM and JavaScript Objects.