Ottieni elemento all’interno dell’elemento per class e ID – JavaScript

Bene, ho già utilizzato JavaScript, ma la cosa più utile che ho scritto è un commutatore di stili CSS. Quindi sono un po ‘nuovo a questo. Diciamo che ho un codice HTML come questo:

Hello world!

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

Bene, per prima cosa è necessario selezionare gli elementi con una funzione come getElementById .

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

getElementById restituisce solo un nodo, ma getElementsByClassName restituisce un elenco di nodes. Dato che c’è un solo elemento con quel nome di class (per quanto posso dire), puoi semplicemente ottenere il primo (è ciò che è [0] per-è proprio come un array).

Quindi, puoi cambiare l’html con .innerHTML .

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

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 errori di controllo e più brevità, può essere fatto in una riga come questa:

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

Nella spiegazione:

  1. Ottieni l’elemento con id="foo" .
  2. Quindi trovi gli oggetti contenuti in quell’object che hanno class="bar" .
  3. Questo restituisce un elenco di nodes di tipo array, quindi fai riferimento al primo elemento in tale elenco dei nodes
  4. È quindi ansible impostare il innerHTML di innerHTML per modificarne il contenuto.

Avvertenze: alcuni browser meno recenti non supportano getElementsByClassName (ad esempio versioni precedenti di IE). Quella funzione può essere rimessa a posto se mancante.


È qui che raccomando di utilizzare una libreria con supporto per selettore CSS3 incorporato piuttosto che preoccuparsi della compatibilità del browser (lasciare che qualcun altro faccia tutto il lavoro). Se vuoi solo una libreria per farlo, allora Sizzle funzionerà alla grande. In Sizzle, questo sarebbe stato fatto in questo modo:

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

jQuery ha la libreria Sizzle built-in e in jQuery, questo sarebbe:

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

Se questo deve funzionare in IE 7 o inferiore, è necessario ricordare che getElementsByClassName non esiste in tutti i browser. Per questo motivo puoi creare il tuo getElementsByClassName o 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}]`); } 

Non si dovrebbe utilizzare document.getElementByID perché funziona solo per i controlli lato client quali ID sono corretti. Dovresti usare jquery invece come nell’esempio qui sotto.

  
Hello world!

Usa questo :

 $("[id^='foo']").find("[class^='bar']") // do not forget to add script tags as above 

se vuoi rimuovere qualsiasi modifica, aggiungi semplicemente “.” dietro e fai le operazioni