更改嵌套alt标签中的img

Question

How can I programmatically change the following img in the structure below?

  <div id="runner" class="nav brand pull-left">
        <a alt="motherboard" href="/tree/">
            <img alt="mega node" src="img.png"></img>
        </a>
  </div>

firefox points me to this

#runner > a:nth-child(1) > img:nth-child(1)

I've tried using standard methods as the following with various naming conventions

document.getElementById("#runner").src="icon.png";
document.getElementById("#runner.a.img").src="icon.png";
document.getElementById("#runner.img").src="icon.png";
document.getElementById("mega node").src="icon.png";

I've even tried css with no avail,

div#runner {
    content:url("img.png");
}

Answer 1

Your are specifying argument in getElementById() in a wrong way, you should provide just an id , without selector # . You can find your #runner div and then find the first <img> tag in it and change it's src attribute :

  document.getElementById('runner').querySelector('img').src = 'icon.png' 

Example

Or even simpler, without using getElementById() :

 document.querySelector('#runner a img').src = 'icon.png'

Example