2. NUEVOS SELECTORES
Para mejorar el nivel en JavaScript tenemos que aplicar en
HTML toda clase de selectores CSS por medio de nuevos
métodos :
 querySelector()
 querySelectorAll()

3. querySelector()
Es aquel que retorna el primer elemento de la etiqueta
<p> que esta dentro del <div>
Estos son declarados usando comillas.
function hacerclic()
{
document.querySelector("#principal p:first child").onclick=mostraraletra;
}
function mostraraletra()
{
alert('hizo clic');
}
window.onload=hacerclic;

4. querySelectorAll()
En este método lo que retorna son todos los elementos
que concuerda con el grupo de selectores declarados
entre el paréntesis , el valor retornado es un arreglo (array)
aquí utiliza los tres metodos:
function hacerclic(){
var lista=document.querySelectorAll("#principal p");
lista[0].onclick=mostraraletra;
}
function mostraraletra(){
alert('hizo clic');
}
window.onload=hacerclic;
Va tomando cada elemento de <p> dentro <div> y va
guardando en un arreglo de una lista y comienza con la
posición 0

5. function hacerclic(){
var lista=document.querySelectorAll("#principal p");
for(var f=0; f<lista.length; f++){
lista[f].onclick=mostraraletra;
}
}
function mostraraletra(){
alert('hizo clic');
}
window.onload=hacerclic;
Para interactuar con una lista de elementos retornados
utlizamos un bucle for

6. function hacerclic(){
var lista=document.getElementById('principal').querySelectorAll("p");
lista[0].onclick=mostraraletra;
}
function mostraraletra(){
alert('hizo clic');
}
window.onload=hacerclic;
Aquí mostramos la combinacion de metodos donde
utilizamos el getElementById , querySelectorAll y el arreglo
la lista[0]