当<a>包含使用javascript的子元素时,如何获取<a>标签的'aria-label'属性

Question

我试图读取锚标记的'aria-label'属性.但我得到空值,因为我的代码读取子元素(<use></use>)而不是父元素(<a></a>).下面是我的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>