如何获取列出的网页的所有元素 ID？答案

【问题标题】：Howto Get all Element Ids of webpage listed?如何获取列出的网页的所有元素 ID？
【发布时间】：2015-09-28 16:52:55
【问题描述】：

我在获取加载到 Twebbrowser 控件中的网页的所有元素 ID 时遇到问题。有人可以帮我实现这一目标吗？我想将元素 id 保存在列表框或类似列表中，但知道如何获取所有这些就足够了。

非常感谢！

【问题讨论】：

您在任务的哪一部分遇到了问题？你能得到一些个ID，而不是全部吗？您获得的是 names 或 classes，而不是 IDs？考虑展示您拥有的代码，然后描述它为您提供了什么。
您是否希望所有元素都有一个 ID？
我不确定您的目标是什么，但TWebBrowser 可能不是您想要的。您需要网页的视觉显示吗？它是否有任何类型的动态加载数据？如果这两个都不是，那么甚至不要使用TWebBrowser - 只需找到一个 HTML 解析器。

【解决方案1】：

下面会扫描一个TWebBrowser的内容，并将其节点的ID属性放入一个TMemo中。

// Note : You need to add MSHTML to your Uses list if it's not there already

procedure TForm1.GetIDs;
var
  All : IHTMLElementCollection;
  Doc : IHtmlDocument2;
  E : IHtmlElement;
  i : Integer;
  S : String;
begin
  Doc := IDispatch(WebBrowser1.Document) as IHtmlDocument2;
  Assert(Doc <> Nil);
  All := IDispatch(Doc.all) as IHTMLElementCollection;
  for i := 0 to All.Length - 1 do begin
    E := IDispatch(All.Item(i, 0)) as IHtmlElement;
    S :=IntToStr(i) + ' ' + E.id;
    Memo2.Lines.Add(S);
  end;
end;

这使用了在 MSHTML.Pas 中定义的 DOM 对象的接口。 MS 的 DOM 对象有很多，你需要沉浸在其中一段时间才能习惯它。进入方式见这里：

https://msdn.microsoft.com/en-us/library/aa703928%28v=vs.85%29.aspx#properties

即使从我的（过度）简单示例中您也可以看到，使用它往往需要在原始接口和包装在 OleVariants 中的接口之间进行大量跳转，如

  All := IDispatch(Doc.all) as IHTMLElementCollection;

顺便说一句，上面的代码使用“早期绑定”到 MSHTML.Pas 中定义的接口对象。您将看到用于处理这些对象的许多示例代码都使用 OleVariants（即“后期绑定”——如果您不确定早期绑定和后期绑定之间的区别，请参阅 OLH）。以下是上述代码的后期绑定版本。

procedure TForm1.GetIDs2;
var
  All,
  Doc,
  E : OleVariant;
  i : Integer;
  S : String;
begin
  Doc := WebBrowser1.Document;
  All := Doc.all;
  for i := 0 to All.Length - 1 do begin
    E := All.Item(i);
    S :=IntToStr(i) + ' ' + E.id;
    Memo2.Lines.Add(S);
  end;
end;

一般来说，后期绑定更容易用于试验和让事情开始工作，因为它允许省略可选参数并且不需要您使用类型化的接口变量。缺点是 IDE 不对后期绑定接口进行代码补全，执行速度较慢。

示例 HTML：

<html>
  <body>
    <div ID="adiv" style="TEXT-ALIGN: left; color: Gray">Some text
      <div ID="asubdiv" style="TEXT-ALIGN: left; color: Gray">Subdiv</div>
    </div>
    <div style="TEXT-ALIGN: left; color: Gray">Some more text</div>
    <div ID="cdiv" style="TEXT-ALIGN: left; color: Gray">Some even more text</div>
  </body>
</html>

【讨论】：

这是否回答了您的问题？