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

Question

OK, mi sono già dilungato in 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:

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

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.

Answer 1

Beh, in primo luogo è necessario selezionare gli elementi con una funzione come getElementById.

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

getElementById restituisce un solo nodo, ma getElementsByClassName restituisce un elenco dei nodi. Dato che c'è un solo elemento con quel nome di classe (per quanto posso dire), puoi semplicemente prendere il primo (è quello che è lo [0] per-è proprio come un array).

Quindi, è possibile modificare l'html con .innerHTML.

targetDiv.innerHTML = "Goodbye world!"; 

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

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

Answer 2

Si può fare in questo modo:

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

o, se si vuole farlo con con meno controllo degli errori e più brevità, può essere fatto in una sola riga come questa:

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

In spiegazione:

1. si ottiene l'elemento con id="foo".
2. Quindi si trovano gli oggetti contenuti all'interno dell'oggetto che hanno class="bar".
3. che restituisce un array nodeList come, in modo si fa riferimento il primo elemento che nodeList
4. È quindi possibile impostare la innerHTML di tale elemento 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.

---

Questo è dove mi consiglia di utilizzare una libreria che ha il supporto integrato selettore CSS3 piuttosto che preoccuparsi di compatibilità del browser te (lasciare che qualcun altro fare tutto il lavoro). Se vuoi solo una libreria per farlo, allora Sizzle funzionerà alla grande. In Sizzle, questo sarebbe essere fatto in questo modo:

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

---

jQuery ha biblioteca Sizzle incorporato e in jQuery, questo sarebbe:

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

Answer 3

Se questo ha bisogno di lavorare 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!"; 
    } 
} 

Answer 4

Si consiglia di non utilizzare document.getElementById perché il suo lavoro solo per i controlli lato client che id sono fissi. Dovresti usare jquery invece come nell'esempio qui sotto.

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

uso questo: ""

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

// do not forget to add script tags as above 

se volete qualsiasi modifica cancellare qualunque operazione poi basta aggiungere alle spalle e fare le operazioni

Answer 5

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

Answer 6

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