Как найти html элемент по атрибуту class

Как найти html элемент по его классу?

В этой статье хотелось бы рассказать, как можно быстро и легко найти html элемент по его классу. Поиск элементов в HTML документе — это очень распространённая задача, с которой очень часто сталкиваются многие программисты, если например, нужно выполнить парсинг сайта или какой-нибудь отдельной HTML страницы. В отличие от других классов для работы с web, многие из которых содержат уже готовые методы, для решения данной задачи, class webBrowser по умолчанию не предоставляет такого функционала. Поэтому, если Вам необходимо найти элемент по его классу, то Вы можете воспользоваться следующим способом.

И так, предположим, что у нас есть простая html страница, состоящая из трёх блоков div. Задача: найти второй элемент div по его классу.

<html>
<head></head>
<body>
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</body>
</html>

Создадим Windows Forms приложение, после чего добавим на форму: кнопку и элемент управления webBrowser. Если Вам не требуется графическое отображение страницы, то тогда замените control webBrowser на одноименный класс.

control webbrowser

Теперь нужно загрузить веб страницу. Например, это можно сделать с помощью метода webBrowser Navigate, о котором рассказывалось чуть ранее в одной из предыдущих статей, если интересно, то более подробно об этом можно прочитать здесь.

private void button1_Click (object sender, EventArgs e)
{
wb.Navigate("URL адрес");
}

Далее подписываемся на событие DocumentCompleted, чтобы дождаться полной загрузки страницы. Если страница содержит фреймы, то тогда возможно так же потребуется добавить дополнительную проверку, о которой так же рассказывалось чуть ранее.

private void wb_DocumentCompleted (object sender,
WebBrowserDocumentCompletedEventArgs e)
{
}

Будем считать, что страница на данный момент полностью загружена, и теперь можно переходить к решению нашей задачи. И так на данный момент нас больше всего интересует запись: div class = &#171;two&#187;, где div &#8212; это тэг, а class &#8212; это атрибут html элемента, который чаще всего используется для привязки стиля к одному или нескольким элементам на странице. И так, раз это html атрибут, то его можно легко найти с помощью метода GetAttribute. Но, перед этим нужно найти div элемент, у которого мы и будем искать эти атрибуты.

//получаем все div элементы на странице
HtmlElementCollection divs;
divs = wb.Document.Body.GetElementsByTagName("div");
foreach (HtmlElement div in divs)
{
//ищем html атрибут class со значением two
if (div.GetAttribute("class") == "two")
{
MessageBox.Show("Это второй блок!");
}
}

Не смотря на то, что коллекция (divs) содержит три элемента div, поиск по атрибуту class не даёт никаких результатов. Это происходит потому, что интерфейс HTMLElement, который описывает все элементы внутри дерева DOM, не содержит такого атрибута.

Interface HTMLElement
{
attribute DOMString id;
attribute DOMString title;
attribute DOMString lang;
attribute DOMString dir;
attribute DOMString className;
};

Как видно из описания интерфейса, вместо атрибута class используется атрибут className, это связано с тем, что во многих языках программирования слово class является ключевым словом, как например, в том же языке csharp, в результате чего часто возникали различные конфликтные ситуации, поэтому его было решено переименовать. Зная это, внесём небольшое изменение в наш выше написанный код:

if (div.GetAttribute("classname") == "two")

Проверяем, теперь всё работает!

Читайте также:

7 комментариев

  1. Виктор says:

    Очень понятно и познавательно. Автору респект)

  2. Дмитрий says:

    Уважаемый Админ.Помогите пожалуйста разобраться. Нужно в поисковой системе yandex нажать кнопку &#171;следующая&#187;.

    HtmlElementCollection a_tag;
    a_tag = webBrowser1.Document.GetElementsByTagName("a");
    foreach (HtmlElement he in a_tag)
    {
    if (he.InnerHtml == "следующая")
    he.InvokeMember("click");
    }

    использовал такой код,но он перестал работать.

  3. InnerHtml заменить на InnerText или OuterText.

    if (he.InnerText == "Следующая")
  4. Влад says:

    Автор, огромное тебе спасибо!

  5. Володя says:

    А как например в одноклассниках ok.ru нажать на кнопку вход.
    Класс этой кнопки должен быть таким как я понял button-pro __orange inlineBlock но его он не видет

  6. //получаем все элементы input
    HtmlElementCollection elmCol;
    elmCol = webBrowser1.Document.GetElementsByTagName("input");
    foreach (HtmlElement elmBtn in elmCol)
    {
    //input содержит класс button-pro?
    if (elmBtn.GetAttribute("classname").Contains("button-pro"))
    elmBtn.InvokeMember("Click");
    }
  7. Слава says:

    Помогите пожалуйста, нужно нажать на такую кнопку:

    HtmlElementCollection a_tag;
    a_tag = webBrowser1.Document.GetElementsByTagName(«input»);

    foreach (HtmlElement he in a_tag)
    {
    if (he.InnerText == «Зайти»)
    he.InvokeMember(«click»);
    }
    Такой код не хочет работать

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*