web-dev-qa-db-fra.com

Obtenir l'élément à l'intérieur de l'élément par classe et par ID - JavaScript

D'accord, j'ai déjà utilisé JavaScript, mais la chose la plus utile que j'ai écrite est un sélecteur de style CSS. Donc, je suis un peu nouveau pour cela. Disons que j'ai un code HTML comme celui-ci:

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

Comment pourrais-je changer "Hello world!" à "Au revoir le monde!" ? Je sais comment document.getElementByClass et document.getElementById fonctionnent, mais j'aimerais être plus précis. Désolé si cela a été demandé avant.

javascriptgetelementbyidgetelementsbyclassname
104
Tanner Babcock

Eh bien, vous devez d’abord sélectionner les éléments avec une fonction comme getElementById.

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

getElementById ne renvoie qu'un seul noeud, mais getElementsByClassName renvoie une liste de noeuds. Comme il n'y a qu'un seul élément avec ce nom de classe (pour autant que je sache), vous pouvez obtenir le premier (c'est à cela que sert le [0], c'est comme un tableau).

Ensuite, vous pouvez changer le code 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>
191
Joseph Marikle

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'erreur 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, vous référencez donc le premier élément de cette liste de nœuds
  4. Vous pouvez ensuite définir la innerHTML de cet élément pour en modifier le contenu.

Mises en garde: certains navigateurs plus anciens ne prennent pas en charge getElementsByClassName (par exemple, les anciennes versions de IE). Cette fonction peut être mise en place si elle est manquante.

C’est la raison pour laquelle je recommande d’utiliser une bibliothèque dotée de la prise en charge intégrée du sélecteur CSS3 plutôt que de s’inquiéter de la compatibilité du navigateur (laissez l’autre personne faire tout le travail). Si vous voulez juste une bibliothèque pour le faire, alors Sizzle fonctionnera très bien. Dans Sizzle, cela se ferait comme ceci:

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!");
13
jfriend00

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 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!";
    }
}
5
John Hartsock

Fonction récursive:

function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}
3
Avi Shimshilashvili

La façon la plus simple de le faire est:

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

ou mieux lisible:

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