<a>タグの 'aria-label'属性を取得する方法<a>にjavascriptを使用して子要素が含まれている場合

Question

アンカータグの 'aria-label'属性を読み取ろうとしています。しかし、私のコードは親要素（<a></a>）ではなく、子要素（<use></use>）を読み込んでいるのでnull値を取得しています。以下は私のHTMLとjsのコードです。

HTML

var inputs = document.querySelectorAll("a"); 
 
for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].addEventListener("click", function(e) { 
 
    console.log(inputs[i].getAttribute("aria-label")); 
 
    }); 
 
}

<a href="#" role="menuitem" id="main-6" aria-haspopup="true" aria-label="Choose your country site"> 
 
    <svg class="header-redirect--icon-w"> 
 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-country"></use> 
 
    </svg> 
 
    <i class="i-globe-w"></i> 
 
</a>

Answer 1

チェックこれは、この内部のクリックイベントのコールバック

var inputs = document.querySelectorAll("a"); 
 
console.log(inputs.length); 
 
for(var i = 0; i < inputs.length; i++){ 
 
    inputs[i].addEventListener("click", function(e){ 
 
     console.log(this.getAttribute("aria-label")); 
 
    });  
 
}

<a href="#" role="menuitem" id="main-6" aria-haspopup="true" aria-label="Choose your country site"> 
 
    <svg class="header-redirect--icon-w"> 
 
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-country"></use> 
 
    </svg> 
 
    <i class="i-globe-w"></i> 
 
    test 
 
</a>