javascript - Obtener elemento dentro del elemento por clase e ID

Muy bien, ya he incursionado en JavaScript antes, pero lo más útil que he escrito es un conmutador de estilos CSS. Entonces soy algo nuevo en esto. Digamos que tengo un código HTML como este:

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

¿ Cómo me cambiaría Hello world!a Goodbye world!?

Sé cómo document.getElementsByClassNamey document.getElementByIdtrabajo, pero me gustaría ser más específico. Lo siento si esto se ha preguntado antes.

Oct 19 '11 07:10 Tanner Babcock

Bueno, primero debes seleccionar los elementos con una función como getElementById.

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

getElementByIdSolo devuelve un nodo, pero getElementsByClassNamedevuelve una lista de nodos. Dado que solo hay un elemento con ese nombre de clase (hasta donde yo sé), puedes obtener el primero (para eso es [0], es como una matriz).

Luego, puedes cambiar el 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>

Expandir fragmento

Oct 19 '2011 00:10 Joseph Marikle

Puedes hacerlo así:

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

o, si desea hacerlo con menos verificación de errores y más breve, puede hacerlo en una línea como esta:

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

En explicación:

Obtienes el elemento con id="foo".
Luego encuentras los objetos contenidos dentro de ese objeto que tienen class="bar".
Eso devuelve una lista de nodos similar a una matriz, por lo que hace referencia al primer elemento de esa lista de nodos
Luego puede configurar innerHTMLese elemento para cambiar su contenido.

Advertencias: algunos navegadores antiguos no son compatibles getElementsByClassName(por ejemplo, versiones anteriores de IE). Esa función se puede colocar en su lugar si falta.

Aquí es donde recomiendo usar una biblioteca que tenga soporte integrado para el selector CSS3 en lugar de preocuparse usted mismo por la compatibilidad del navegador (deje que otra persona haga todo el trabajo). Si solo quieres una biblioteca para hacer eso, Sizzle funcionará muy bien. En Sizzle, esto se haría así:

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

jQuery tiene la biblioteca Sizzle incorporada y en jQuery, esto sería:

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

Oct 19 '2011 00:10 jfriend00

Obtener elemento dentro del elemento por clase e ID - JavaScript