Obtenez de l'élément HTML via aria étiquette

Je suis en train de faire une petite extension chrome et pour cela j'ai besoin de saisir un div du DOM pour manipuler. Je reçois le DOM, mais je vais avoir de la difficulté à saisir le nécessaire div. Voici le code pour cela.

<div id=":ik" class="Am Al editable LW-avf" hidefocus="true" aria-label="Message Body" g_editable="true" role="textbox" contenteditable="true" tabindex="1" style="direction: ltr; min-height: 137px;"><br></div>

J'ai essayé getElemenyByID, et document.attrib mais les deux de retour null. Des conseils sur la façon d'obtenir la valeur du texte qui sera d'entrée à l'intérieur de ce div?

OriginalL'auteur Irtza.QC | 2015-09-23

  1. 17

    querySelector ou querySelectorAll avec un attribut sélecteur devrait le faire:

    //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"]');

    Ou si cet ID est stable, il suffit de:

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

    (À noter que la d est inférieur cas; vous l'avez en majuscules dans votre exemple.)

    De toute façon, assurez-vous que votre code ne fonctionne pas jusqu'à ce que la page est chargée, en incluant dans votre manifeste:

    "run_at": "document_end"

    (Un peu) plus en cette réponse, les références Google documents.

    OriginalL'auteur T.J. Crowder

  2. 3

    Probablement vous essayez d'obtenir l'Élément avant de l'avoir chargé sur la page.

    Si oui, vous pouvez envelopper votre code dans le DOMContentLoaded événement:

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

    Mais si vous voulez vraiment obtenir l'élément par son aria étiquette, vous pouvez le faire:

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

    Mais de cette manière est beaucoup moins performatic, et vous aurez besoin de faire exactement ce que j'ai mentionné ci-dessus aussi.

    +1 pour une réponse qui ne dépend pas de jQuery. Régulières JavaScript peut faire le travail aussi, sans avoir besoin d'un ensemble de la bibliothèque.

    OriginalL'auteur Buzinas

  3. -2

    c'est le permenent solution vérifier cela fonctionnera jamais

    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!';
 }
})();
    quoi de wrog avec elle
    Comment est-il répondre à la question? Bien qu'il existe certains sélecteur de syntaxes disponibles comme l'autre réponse suggéré, pourquoi on doit réinventer?

    OriginalL'auteur Ahmer