从按钮列表中获取Arial标签值

Question

So we have various buttons which looks like this

  var val = document.querySelectorAll('button[aria-label]')[0].value; console.log(val); 

 <button aria-label="Connect with Trijay Sharda" data-control-name="srp_profile_actions" class="search-result__actions--primary button-secondary-medium m5" data-ember-action="" data-ember-action-6704="6704" data-is-animating-click="true">Connect</button> <button aria-label="Connect with Vibhor Jain" data-control-name="srp_profile_actions" class="search-result__actions--primary button-secondary-medium m5" data-ember-action="" data-ember-action-7497="7497">Connect</button> 

But this just returns an empty string.

[Question] So I have two questions, Why does it returns empty string and how can I grab the value of aria-label here?

Answer 1

document.querySelectorAll('button[aria-label]')[0] is giving you the button element.

So you're seeing the .value of the button element. If you want to see Connect then you can access the .innerText .

.getAttribute('aria-label') will give you the value of your aria label.

  var button = document.querySelectorAll('button[aria-label]')[0]; console.log(button.getAttribute('aria-label')); // Connect with Trijay Sharda console.log(button.innerText); // Connect 

 <button aria-label="Connect with Trijay Sharda" data-control-name="srp_profile_actions" class="search-result__actions--primary button-secondary-medium m5" data-ember-action="" data-ember-action-6704="6704" data-is-animating-click="true">Connect</button> <button aria-label="Connect with Vibhor Jain" data-control-name="srp_profile_actions" class="search-result__actions--primary button-secondary-medium m5" data-ember-action="" data-ember-action-7497="7497">Connect</button>