javascript : domElementList .each( function )

 

javascript : domElementList .each(fn)

---

Target:

Applicable with any DOM element / elements list.

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

---

Description :

executes the function in loop with each element in loop and return elements list.

Note: loop function this represent individual element in list.

---

Syntax:

DOMElement.each(function(){ /*this element related statement*/ })

DOMNodeList.each(function(){ /*this element related statement*/ })

HTMLCollection.each(function(){ /*this element related statement*/ })

---

Usase:

1. document.getElementById('firstDiv').each(function(){this.style.color='red';})
   it executes the function passed and set firstDiv element's style color red.
2. document.getElementsByTagName('div').each(function(){this.style.color='red';})
   It loop for each div element and executes function for every div and set it's color style to red.
3. document.getElementsByClassName('FirstDiv').each(function(){this.style.color='red';})
   It loop for each elements having FirstDiv className and executes function for every element and set it's color style to red.
4. document.getElementsByName('FirstDiv').each(function(){this.style.color='red';})
   It loop for each elements having name attribute FirstDiv and executes function for every element and set it's color style to red.
5. document.querySelector('.FirstDiv').each(function(){this.style.color='red';})
   it executes the function passed and set element having FirstDiv class style color red.
6. document.querySelectorAll('.FirstDiv').each(function(){this.style.color='red';})
   It loop for each elements having class FirstDiv and executes function for every element and set it's color style to red.

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.