Why is 'getAttribute ()' not a function?

Navigation
3

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

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?

    
asked by anonymous 18.11.2015 / 19:29

3 answers

5

Because getElementsByTagName() returns an HTMLCollection (which behaves like an 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 only accepts the tag tag, not several, the best solution would be to use .querySelector() , as 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'));
});
    
18.11.2015 / 19:37
4

The getElementsByTagName method returns a list of elements and not a single element, so this problem does not exist in the array with the getAttribute function.

Do this: 

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

Try with attributes like this: 

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);
});

Output: 

#tocantins
Hello World BITCH!

See working at Jsfiddle.

    
18.11.2015 / 19:40
How do I know if a list is empty in Python? Expire link php