Selector CSS

Se trata de localizar el primer elemento de la página que tenga el valor de texto dentro del atributo class

El contenido de este bloque se debe copiar al primer párrafo de la página

Los cambios se harán al pulsar en un botón..

Solución

El script sería el que sigue.

function copiar(){

var blq = document.querySelector(".texto");

var dst = document.querySelector("p");

dst.innerHTML = blq.innerHTML

}

function iniciar()

{

var boton = document.querySelector("#copiar");

boton.addEventListener('click', copiar)

}

El fragmento HTML de la página web posría ser algo así. Completa el resto de la página con head y las etiquetas restantes.

<body onload="iniciar()">

<div class="texto">

Contenido que se va a copiar al primer párrafo del documento

</div>

<div class="texto">

Este contenido no se va a copiar. Lo copiado parece aquí abajo.

</div>

<p></p>

<p><button id="copiar">Copiar</button></p>

 

Explicación

El evento onload de body nos asegura que todo está está ya cargado antes de ejecutar el script.

En este ejemplos se usael método querySelector() para localizar elementos. Este método usa un selector del estilo usado por CSS: un .nombre_clase (punto), almohadilla seguido del id (#id) o una etiqueta html (p, dov...).

En general este argumento admite todos los selectores usados en CSS, incluyento combinaciones 'p .code' se refiere al elemento con class code dentro del párrafo.

En todos los casos devuelve el primer elemento que responde a ese argumento.

En el ejemplo al poner querySelector(".texto") se selecciona el primer elemento con class="texto".

Mientras que document.querySelector("#copiar") devuelve el objeto correspondiente al bloque co id = "copiar", en este caso el botón.

Y document.querySelector("p") nos devuelve el primer párrafo dentro de document.

El resto del script es simple al pulsar el botón se produce un evento onclick que invoca a la función copiar(). En esta función se obtiene el objeto bloq y su contenido (blq.innerHTML) se copia al contenido del primier párrafo (dst) asginándolo a dst.innerHTML

Si no te basta con el primeir elemento y quieres usar slectores CSS para seleccionar todos los elementos que cumplan con el selector debes usar el método querySelectAll()