javascript - unable to replace the html page with images

Question

I am trying to replace everything with only images for images.google.com with some search term.

I tried the below code with firebug but says undefined.

document.body.innerHTML=document.getElementsByTagName('img').innerHTML

On the page [undefined] appears

I checked only

document.getElementsByTagName('img').innerHTML

It says undefined.

I checked only

document.getElementsByTagName('img')

It shows me lot of img elements

What is wrong.

possible duplicate of [How to get the HTML for a DOM element in javascript](http://stackoverflow.com/questions/1763479/how-to-get-the-html-for-a-dom-element-in-javascript) — mplungjan, Dec 26 '13 at 10:24
Also note that `getElementsByTagName` is plural (`getElements`) and returns a collection. — Jonathan Lonowski, Dec 26 '13 at 10:25

Jonathan Lonowski · Accepted Answer · 2013-12-26T11:15:05.330

1

If you want to reduce the contents of the <body> to a particular collection of elements, you could try:

// `slice` to get an `Array` vs. `NodeList`, which may be "live"
var imgs = Array.prototype.slice.call(document.querySelectorAll('img.rg_i'), 0);

// clear out current contents
document.body.innerHTML = '';

// append each `<img>` back into the `<body>`
for (var i = 0, l = imgs.length; i < l; i++) {
    imgs[i].style.display = 'inline';

    document.body.appendChild(imgs[i]);
    document.body.appendChild(document.createTextNode(' '));
}

edited Dec 26 '13 at 11:15

answered Dec 26 '13 at 10:29

Jonathan Lonowski

121,453
34
200
199

how can add a space between elements – Santhosh Dec 26 '13 at 11:01
@SanthoshYedidi You can append a text node with whitespace after each ``. Edited my answer to include it. – Jonathan Lonowski Dec 26 '13 at 11:06
thank you. also i am looking for only images with class rg_i how can i do that – Santhosh Dec 26 '13 at 11:07
@SanthoshYedidi You can use [`querySelectorAll('img.rg_i')`](https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll) in place of `getElementsByTagName('img')`. – Jonathan Lonowski Dec 26 '13 at 11:08
I tried the textnode but the space is not being show, instead i enter some text then it shows – Santhosh Dec 26 '13 at 11:10
is querySelectorAll a javascript syntax, because i want to use in greasemonkey – Santhosh Dec 26 '13 at 11:17
Yes it is, and rg_i is the class Google currently gives the images so you do not get icons and other stuff – mplungjan Dec 26 '13 at 15:35

Noam Rathaus · Answer 2 · 2013-12-26T10:27:04.913

0

Try to do this:

var objs = document.getElementsByTagName('img');
if (objs) {
 // there might be more than one
 document.body.innerHTML = objs[0].parentNode.innerHTML;
}

edited Dec 26 '13 at 10:27

answered Dec 26 '13 at 10:21

Noam Rathaus

5,405
2
28
37

i tried this it says document.getElementByTagName is not a function. then i tried with document.getElementsByTagName('img').parentNode.innerHTML it says document.getElementsByTagName(...).parentNode is undefined – Santhosh Dec 26 '13 at 10:24

mplungjan · Answer 3 · 2013-12-26T17:01:12.150

0

Img tags do not have innerHTML and getElementsByTagName is plural.

You can do

var imgs = document.images,html=""; // or document.getElementsByTagName("img");
var div = document.createElement("div");
for (var i=0;i<imgs.length;i++) { 
  div.appendChild(imgs[i]);
}
document.body.innerHTML=div.innerHTML;

Here is an even more google image specific version based on Jonathan's code

I tested it in the Chrome console on a google image search

(function() {
  var links=document.querySelectorAll('a.rg_l'),html=[];
  for (var i=0, n=links.length;i<n;i++) {
    html.push(links[i].innerHTML);
  }
  document.body.innerHTML=html.join(" - "); // or whatever you want between images
  html=null;})()

edited Dec 26 '13 at 17:01

answered Dec 26 '13 at 10:27

mplungjan

169,008
28
173
236

yes this works, but cant we copy paste the original img html content – Santhosh Dec 26 '13 at 10:31
Yes, see Jonathan's answer – mplungjan Dec 26 '13 at 10:32
as i told i am trying this code from firefox firebug on images.google.com, I tried document.body.innerHTML=document.getElementsById('a').innerHTML; but that is also not working. because the parent element for img is a element – Santhosh Dec 26 '13 at 10:37
Who voted down and why? Show yourself and help us understand what the problem is in your eyes! – mplungjan Dec 26 '13 at 20:28

javascript - unable to replace the html page with images

3 Answers3