TMS WEB Core 循环遍历具有特定类名的所有 HTML 元素

在 TMS WEB Core 中循环遍历具有特定类名的所有 HTML 元素

简介

在 Web 开发中，操纵 DOM 元素是至关重要的。TMS WEB Core 为 Delphi 开发人员提供了强大的工具，用于动态访问和操作 Web 页面中的 HTML 元素。本文将深入探讨如何使用 TMS WEB Core 循环遍历包含特定类名的所有 HTML 元素，即使这些元素是动态创建的，并且不属于应用程序或表单的所有权。

获取 DOM 文档对象

第一步是获取当前显示的页面的 DOM 文档对象。在 TMS WEB Core 中，可以使用 TWebBrowser.Document 属性来获取它。

var
  Document: IOleDocument;
Document := WebBrowser.Document;

使用 CSS 选择器查询元素

获得了 DOM 文档对象后，可以使用 CSS 选择器来查询具有特定类名的所有 HTML 元素。在 TMS WEB Core 中，IOleDocument.querySelectorAll 方法用于执行此查询。

var
  Elements: Variant;
Elements := Document.querySelectorAll('.TestingClass');

循环遍历元素集合

querySelectorAll 方法返回一个 Variant，其中包含所选元素的集合。可以使用 Variant.Count 属性获取集合中的元素数量并使用 Variant.Item 属性访问每个元素。

for Index := 0 to Elements.Count - 1 do
  begin
    var
      Element: IOleElement;
      ElementID: WideString;
    Element := Elements.Item(Index);
    ElementID := Element.ID;
  end;

访问元素属性和内容

有了对元素的引用，就可以访问其属性和内容。例如，可以使用 Element.ID 获取元素的 ID，或使用 Element.InnerHTML 获取元素的内容。

ElementID := Element.ID;
InnerHtml := Element.InnerHTML;

示例代码

以下是一个完整示例，展示如何使用 Delphi 代码获取和循环遍历具有特定类名的所有 HTML 元素：

procedure TfrmMain.Testing(Sender: TObject);
var
  Document: IOleDocument;
  Elements: Variant;
  Index: Integer;
begin
  Document := WebBrowser.Document;
  Elements := Document.querySelectorAll('.TestingClass');
  for Index := 0 to Elements.Count - 1 do
  begin
    var
      Element: IOleElement;
      ElementID: WideString;
    Element := Elements.Item(Index);
    ElementID := Element.ID;
    ShowMessage(ElementID);
  end;
end;

结论

通过遵循这些步骤，你可以轻松地在 TMS WEB Core 中循环遍历包含特定类名的所有 HTML 元素。此技术对于动态修改 Web 页面内容、响应用户交互或执行其他复杂的 Web 开发任务非常有用。

常见问题解答

• 我如何获取元素的特定属性？
  使用 Element.GetAttribute('attributeName') 方法。
• 我如何设置元素的内文？
  使用 Element.InnerHTML := 'new content'。
• 我如何删除元素？
  使用 Element.Delete() 方法。
• 我如何将样式应用于元素？
  使用 Element.Style.Add('styleName', 'styleValue') 方法。
• 我如何处理 DOM 事件？
  使用 IOleDocument.addEventListener('eventName', EventListener) 方法。