如何使用javascript在<a>包含子元素时获取<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>

​