Selectores en Javascript
Estos selectores funcionan de forma muy similar a los selectores que se usan en CSS vistos anteriormente.
Los selectores son utilizados para obtener los elementos que coincidan con el criterio de búsqueda establecido, ahora bien dicho criterio puede aplicar en ciertos casos a más de un elemento del DOM. En dichos casos el selector aplicado retornará los resultados obtenidos en el DOM.
Selector por identidad (valor del atributo id de un elemento)
ver archivo "selectores-identidad.js"
para realizar una selección por identidad, simplemente se debe realizar un selector utilizando
"#VALOR_DEL_ID_DEL_ELEMENTO".
Por ejemplo, si tenemos un elemento así:
<input type="text" id="unCampoDeTexto" />
El selector por identidad para acceder a dicho elemento sería:
"#unCampoDeTexto"
En javascript se puede utilizar la función document.getElementById('unCampoDeTexto');
para obtener la referencia al objeto que tiene el id con el valor pasado como parámetro.
Selector por clase (valor del atributo class de un elemento)
ver archivo "selectores-clase.js"
para realizar una selección por clase, se debe realizar un selector utilizando
".VALOR_DE_UNA_CLASE_UTILIZADA_EN_EL_ELEMENTO".
Por ejemplo, si tenemos un elemento así:
<input type="text" class="unaClase otraClase" />
El selector por clase para acceder a dicho elemento sería:
".unaClase" o ".otraClase"
En javascript se puede utilizar la función document.getElementsByClassName('unaClase');
para obtener la referencia a los objetos que utilizan la clase pasada como parámetro.
Selector por tag (tipo de elemento HTML => tag)
ver archivo "selectores-tag.js"
para realizar una selección por tag, se debe realizar un selector utilizando
"NOMBRE_DEL_TAG_A_BUSCAR".
Por ejemplo, si tenemos un elemento así:
<p />
El selector por tag para acceder a dicho elemento sería:
"p"
En javascript se puede utilizar la funció document.getElementsByTagName('p');
para obtener la referencia a los objetos que son del tag pasado por parámetro.
Selector por atributo
ver archivo "selectores-atributo.js"
para realizar una selección por atributo, se debe realizar un selector utilizando
"[NOMBRE_ATRIBUTO=”VALOR_ATRIBUTO”]".
Por ejemplo, si tenemos los siguientes elementos:
<a href="https://www.google.com" class="case1 clase2 clase3" hreflang="en">Primer link</a>
<a href="https://www.google.com.uk" class="case1" hreflang="en-UK">Segundo link</a>
<a href="google.com" class="clase2" target="_blank" hreflang="english">Tercer link</a>
El selector por atributo para acceder a dicho elemento (el primero) sería:
"[href="https://www.google.com"]"
Adicionalmente existen otros comparadores. Para mayor detalle ver el script
"selectores-atributo.js".
En javascript se puede utilizar la funció document.querySelector('[href="https://www.google.com"]');
para obtener la referencia al objeto que cumple con el selector pasado por parámetro.
Si lo que se busca es obtener todos los elementos que cumplen una condición de
selección entonces se puede utilizar la funció document.querySelectorAll('.clase1'); para obtener la referencia
a los objetos que utilizan la clase pasada como parámetro.
Selector combinados
ver archivo "selectores-combinados.js"
Para realizar una selección combinada simplemente hacemos un selector que se combine con otros
selectores de una manera específica.
Cuando se quiere buscar con más de un criterio, los criterios de búsqueda son separados por coma
,.
Por ejemplo, si tenemos un elemento así:
<div></div>
<div class="clase1"></div>
<div class="clase1"></div>
<div class="clase2"></div>
Un selector combinado que nos retorne esos elementos sería:
"div.clase1, div.clase2"
En este caso nos retornará el segundo, tercer y cuarto div del ejemplo.