document.querySelector() devolverá el primer elemento que coincida con el grupo de selectores especificado. Si no se encuentra ninguna coincidencia, se devuelve ‘null’.
Sintaxis:
var input = document.querySelector("input.email");
Devolverá el primer elemento de entrada que tenga la clase ‘correo electrónico’.
Analicemos ahora el error «document.querySelector devuelve nulo, pero el elemento existe»
Ejemplo 1 : analicemos el error del selector «id» . En esto, #(hash) falta en el valor de querySelector. # definir que estamos seleccionando el selector “id”. En la salida, al hacer clic en el botón Enviar, podemos ver el siguiente error.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<h2 style="color:green;">GeeksforGeeks</h2>
<button id="out">Submit</button>
<script>
const get = document.querySelector('out')
get.addEventListener('click',(e)=>{
get.style.backgroundColor='red';
get.innerHTML="Hii GFG , How r u???"
})
</script>
</body>
</html>
Producción:
Ejemplo 2: analicemos el error del selector de clase . en esto (punto) falta en el valor de querySelector() . El . (punto) define que estamos seleccionando el selector de clase.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<button class="out">Submit</button>
<script>
const get = document.querySelector('out')
get.addEventListener('click',(e)=>{
get.style.backgroundColor='red';
get.innerHTML="Hii GFG , How r u???"
})
</script>
</body>
</html>
Producción:
- Al hacer clic en el botón Enviar:
- Al hacer clic en el archivo en la sección «Fuente»:
Nota: Ambos dan el mismo error que el desarrollador necesita para especificar el tipo de selector (ya sea id o clase). En ambos ejemplos, falta, por lo que da el mismo error en las imágenes de salida.
Ejemplo 3: El siguiente código muestra la solución al problema anterior. Necesitamos especificar el tipo de selector que estamos usando como se muestra a continuación. Obtenemos el resultado correcto ya que el código está funcionando.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<button class="out">Submit</button>
<script>
const get = document.querySelector('.out')
get.addEventListener('click',(e)=>{
get.style.backgroundColor='red';
get.innerHTML="Hii GFG , How r u???"
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por surbhikumaridav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA