Ottieni elemento all'interno dell'elemento per classe e ID - JavaScript

Va bene, mi sono dilettato in JavaScript prima, ma la cosa più utile che ho scritto è un cambio di stile CSS. Quindi sono un po 'nuovo in questo. Diciamo che ho un codice HTML come questo:

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

Come cambierei "Ciao mondo!" a "Arrivederci mondo!" ? So come funzionano document.getElementByClass e document.getElementById, ma vorrei essere più specifico. Scusate se questo è stato già chiesto precedentemente.

Bene, prima devi selezionare gli elementi con una funzione simile getElementById.

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

getElementByIdrestituisce solo un nodo, ma getElementsByClassNamerestituisce un elenco di nodi. Dal momento che esiste solo un elemento con quel nome di classe (per quanto posso dire), puoi semplicemente ottenere il primo (ecco a cosa [0]serve - è proprio come un array).

Quindi, puoi cambiare l'html con .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>

Puoi farlo in questo modo:

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

oppure, se vuoi farlo con meno controllo degli errori e più brevità, puoi farlo in una riga come questa:

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

In spiegazione:

1. Ottieni l'elemento con id="foo".
2. Quindi trovi gli oggetti contenuti in quell'oggetto che hanno class="bar".
3. Ciò restituisce un nodeList simile ad un array, quindi fai riferimento al primo elemento in quel nodeList
4. È quindi possibile impostare l' innerHTMLelemento di quell'elemento per modificarne il contenuto.

Avvertenze: alcuni browser meno recenti non supportano getElementsByClassName(ad esempio versioni precedenti di IE). Tale funzione può essere shimmed in posizione se mancante.

Qui è dove consiglio di utilizzare una libreria che ha il supporto selettore CSS3 incorporato piuttosto che preoccuparsi della compatibilità del browser (lasciare che qualcun altro faccia tutto il lavoro). Se vuoi che solo una biblioteca lo faccia, allora Sizzle funzionerà alla grande. In Sizzle, questo sarebbe fatto così:

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

jQuery ha la libreria Sizzle integrata e in jQuery, questo sarebbe:

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

Se questo deve funzionare in IE 7 o versioni precedenti, è necessario ricordare che getElementsByClassName non esiste in tutti i browser. Per questo motivo puoi creare il tuo getElementsByClassName oppure puoi provare questo.

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

Funzione ricorsiva:

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

Il modo più semplice per farlo è:

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

o meglio leggibile:

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

Document.getElementByID non dovrebbe essere utilizzato perché funziona solo per i controlli lato client quali ID sono corretti. Dovresti usare jquery come nell'esempio seguente.

<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>

Usa questo :

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

// do not forget to add script tags as above

se si desidera rimuovere, modificare qualsiasi operazione, aggiungere semplicemente "." dietro e fare le operazioni