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

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

Answer 2

Vous pouvez utiliser getElementById o getElementsByClassName sur les éléments du DOM également. et pas seulement sur les document

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

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

Answer 3

Vous ne devez pas utiliser document.getElementByID parce que cela ne fonctionne que pour les contrôles côté client dont les identifiants sont fixes. 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>

utiliser ce :

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

// do not forget to add script tags as above

si vous voulez supprimer ou modifier une opération, ajoutez simplement "." derrière et effectuez les opérations.