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

D'accord, j'ai déjà essayé JavaScript, mais la chose la plus utile que j'ai écrite est un sélecteur 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!" à "Au revoir 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.

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

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

getElementByIdne renvoie qu'un seul nœud, mais getElementsByClassNamerenvoie une liste de nœuds. Puisqu'il n'y a qu'un seul élément avec ce nom de classe (pour autant que je sache), vous pouvez simplement obtenir le premier (c'est à cela que [0]sert - 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>

Vous pouvez le faire comme ceci:

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 des erreurs et plus de brièveté, cela peut être fait 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 le innerHTMLde 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 recommande d'utiliser une bibliothèque qui prend en charge le sélecteur CSS3 intégré plutôt que de vous soucier de la compatibilité du navigateur vous-même (laissez quelqu'un d'autre 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!");

Si cela doit fonctionner dans IE 7 ou une version antérieure, 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!";
    }
}

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);
        }
    }
}

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}]`);
}

Vous ne devez pas utiliser document.getElementByID car il fonctionne uniquement pour les contrôles côté client dont les identifiants sont corrigés. Vous devriez utiliser jquery à la place comme dans l'exemple ci-dessous.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

utilisez ceci :

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

si vous voulez une opération de suppression de modification, ajoutez simplement "." derrière et faire les opérations