NET Framework 类库 HtmlElement 类

本文介绍如何使用HtmlElement类处理HTML文档中的元素,包括获取、修改属性及遍历子元素的方法。通过实例展示了如何构建描述HTML元素层级结构的字符串。

 

命名空间:  System.Windows.Forms
程序集:  System.Windows.Forms(在 System.Windows.Forms.dll 中)

HtmlElement 表示一个 HTML 文档中可能存在的任何类型的元素,如:BODYTABLEFORM 等。此类公开可以在所有元素中找到的最常用属性。

大多数元素可以拥有“子元素”:即放置在其下的其他 HTML 元素。使用 CanHaveChildren 属性测试给定元素是否有子级,并使用 Children 集合循环访问这些子级。Parent 属性返回在其中嵌套当前元素的 HtmlElement

经常需要访问基础元素上未由 HtmlElement 直接公开的属性 (Attribute)、属性 (Property) 和方法,如 IMG 元素上的 SRC 属性 (Attribute) 或 FORM 上的 Submit 方法。GetAttributeSetAttribute 方法使您可以检索和更改某个特定元素中的任何属性 (Attribute) 或 (Property),而 InvokeMember 提供对未在托管文档对象模型 (DOM) 中公开的任何方法的访问。如果应用程序拥有非托管代码权限,则还可以使用 DomElement 属性 (Attribute) 访问未公开的属性 (Property) 及方法。

使用 TagName 属性 (Property) 测试元素是否属于某种特定类型。

任何 HTML 文档均可在运行时修改。您可以使用 HtmlDocumentCreateElement 方法创建新的 HtmlElement 对象,并使用 AppendChild 方法或 InsertAdjacentElement 方法将这些新对象添加到其他元素中。还可以创建 HTML 标记形式的元素,并将它们分配给现有元素的 InnerHtml 属性。

 

下面的代码示例演示如何检查一个任意 HTML 文档并派生一个描述 HTML 元素的字符串,该字符串带有缩进及缩进等级编号,用于指示这些元素在此文档中的嵌套深度。此代码示例要求应用程序承载一个名为 WebBrowser1WebBrowser 控件。

 

        private void PrintDomBegin()
        {
            if (webBrowser1.Document != null)
            {
                HtmlElementCollection elemColl = null;
                HtmlDocument doc = webBrowser1.Document;
                if (doc != null)
                {
                    elemColl = doc.GetElementsByTagName("HTML");
                    String str = PrintDom(elemColl, new System.Text.StringBuilder(), 0);
                    webBrowser1.DocumentText = str;
                }
            }
        }

        private string PrintDom(HtmlElementCollection elemColl, System.Text.StringBuilder returnStr, Int32 depth)
        {
            System.Text.StringBuilder str = new System.Text.StringBuilder();

            foreach (HtmlElement elem in elemColl)
            {
                string elemName;

                elemName = elem.GetAttribute("ID");
                if (elemName == null || elemName.Length == 0)
                {
                    elemName = elem.GetAttribute("name");
                    if (elemName == null || elemName.Length == 0)
                    {
                        elemName = "<no name>";
                    }
                }

                str.Append(' ', depth * 4);
                str.Append(elemName + ": " + elem.TagName + "(Level " + depth + ")");
                returnStr.AppendLine(str.ToString());

                if (elem.CanHaveChildren)
                {
                    PrintDom(elem.Children, returnStr, depth + 1);
                }

                str.Remove(0, str.Length);
            }

            return(returnStr.ToString());
        }

表示网页内的一个 HTML 元素。

### 如何在 Vitest 中处理或测试 HTMLElement Vitest 是一种基于 Vite 的快速单元测试框架,它允许开发者轻松编写和运行 JavaScript 和 TypeScript 测试。当涉及到 HTML 元素 (HTMLElement) 的测试时,通常会利用 DOM 操作方法以及模拟浏览器环境来验证行为。 以下是关于如何在 Vitest 中处理或测试 `HTMLElement` 的详细说明: #### 使用 JSDOM 提供的虚拟 DOM 环境 Vitest 默认集成了 JSDOM,这是一个纯 JavaScript 实现的浏览器环境,可以用来创建和操作 DOM 节点。通过此功能,可以直接实例化并操作 `HTMLElement` 对象[^1]。 ```javascript test('create and manipulate an HTMLElement', () => { const div = document.createElement('div'); div.id = 'test-div'; div.textContent = 'Test Content'; expect(div.id).toBe('test-div'); // 验证 ID 是否设置正确 expect(div.textContent).toBe('Test Content'); // 验证文本内容是否匹配 }); ``` #### 利用 `closest()` 方法查找最近的父级元素 如果需要测试某个特定的 `HTMLElement` 是否能够找到其最近的符合条件的祖先节点,则可以通过调用 `.closest(selector)` 来实现这一目标。 ```javascript test('find closest parent element using .closest()', () => { const container = document.createElement('section'); container.innerHTML = ` <article> <p id="target">Some text</p> </article> `; const targetElement = container.querySelector('#target'); const articleParent = targetElement?.closest('article'); expect(articleParent instanceof HTMLElement).toBe(true); // 验证返回的是一个有效的 HTMLElement expect(articleParent?.tagName.toLowerCase()).toBe('article'); // 验证标签名是否为预期值 }); ``` #### 设置多个 CSS 属性并通过 css() 函数应用样式 对于某些场景下可能还需要动态调整样式的测试需求,可借助自定义工具函数或者直接修改 style 属性完成相应逻辑验证[^2]。 ```javascript // 假设存在这样一个辅助函数用于批量更新样式属性 function applyStyles(element, styles){ Object.assign(element.style, styles); } test('apply multiple inline styles on HTMLElement', () => { const span = document.createElement('span'); applyStyles(span, { color: 'red', fontSize: '18px' }); expect(getComputedStyle(span).color).toBe('rgb(255, 0, 0)'); expect(getComputedStyle(span).fontSize).toBe('18px'); }); ``` 以上展示了三种不同型的针对 `HTMLElement` 进行单元测试的方法论及其实际编码案例展示。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值