Why is 'getattribute()' not a function?

Question

I’m trying to access the attribute xlink:href of a <a> within an SVG. But when I try to access this attribute, Console Log returns that getAttribute() is not a function.

THE HTML:

<svg version="1.1" id="svg-map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="450px" height="460px" viewBox="0 0 450 460" enable-background="new 0 0 450 460" xml:space="preserve">
    <g>
        <a xlink:href="#tocantins" id="BITCH!">
            <path stroke="#FFFFFF" stroke-width="1.0404" stroke-linecap="round" stroke-linejoin="round" d="M289.558,235.641
                c16.104,0.575,44.973-31.647,44.835-45.259c-0.136-13.612-17.227-58.446-22.349-66.088c-5.122-7.628-37.905,2.506-37.905,2.506
                S234.852,233.695,289.558,235.641z"></path>
            <text transform="matrix(1 0 0 1 287.0137 188.3208)" fill="#FFFFFF"></text>
            <image width="42" height="55" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA3CAYAAAB6i9geAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYyQkZCQUVDOEUxQjExRTVCMjMxQ0YyNkU3MjA2NjMyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYyQkZCQUVEOEUxQjExRTVCMjMxQ0YyNkU3MjA2NjMyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjJCRkJBRUE4RTFCMTFFNUIyMzFDRjI2RTcyMDY2MzIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjJCRkJBRUI4RTFCMTFFNUIyMzFDRjI2RTcyMDY2MzIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7CC2p7AAAHgElEQVR42syZ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">
        </a>
    </g>
</svg>

And my Javascript:

document.querySelector('#svg-map').addEventListener('mouseover', function(){
    var link = this.getElementsByTagName('g a');
    console.log('Hello World ' + link.getAttribute('id'));
});

What am I doing wrong?

Answer 1

Because getElementsByTagName() returns a HTMLCollection (who behaves like a array), then you need to access as a array: link[0].getAttribute('id').

Another problem is that .getElementsByTagName('g a') is not valid, since this function accepts only the name of one tag, not several, the best solution would be to use .querySelector(), like you did in the first line.

document.querySelector('#svg-map').addEventListener('mouseover', function(){
    var link = this.querySelector('g a');
    console.log('Hello World ' + link.getAttribute('id'));
});

Answer 2

The method getElementsByTagName returns a list of elements and not a single element, so of this problem, in the array there is no function getAttribute.

Do so:

document.querySelector('#svg-map').addEventListener('mouseover', function(){
    var link = this.getElementsByTagName('g a')[0];
    if (link !== undefined) {
        console.log('Hello World ' + link.getAttribute('id'));
    }
});

Answer 3

Try with attributes thus:

document.querySelector('#svg-map').addEventListener('mouseover', function(){
    var link = this.getElementsByTagName('a');
    console.log(link[0].attributes['xlink:href'].value);
    console.log('Hello World ' + link[0].id);
});

Exit:

#tocantins
Hello World BITCH!

See working on Jsfiddle.