Este documento explica dos nuevos métodos de JavaScript, querySelector() y querySelectorAll(), que permiten seleccionar elementos en el DOM de manera similar a los selectores CSS. querySelector() devuelve el primer elemento que coincide con el selector, mientras que querySelectorAll() devuelve una lista con todos los elementos coincidentes. El documento proporciona ejemplos de cómo usar estos métodos para agregar controladores de eventos a elementos seleccionados.

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]