Obtenir un élément dans un autre élément par classe et ID - JavaScript

Question

D'accord, j'ai déjà tâté de JavaScript, mais la chose la plus utile que j'ai écrite est un commutateur de style CSS. Je suis donc un peu nouveau dans ce domaine. Disons que j'ai un code HTML comme celui-ci :

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

Comment changerais-je Hello world! a Goodbye world! ?

Je sais comment document.getElementsByClassName y document.getElementById travail, mais je voudrais être plus précis. Désolé si cette question a déjà été posée.

Answer 1

Tout d'abord, vous devez sélectionner les éléments avec une fonction telle que getElementById .

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementById ne renvoie qu'un seul nœud, mais getElementsByClassName renvoie une liste de nœuds. Puisqu'il n'y a qu'un seul élément avec ce nom de classe (pour autant que je puisse le dire), vous pouvez juste obtenir le premier (c'est ce que la fonction [0] c'est pour - c'est comme un tableau).

Ensuite, vous pouvez changer le html avec .textContent .

targetDiv.textContent = "Goodbye world!";

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

Answer 2

Vous pouvez le faire comme ça :

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

ou, si vous voulez le faire avec moins de vérification d'erreurs et plus de brièveté, vous pouvez le faire en une seule ligne comme ceci :

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

En explication :

1. Vous obtenez l'élément avec id="foo" .
2. Vous trouvez ensuite les objets contenus dans cet objet qui ont class="bar" .
3. Cela renvoie une liste de nœuds de type tableau, et vous faites référence au premier élément de cette liste de nœuds.
4. Vous pouvez alors définir le innerHTML de cet élément pour modifier son contenu.

Avertissements : certains navigateurs plus anciens ne prennent pas en charge getElementsByClassName (par exemple, les anciennes versions d'IE). Cette fonction peut être mise en place en cas d'absence.

---

C'est là que je vous recommande d'utiliser une bibliothèque qui prend en charge les sélecteurs CSS3 de manière intégrée, plutôt que de vous soucier vous-même de la compatibilité avec les navigateurs (laissez quelqu'un d'autre faire tout le travail). Si vous voulez juste une bibliothèque pour faire cela, alors Sizzle fonctionnera très bien. Dans Sizzle, cela se fait de la manière suivante :

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

---

jQuery a la bibliothèque Sizzle intégrée et dans jQuery, ce serait :

$("#foo .bar").html("Goodbye world!");

Answer 3

Si cela doit fonctionner dans IE 7 ou inférieur, vous devez vous rappeler que getElementsByClassName n'existe pas dans tous les navigateurs. Pour cette raison, vous pouvez créer votre propre getElementsByClassName ou vous pouvez essayer ceci.

var fooDiv = document.getElementById("foo");

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
    childNode = fooDiv.childNodes[i];
    if (/bar/.test(childNode.className)) {
        childNode.innerHTML = "Goodbye world!";
    }
}

Answer 4

Le moyen le plus simple est de le faire :

function findChild(idOfElement, idOfChild){
  let element = document.getElementById(idOfElement);
  return element.querySelector('[id=' + idOfChild + ']');
}

ou plus lisible :

findChild = (idOfElement, idOfChild) => {
    let element = document.getElementById(idOfElement);
    return element.querySelector(`[id=${idOfChild}]`);
}

Answer 5

Nous pouvons également utiliser les sélecteurs CSS avec querySelector.

var targetDiv = document.querySelector('#foo .bar');
targetDiv.textContent = "Goodbye world!";