queryselectorall - queryselector javascript

Obtener 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 "Hola mundo"? 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 debes seleccionar los elementos con una función como getElementById .

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

getElementById solo devuelve un nodo, pero getElementsByClassName devuelve una lista de nodos. Dado que solo hay un elemento con ese nombre de clase (hasta donde puedo decir), puede obtener el primero (para eso es [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

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 3

La forma más fácil de hacerlo es:

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

o mejor legible:

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

Answer 4

No debe usar document.getElementByID porque funciona solo para los controles del lado del cliente cuyos identificadores están corregidos. 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>

utilizar esta :

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

// do not forget to add script tags as above

si quieres eliminar cualquier operación de edición, simplemente agrega "." detrás y hacer las operaciones

Answer 5

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 comprobación de errores y más brevedad, se puede hacer en una línea como esta:

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

En explicación:

1. Obtienes el elemento con id="foo" .
2. Luego encuentra los objetos que están contenidos dentro de ese objeto que tienen class="bar" .
3. Eso devuelve una lista de nodos similar a una matriz, por lo que hace referencia al primer elemento en esa lista de nodos
4. Luego puede configurar el innerHTML de ese elemento para cambiar su contenido.

Advertencias: algunos navegadores antiguos 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 usar una biblioteca que tenga incorporado el selector de CSS3 en lugar de preocuparse por la compatibilidad del navegador (deje que otra persona haga todo el trabajo). Si solo quieres una biblioteca para hacer eso, entonces Sizzle funcionará muy bien. En Sizzle, esto se haría de esta manera:

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

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

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

Answer 6

Si esto necesita funcionar en IE 7 o inferior, debe 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!";
    }
}