Get HTML element via aria label

Question

I\'m making a small chrome extension and for it I need to grab a div from the DOM to manipulate. I get the DOM but I\'m having trouble grabbing the required d

Answer 1

this is the permenent solution check it it will work forever

var getElementsByAttribute = function (attr, value) {
var match = [];

var elements = document.getElementsByTagName("*");

for (var ii = 0, ln = elements.length; ii < ln; ii++) {

if (elements[ii].hasAttribute(attr)) {

  /* If a value was passed, make sure it matches the element's */
  if (value) {

    if (elements[ii].getAttribute(attr) === value) {
      match.push(elements[ii]);
    }
    } else {

    match.push(elements[ii]);
  }
}
 }
  return match;
};

(function () {
  var baz = getElementsByAttribute('data-foo', 'bar');
  for (var xx = 0, ln = baz.length; xx < ln; xx++) {
    baz[xx].innerHTML = 'These *are* the droids we are looking for!';
 }
})();

Answer 2

Probably you're trying to get the Element before it's even loaded on the page.

If so, you can wrap your code into the DOMContentLoaded event:

document.addEventListener('DOMContentLoaded', function() {
  console.log(document.getElementById(':ik').textContent);
});

---

But if you really want to get the element by its aria label, you can do that:

document.querySelector('div[aria-label="Message Body"]');

But this way is much less performatic, and you'll need to do exactly what I've mentioned above too.

Answer 3

querySelector or querySelectorAll with an attribute selector should do it:

// The first element that matches (or null if none do):
var element = document.querySelector('[aria-label="Message Body"]');
// A list of matching elements (empty if none do):
var list = document.querySelectorAll('[aria-label="Message Body"]');

Or if that ID is stable, simply:

var element = document.getElementById(":ik");

(Note that the d is lower case; you have it in upper case in your example.)

Either way, make sure your code doesn't run until the page is loaded, by including this in your manifest:

"run_at": "document_end"

(A little) more in this answer, which references this Google documentation.