Cómo utilizar el selector CSS – QuerySelector, QuerySelectorAll
Los selectores de CSS se utilizan para seleccionar los elementos HTML a los que desea aplicar estilo y aplicar un conjunto de reglas CSS. Además, puede navegar por un documento HTML utilizando selectores CSS y extraer información sobre los elementos seleccionados o editarlos. Los selectores CSS se utilizan para declarar a cuál de los elementos de marcado se aplica un estilo, una especie de expresión de coincidencia. La API Aspose.HTML le permite crear un patrón de búsqueda para hacer coincidir elementos en un árbol de documentos basado en la sintaxis de selectores CSS.
En este artículo, descubra cómo aplicar selectores de manera efectiva para seleccionar los elementos a los que desea aplicar estilo usando los métodos
QuerySelector(selector) y
QuerySelectorAll(selector) del
Document clase. Los métodos le permiten recuperar rápida y fácilmente nodos de elementos del DOM comparándolos con selectores. Puede seleccionar elementos por clase, identificación o nombre, o cualquier selector CSS complejo.
Para obtener más información sobre cómo aplicar selectores de manera efectiva para seleccionar los elementos a los que desea aplicar estilo, visite el artículo Selectores CSS. Cubrirá los selectores básicos, los selectores combinados, los selectores de atributos, los selectores de grupo y los pseudo selectores.
QuerySelector() para navegar HTML
El método QuerySelector() se utiliza para consultar un elemento DOM que coincide con un selector CSS. Devuelve el primer elemento del documento que coincide con el selector especificado. Si no se encuentran coincidencias, se devuelve nulo. En el siguiente ejemplo utilizamos el Selector de elementos CSS para encontrar el elemento del primer párrafo y enviar su contenido a la consola:
Ejemplo de C#
1// Prepare path to source HTML file
2string documentPath = Path.Combine(DataDir, "queryselector.html");
3
4// Create an instance of an HTML document
5var document = new HTMLDocument(documentPath);
6
7// Here we create a CSS Selector that extracts the first paragraph element
8var element = document.QuerySelector("p");
9
10// Print content of the first paragraph
11Console.WriteLine(element.InnerHTML);
12// output: The QuerySelector() method returns the first element in the document that matches the specified selector.
13
14// Set style attribute with properties for the selected element
15element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe;");
16
17// Save the HTML document to a file
18document.Save(Path.Combine(OutputDir, "queryselector-p.html"));Además, en el ejemplo de C#, se cambiaron el color del texto y el color de fondo del elemento seleccionado. El siguiente ejemplo de código HTML incluye JavaScript que utiliza el método querySelector(“p”):
JavaScript querySelector()
1<html>
2<head>
3</head>
4 <body>
5 <h1>QuerySelector() Method</h1>
6 <p>The QuerySelector() method returns the first element in the document that matches the specified selector.</p>
7 <p>CSS Selectors are used to declare which of the markup elements a style applies to, a kind of match expression.</p>
8 </body>
9 <script>
10 // Create a CSS Selector that selects the first paragraph element
11 var element = document.querySelector("p");
12
13 // Set style attribute with properties for the selected element
14 element.setAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe");
15 </script>
16</html>QuerySelector() para aplicar estilo al elemento seleccionado
El método
QuerySelector() acepta el selector para determinar qué elemento se debe devolver y devuelve el primer elemento coincidente en el subárbol del nodo. Si no se encuentra ningún nodo coincidente, se devuelve nulo. En el siguiente ejemplo de C#, el método QuerySelector() toma como parámetro el selector div:last-child que significa seleccionar el elemento <div> que es el último hijo de su padre. Nota: El método QuerySelector() devuelve el primer elemento que coincide con el selector.
Ejemplo de C#
1// Prepare output path for HTML document saving
2string savePath = Path.Combine(OutputDir, "css-celector-style.html");
3
4// Prepare path to source HTML file
5string documentPath = Path.Combine(DataDir, "nature.html");
6
7// Create an instance of an HTML document
8var document = new HTMLDocument(documentPath);
9
10// Create a CSS Selector that selects <div> element that is the last child of its parent
11var element = document.QuerySelector("div:last-child");
12
13// Set the style attribute with properties for the selected element
14element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe; text-align:center");
15
16// Save the HTML document to a file
17document.Save(Path.Combine(savePath));JavaScript querySelector()
1<script>
2 // Create a CSS Selector that selects <div> element that is the 2-d child of its parent
3 var element = document.querySelector("div:nth-child(2)");
4
5 // Set style attribute with properties for the selected element
6 element.setAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe; text-align:center");
7</script>Veamos el resultado de usar el método QuerySelector() para cambiar el estilo del elemento <div> que coincide con el selector: a) una imagen del documento HTML original; b) la imagen del documento HTML después de cambiar el estilo.
QuerySelectorAll() para aplicar estilo a los elementos seleccionados
Si desea una lista de todos los elementos que coinciden con los selectores especificados, debe utilizar el método QuerySelectorAll().
En el siguiente ejemplo, utilizamos el método
QuerySelectorAll() para navegar a través de un documento HTML y buscar los elementos necesarios. Este método toma como parámetro el selector de consultas y devuelve una NodeList de todos los elementos que coinciden con el selector especificado. Seleccionamos todos los elementos cuyo atributo class sea igual a square2 y les cambiamos el color:
Ejemplo de C#
1// Prepare output path for HTML document saving
2string savePath = Path.Combine(OutputDir, "css-selector-color.html");
3
4// Prepare path to source HTML file
5string documentPath = Path.Combine(DataDir, "spring.html");
6
7// Create an instance of an HTML document
8var document = new HTMLDocument(documentPath);
9
10// Here we create a CSS Selector that extracts all elements whose 'class' attribute equals 'square2'
11var elements = document.QuerySelectorAll(".square2");
12
13// Iterate over the resulted list of elements
14foreach (HTMLElement element in elements)
15{
16 // Set the style attribute with new background-color property
17 element.Style.BackgroundColor = "#b0d7fb";
18}
19
20// Save the HTML document to a file
21document.Save(Path.Combine(savePath));JavaScript querySelectorAll()
1<script>
2 // Create a CSS Selector that extracts all elements whose 'class' attribute equals 'square2'
3 var elements = document.querySelectorAll(".square2");
4
5 // Iterate over the resulted list of elements and set style background-color property
6 for(var i = 0; i < elements.length; i++){
7 document.querySelectorAll(".square2")[i].style.backgroundColor = "#b0d7fb";
8 }
9</script>Todos los elementos con class="square2" fueron recoloreados. La figura muestra el resultado de aplicar el método QuerySelectorAll() (b) al archivo fuente
spring.html (a):
Aspose.HTML ofrece Aplicaciones web HTML gratuitas que son una colección en línea de convertidores, fusiones, herramientas de SEO, generadores de código HTML, herramientas de URL y más. Las aplicaciones funcionan en cualquier sistema operativo con un navegador web y no requieren ninguna instalación de software adicional. Es una manera rápida y fácil de resolver de manera eficiente y efectiva sus tareas relacionadas con HTML.
