Can't select child elements using getElementsByTagName

Question

Here is the HTML code:

<span class="holder">
    <a href="/menu/page1">Navigate</a>
</span>

I want to select all such tags with class holder and then under these holders I want to change href of a tag.

What I have tried:

var holders = document.getElementsByClassName('holder'),
    i = holders.length;

while(i--) {
    holders[i].getElementsByTagName('a').href = "http://www.google.com";

    }

But the above code does not work. It does not change the href from /menu/page1 to my custom link. What am I doing wrong?

As I am working with some external web page,I cannot use jquery. Only Javascript solutions please. Thank You.

Answer 1

getElementsByTagName返回元素集合，如果要获取第一个链接，请使用.getElementsByTagName('a')[0]

Answer 2

As the perent element may contain multiple instances of a same tag, so getElementsByTagName returns a collection of the elements/nodes

So, you have to process it like an array. Bellow is one of the best way to do this

var holders = document.getElementsByClassName('holder'),
    i = holders.length;

while(i--) {
    var anchors = holders[i].getElementsByTagName('a');
    for (var j = 0; j < anchors.length; j++) { 
        anchors[j].href="'http://www.google.com";
    }

}

Demo Fiddle