Cómo encontrar elementos HTML por selectores CSS
Este artículo discutirá los procedimientos para encontrar los elementos HTML por parte de CSS Selectors. Además, también explicaremos el uso de métodos QuerySelector () y QuerySelectorAll () para descubrir los elementos de los selectores de CSS, con la ayuda de ejemplos. Entonces, comencemos!
Método QuerySelector () para encontrar elementos por selectores CSS
La interfaz del elemento tiene un "QuerySelector ()"Método, que puede ser utilizado para encontrar elementos por selectores CSS. El método QuerySelector () devolverá un "nulo"Valor si no se encuentra ningún elemento coincidente. Este método utiliza el "PRESIDERO PRIMERO"Método transversal para atravesar los nodos del documento.
Sintaxis
elemento = documento.QuerySelector (selectores);El método QuerySelector () toma "selectores"Como un argumento que es una cadena DOM que comprende uno o más selectores CSS válidos.
Cómo usar el método QuerySelector () para encontrar elementos por selectores CSS
Ahora, mostraremos el procedimiento para encontrar nuestros elementos por selectores CSS utilizando el método QuerySelector ().
Ejemplo 1: Uso del método QuerySelector () para encontrar elementos por selectores CSS
En el primer ejemplo, el método QuerySelector () descubrirá el primero
elemento en con class = "tutorial"Y establece su color de fondo en"amarillo":
!Doctype html>Encontrar elementos HTML por CSS Selector
El método QuerySelector ()
Esto es linuxhint.com = "tutorial"
El encabezado principal
Primer párrafo.
Ejecutar el programa anterior en cualquier editor de código o codificación en línea Sandbox, sin embargo, utilizaremos el JSBIN para este propósito:
Como puede ver el fondo del primero ""El elemento se cambia a"amarillo":
Ejemplo 2: Uso del método QuerySelector () para encontrar elementos por selectores CSS
El programa dado a continuación cambiará el elemento de texto con id = "muestra":
Encontrar elementos de selectores CSS
El método QuerySelector ()
Cambiaremos el elemento de texto con:
Este es un elemento P que tiene el.
Ejecución del código anterior le mostrará la siguiente salida:
Ejemplo 3: Uso del método QuerySelector () para encontrar elementos por selectores CSS
En el tercer ejemplo, usaremos el "QuerySelector ()"Método para encontrar el primero
elemento con el padre y luego cambiar su color de fondo a "amarillo":
Primer elemento
Soy el primer elemento P y el elemento div es mi padre
Segundo elemento
Soy el segundo elemento P y el elemento Div es mi padre.
Haga clic en el botón Dado abajo para cambiar el color de fondo del primer elemento P
Clickea en el "Cambiar el color"Botón para cambiar el color de fondo del primero
elemento:
QuerySelectorAll () para encontrar elementos por selectores CSS
En HTML, el método QuerySelectorAll () devuelve un objeto nudelista estático que comprende una colección de los elementos infantiles de un elemento coincidente con los selectores CSS especificados. Los números de índice se utilizan para averiguar los nodos, comenzando en 0.
Sintaxis
elemento.QuerySelectorAll (selectores)El método QuerySelectorAll () toma "selectores"Como argumento, que es una cadena DOM que comprende uno o más selectores CSS válidos.
Ejemplo 1: Uso del método QuerySelectorAll () para encontrar elementos por selectores CSS
En el primer ejemplo, utilizaremos el método QuerySelectorAll () para encontrar todo
elementos en el documento. Después de hacerlo, establecerá el "color de fondo"De la primera
elemento a "rosa":
Principal encabezado con
Primer párrafo con.
Segundo párrafo con.
Cambiar el color de fondo del primer elemento P con
Nota: estamos aprendiendo a encontrar elementos de los selectores de CSS
Como puede ver, el fondo del primero
El elemento se cambia a "rosa":
Ejemplo 2: Uso del método QuerySelectorAll () para encontrar elementos por selectores CSS
Ahora, escribiremos un programa JavaScript para descubrir el número total de elementos con el "tutorial"Clase utilizando el"longitud"Propiedad del objeto Nodelist:
El primer elemento divir con
Segundo elemento Div con
Un elemento p con
Haga clic en el siguiente botón para averiguar cómo el número de elementos con el "tutorial" de la clase
Ahora, la salida te mostrará un "Haz click en mi" botón; Haga clic en él para verificar el número de elementos con class = "tutorial":
Ejemplo 3: Uso del método QuerySelectorAll () para encontrar elementos por selectores CSS
En el siguiente ejemplo, utilizaremos el método QuerySelectorAll () para encontrar "H2","div", y "durar"Elementos. Después de encontrar los elementos especificados, cambiaremos su color de fondo a "rojo":
El elemento principal
El segundo elemento H2
Un elemento div
Un elemento P.
Un elemento p que tiene = "color: azul;"> Span elemento
Haga clic en el siguiente botón para establecer el color de fondo de todos los elementos H2, DIV y SPAN.