Obtiene el elemento dentro del elemento por clase e ID - JavaScript

Question

Muy bien, he incursionado en JavaScript antes, pero lo más útil que he escrito es un selector de estilo 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 cambiaría "Hello world!" para "¡Adiós mundo!" ? Sé cómo funcionan document.getElementByClass y document.getElementById, pero me gustaría ser más específico. Lo siento si esto se ha preguntado antes.

Answer 1

Bueno, primero es necesario seleccione los elementos con una función como getElementById.

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

getElementById sólo se devuelve un nodo, pero getElementsByClassName devuelve una lista de nodos. Como solo hay un elemento con ese nombre de clase (hasta donde puedo decir), puede obtener el primero (para eso sirve el [0], es como una matriz).

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

Puede hacerlo de esta manera:

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

o, si desea hacerlo con la menor comprobación de errores y más brevedad, se puede hacer en una línea como la siguiente:

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

En la explicación:

1. Usted recibe el elemento con id="foo".
2. A continuación, busca los objetos que están dentro de ese objeto que tienen class="bar".
3. Devuelve una lista de nodos similar a una matriz, por lo que hace referencia al primer elemento en esa lista de nodos
4. Puede configurar el innerHTML de ese elemento para cambiar su contenido.

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

---

Aquí es donde recomiendo el uso de una biblioteca que se ha incorporado en el apoyo del selector CSS3 lugar de preocuparse por la compatibilidad del navegador mismo (dejar que otra persona haga todo el trabajo). Si solo quieres una biblioteca para hacer eso, entonces Sizzle funcionará muy bien. En chisporroteo, esto se puede hacer de esta manera:

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

---

jQuery tiene la biblioteca chisporroteo incorporado y en jQuery, esto sería:

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

Answer 3

Si esto tiene que trabajar en el IE 7 o bajar es necesario recordar que getElementsByClassName no existe en todos los navegadores. Debido a esto, puede crear su propio getElementsByClassName o puede probar esto.

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

Usted no debe usado document.getElementById debido a que su trabajo sólo para los controles del lado del cliente, que las identificaciones son fijos. Deberías usar jquery en su lugar como en el siguiente ejemplo.

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

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

// do not forget to add script tags as above 

si quieres cualquier edición eliminar cualquier operación a continuación, sólo añadir "" atrás y hacer las operaciones

Answer 5

función recursiva:

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

La forma más sencilla de hacerlo es:

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

o mejor legibles:

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