Как использовать CSS-селектор – QuerySelector, QuerySelectorAll
Селекторы CSS используются для выбора HTML-элементов, которые вы хотите стилизовать, и применения набора правил CSS. Кроме того, вы можете перемещаться по HTML-документу с помощью селекторов CSS и извлекать информацию о выбранных элементах или редактировать их. Селекторы CSS используются для объявления того, к какому из элементов разметки применяется стиль, своего рода выражение соответствия. Aspose.HTML API позволяет создавать шаблон поиска для соответствия элементам в дереве документа на основе синтаксиса селекторов CSS.
В этой статье вы узнаете, как эффективно применять селекторы для выбора элементов, которые вы хотите стилизовать, используя
QuerySelector(selector) и
QuerySelectorAll(selector) методов класса
Document. Методы позволяют быстро и легко извлекать узлы элементов из DOM путем сопоставления с селекторами. Вы можете выбирать элементы по классу, идентификатору, имени или любому сложному селектору CSS (complex CSS selector).
Для получения дополнительной информации о том, как эффективно применять селекторы для выбора элементов, которые вы хотите стилизовать, посетите статью Селекторы CSS. Вы познакомитесь с базовыми селекторами, комбинаторными селекторами, селекторами атрибутов, групповыми селекторами и псевдоселекторами.
Вы можете скачать полные примеры и файлы данных с GitHub.
QuerySelector() для навигации по HTML
Метод QuerySelector() используется для запроса элемента DOM, который соответствует селектору CSS. Он возвращает первый элемент в документе, соответствующий указанному селектору. Если совпадений не найдено, возвращается ноль. В следующем примере мы используем селектор элементов CSS, чтобы найти первый элемент абзаца и вывести его содержимое в консоль:
C# Example
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"));Кроме того, в примере C# для выбранного элемента были изменены цвет текста и цвет фона. Следующий пример HTML-кода включает JavaScript, использующий метод 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() для стилизации выбранного элемента
Метод
QuerySelector() принимает селектор, чтобы определить, какой элемент должен быть возвращен, и возвращает первый соответствующий элемент в поддерево узла. Если соответствующий узел не найден, возвращается null. В следующем примере C# метод QuerySelector() принимает в качестве параметра селектор div:last-child, что означает выбор элемента <div>, который является последним дочерним элементом его родителя. Примечание. Метод QuerySelector() возвращает первый элемент, соответствующий селектору.
C# Example
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>Давайте посмотрим на результат использования метода QuerySelector() для изменения стиля элемента <div>, соответствующего селектору: а) изображение исходного HTML-документа; б) изображение HTML-документа после изменения стиля.
QuerySelectorAll() для стилизации выбранных элементов
Если вам нужен список всех элементов, соответствующих указанным селекторам, вы должны использовать метод QuerySelectorAll().
В следующем примере мы используем метод
QuerySelectorAll() для навигации по документу HTML и поиска нужные элементы. Этот метод принимает в качестве параметра селектор запроса и возвращает NodeList всех элементов, соответствующих указанному селектору. Мы выбираем все элементы, чей атрибут class равен square2, и перекрашиваем их:
C# Example
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>Все элементы с class="square2" были перекрашены. На рисунке показан результат применения метода QuerySelectorAll() (б) к исходному файлу
spring.html (а):
Aspose.HTML предлагает бесплатные Веб-приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчиков, инструментов SEO, генераторов HTML-кода и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ эффективно и действенно решать ваши задачи, связанные с HTML.
