Gather Data Using MAP

Posted at

returns array of string, from each of the images


Array.prototype.map.call(document.querySelectorAll('img'),function(img){
  return img.src;
});





partial matches


fine-tune data streams can be required when the data is not well filtered,
this can be easily resolved, by providing a better 'query' to begin with.

src starts with "foo" expression


Array.prototype.map.call(document.querySelectorAll('img[src^="foo"]'),function(img){
  return img.src;
});

src ends with ".jpg"


Array.prototype.map.call(document.querySelectorAll('img[src$=".jpg"]'),function(img){
  return img.src;
});

image that has the partial match 'book' inside of the src attribute, it will match notebook.jpg, booking.gif,...


Array.prototype.map.call(document.querySelectorAll('img[src*="book"]'),function(img){
  return img.src;
});

a little more complex one..


checkboxes elements, that has non-empty value attribute.create an array, of cells in the format of object-reference, value and if the checkbox is checked or not - due to the fact that 'querySelectorAll' render a one-time list that is NOT ALIVE (not like getElementByTagName or similar old-school ones..


Array.prototype.map.call(document.querySelectorAll('input[type="checkbox"][value]:not([value=""])'),function(elm){
  return {'element': elm, 'value': elm.value, 'isChecked': elm.checked};
});
', 'JavaScript Snippet: Avoid Loops