web-dev-qa-db-fra.com

Récupère l'élément HTML via l'étiquette aria

Je fais une petite extension chrome et pour cela j'ai besoin de saisir un div du DOM pour le manipuler. J'obtiens le DOM mais j'ai du mal à saisir le requis 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 renvoient null. Des conseils sur la façon d'obtenir la valeur du texte qui sera entré dans ce div?

javascriptjqueryhtmldom
11
Irtza.QC

querySelector ou querySelectorAll avec un sélecteur d'attribut 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, simplement:

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

(Notez que d est en minuscules; vous l'avez en majuscules dans votre exemple.)

Dans tous les cas, assurez-vous que votre code ne s'exécute pas avant le chargement de la page, en l'incluant dans votre manifeste:

"run_at": "document_end"

(Un peu) plus dans cette réponse , qui fait référence cette documentation Google .

24
T.J. Crowder

Vous essayez probablement d'obtenir l'élément avant qu'il ne soit même chargé sur la page.

Si tel est le cas, vous pouvez encapsuler votre code dans l'événement DOMContentLoaded:

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

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

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

Mais cette méthode est beaucoup moins performatique, et vous devrez également faire exactement ce que j'ai mentionné ci-dessus.

3
Buzinas