是否有可能解决网站上没有ID的元素？

Question

在Vb.net中，使用Web浏览器，我通常使用GetElementById来解决例如按钮的问题。我知道有GetElementFromPoint，我觉得极其费力。

当ID未知时，是否有更好，更简单的方法？

Answer 1

看到这个问题时不时被问到，我会看看我是否无法一劳永逸地解决这个问题。以下是有关如何查找没有ID的元素的更广泛的指南：

- 基础知识 -

您可以使用大量内置属性和方法来识别元素。最常见的包括：

• HtmlElement.GetElementsByTagName()

  方法。返回具有指定HTML标记的文档/元素中所有元素的集合。这可以在HtmlElement上调用，也可以在HtmlDocument本身调用。

• HtmlElement.GetAttribute()

  方法。返回指定HtmlElement上的特定属性的值。

• HtmlElement.InnerHtml

  性质。返回位于指定元素内的所有HTML代码（但不是元素本身的代码）。

• HtmlElement.InnerText

  性质。返回位于指定元素内的所有文本（从HTML代码中删除）。

• HtmlElement.OuterHtml

  性质。返回位于指定元素内的HTML代码，包括元素本身的代码。

这些方法和属性都可以以不同的方式用于识别元素，如下面的示例所示。

注意：我省略了HtmlElement.OuterText因为它的行为有点奇怪，而且我不能100％确定它实际上做了什么。

- 查找没有ID的元素的示例 -

以下是一组示例，说明如何使用前面提到的方法和属性来查找您正在寻找的元素。

按类（-name）

查找元素

要根据其class属性查找和元素，您必须迭代所有元素并检查每个元素上的GetAttribute("className")。如果您事先知道元素类型（标记名称），则可以先使用HtmlDocument.GetElementsByTagName()而不是HtmlDocument.All获取该类型的所有元素的集合，从而缩小搜索范围。< / p>

  

HTML code：

     

<div class="header">
    <div id="title" class="centerHelper">
        <img id="logo" src="img/logo.png"/>
    </div>
    <p class="headerContent">
        Hello World!
    </p>
</div>

     

要定位的元素：

     

<p class="headerContent">

     

VB.NET代码：

'Iterate all elements.
For Each Element As HtmlElement In WebBrowser1.Document.All
    If Element.GetAttribute("className") = "headerContent" Then
        'Found. Do something with 'Element'...
        Exit For 'Stop looping.
    End If
Next

根据属性查找元素，该元素位于另一个元素（带ID）

内

为了根据其中一个属性查找子元素，其中子元素位于父元素（具有ID）内，您只需要通过其ID获取父元素，然后迭代其所有子元素。

  

HTML code：

     

<select id="items" class="itemsList">
    <option value="2">Apple</option>
    <option value="3">Orange</option>
    <option value="5">Banana</option>
</select>

     

要定位的元素：

     

<option value="5">Banana</option>

     

VB.NET代码：

'Iterate all children of the element with ID "items".
For Each Element As HtmlElement In WebBrowser1.Document.GetElementByID("items").Children
    If Element.getAttribute("value") = "5" Then
        'Found. Do something with 'Element'...
        Exit For 'Stop looping.
    End If
Next

根据位于另一个元素（无ID）

内的属性查找元素

为了根据其中一个属性查找子元素，其中子元素位于父元素内（ 不 具有ID）首先必须创建一个外部循环来查找父元素。然后，找到后，您可以开始迭代孩子。

  

HTML code：

     

<select class="itemsList">
    <option value="2">Apple</option>
    <option value="3">Orange</option>
    <option value="5">Banana</option>
</select>

     

要定位的元素：

     

<option value="5">Banana</option>

     

VB.NET代码：

'Outer loop, looking for the parent object.
For Each Element As HtmlElement In WebBrowser1.Document.GetElementsByTagName("select") 'Iterate all <select> tags. You can use Document.All here as well.
    If Element.getAttribute("className") = "itemsList" Then

        'Parent found.
        'Inner loop, looking for the child element we want.
        For Each OptionElement As HtmlElement In Element.GetElementsByTagName("option")
            If OptionElement.GetAttribute("value") = "5" Then
                'Found. Do something with 'OptionElement'...
                Exit For 'Exit the inner loop.
            End If
        Next

        Exit For 'Exit the outer loop.

    End If
Next

根据InnerText

查找元素

根据InnerText查找元素并不比我们迄今为止所做的任何事情都难。您只需迭代所有元素（或指定标记的所有元素）并检查每个InnerText属性。

  

HTML code：

     

<h1>Important information</h1>
<p>Please read this information through <b>carefully</b> before continuing.</p>

<h2>Copyrighted material<h2>
<p>All material (text, images, video, etc.) on this site are <b>copyrighted</b> to COMPANY NAME.</p>

     

要定位的元素：

     

<h2>Copyrighted material<h2>

     

VB.NET代码：

For Each Element As HtmlElement In WebBrowser.Document.All
    If Element.InnerText = "Copyrighted material" Then
        'Found. Do something with 'Element'...
        Exit For 'Stop looping.
    End If
Next

根据InnerHtml

查找元素

根据InnerHtml查找元素的方式与基于InnerText查看时的方式完全相同。只需迭代所有元素并检查每个InnerHtml属性。

  

HTML code：

     

<h1>Important information</h1>
<p>Please read this information through <b>carefully</b> before continuing.</p>

<h2>Copyrighted material<h2>
<p>All material (text, images, video, etc.) on this site are <b>copyrighted</b> to COMPANY NAME.</p>

     

要定位的元素：

     

<p>All material (text, images, video, etc.) on this site are <b>copyrighted</b> to COMPANY NAME.</p>

     

VB.NET代码：

'Iterate all <p> tags.
For Each Element As HtmlElement In WebBrowser.Document.GetElementsByTagName("p")
    If Element.InnerHtml.Contains("<b>copyrighted</b>") Then
        'Found. Do something with 'Element'...
        Exit For 'Stop looping.
    End If
Next

Answer 2

您需要使用某种类型的选择器。

GetElementByID方法效果最好，因为如果HTML文件格式正确，那么应该只有一个元素具有该唯一ID。

GetElementFromPoint将根据文档的X，Y坐标返回一个元素，最好在Document的Click事件中使用。

GetElementByTagName名称将返回元素集合，如果您知道元素的标记类型，则会有效，例如<button>...</button>或<p>...</p>。为了帮助缩小所需的元素范围，您需要遍历返回的集合，并比较元素的属性，如果您通过InnerHTML属性知道它们各自的值或元素的文本。

最后一个也是效率最低的方法是All属性，它返回文档中的每个元素。之所以效率最低，是因为至少使用GetElementByTagName，您可以根据标记的名称缩小集合范围。

但是，我们假设您有以下标记：

＆＃13;

＆＃13;

<body>
  <p>Look at my super complex HTML markup.</p>
  <button>Click Me</button>
  <button>No, click me!</button>
</body>

＆＃13;

＆＃13;

＆＃13;

然后，您可以获得标记为＆＃34; Click Me＆＃34;使用以下内容：

Dim click_me As HtmlElement = WebBrowser1.Document.GetElementByTagName("button").SingleOrDefault(Function(e) e.InnerHtml = "Click Me")