0
votes

Comment accéder à un élément spécifique du code HTML interne?

J'essaye d'utiliser JS ou jQuery pour accéder à une valeur html appelée "data-button". Je peux accéder à l'ensemble du div HTML et extraire le nom de la classe ainsi que le contenu texte du bouton, mais je ne peux pas obtenir la valeur du bouton de données.

Dans le code ci-dessous, j'ai une fonction captureRecipeButtons () qui peut obtenir le div "recette-1-conteneur".

function captureRecipeButtons(){
  let theWholeDiv = document.getElementsByClassName("recipe-1-container")[0];
  let buttonValue = ?; 
}

<div class="recipe-1-container">
   <button class="listed-recipe-link" data-button="1">Element</button>
</div>

Dans ma fonction captureRecipeButtons (), je veux que buttonValue soit égal à "1" dans mon code ci-dessus. Toute aide serait appréciée merci.

javascript jquery html

3 commentaires

avez-vous vu developer.mozilla.org/en-US/docs / Apprendre / HTML / Comment /… ?

pourriez-vous poster le html s'il vous plaît

Pour autant que je sache, utiliser .innerhtml ne renvoie qu'une chaîne, vous pouvez utiliser un itenerator pour tout parcourir, mais une méthode BEAUCOUP plus simple serait d'utiliser .ChildNodes [0] pour obtenir l'élément que vous souhaitez modifier ou obtenir ou changez puis utilisez .innerHTML sur le nœud enfant

4 Réponses :

2
votes

Vous pouvez utiliser toute la puissance des sélecteurs CSS avec querySelector :

<div class="recipe-1-container">
   <button class="listed-recipe-link" data-button="1">Element</button>
</div>

0 commentaires

0
votes

Selon Mozilla Docs ,

Vous pouvez accéder aux attributs Data via l'objet dataset .

function captureRecipeButtons(){
  let theButton = document.querySelector("recipe-1-container > button");
  let buttonValue = theButton.dataset.button; 
}

0 commentaires

1
votes

Vous pouvez donc simplement obtenir l'élément bouton par nom de classe ou de balise, comme je l'ai fait. alors data-button est légitime juste un attribut donc utilisez simplement getAttribute ('data-button');

La façon dont j'ai écrit ci-dessous obtiendra juste le premier bouton qui est un enfant direct de l'élémentWholeDiv.

<div class="recipe-1-container">
   <button class="listed-recipe-link" data-button="1">Element</button>
</div>

function captureRecipeButtons(){
  let theWholeDiv = document.getElementsByClassName("recipe-1-container")[0];
  let buttonValue = theWholeDiv.getElementsByTagName('button')[0].getAttribute('data-button'); 
  console.log(buttonValue);
}

captureRecipeButtons();

0 commentaires

0
votes

Une autre façon d'utiliser le DOM, y compris des raccourcis pour éviter un défilement horizontal excessif. Le code cible précisément le premier élément DIV et son premier élément BUTTON, en utilisant la méthode getAttribute () pour renvoyer la valeur de la propriété indiquée. Ce qui est bien avec JavaScript, c'est la quantité fabuleuse de chaînage que l'on peut faire entre les éléments parents et enfants.

<div class="recipe-1-container">
  <button class="listed-recipe-link" data-button="1">Element</button>
</div>

function captureRecipeButtons() {
  let d = document;
  d.g = d.getElementsByTagName;

  let button = d.g("div")[0].childNodes[1];
  button.g = button.getAttribute;

  let buttonValue = button.g("data-button");
  console.log(buttonValue);
}

captureRecipeButtons();

Vous pouvez également écrire le code comme suit:

<div class="recipe-1-container">
  <button class="listed-recipe-link" data-button="1">Element</button>
</div>

function captureRecipeButtons() {
  let d = document;
  d.g = d.getElementsByTagName;
  let buttonValue = d.g("div")[0].getElementsByTagName("button")[0].getAttribute("data-button");
  console.log(buttonValue);
};

captureRecipeButtons();

Le premier nœud enfant de l'élément DIV selon le format du code n'est pas l'élément BUTTON mais un objet texte. Le childNode [1] contient l'élément BUTTON, vous pouvez donc utiliser sa méthode getAttribute () pour récupérer la valeur de l'attribut data-button .

0 commentaires