23.3 HtmlElement类

发布于：2025-02-26 ⋅ 阅读:(15) ⋅ 点赞:(0)

版权声明：本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。

HtmlElement类表示网页内一个任何类型的HTML元素，如：BODY、TABLE 和 FORM 等。

HtmlElement常用属性：

  1. All：获取当前元素下的所有元素的集合（HtmlElementCollection）。
  2. CanHaveChildren：此元素是否可以拥有子元素。可以拥有子元素，返回true；否则返回 false。
  3. Children：获取当前元素的所有子级的集合（HtmlElementCollection）。注意All返回的是子级或是更低级别的所有元素。
  4. ClientRectangle：获取 HTML 文档中元素工作区的边界。
  5. Document：获取此元素所属的 HtmlDocument。
  6. DomElement：获取此元素的非托管接口指针。
  7. Enabled：获取或设置某个网页元素是否可用，如果Enabled设置为False，类似于网页上的Disabled。
  8. FirstChild：获取该网页元素的第一个子元素。
  9. Id：获取或设置用于标识此元素的标签。
  10. Name：获取或设置元素的名称。
  11. NextSibling：获取文档树中与此元素位于同一级别的下一个元素。
  12. OffsetParent：获取从中计算 OffsetRectangle 的元素。
  13. OffsetRectangle：获取元素相对于其父级的位置。
  14. InnerHtml：获取或设置此元素包含的 HTML 代码。
  15. InnerText：获取或设置分配给此元素的文本。
  16. OuterHtml：获取或设置当前元素所有的 HTML 代码。
  17. OuterText：获取或设置当前元素的文本。

注意：这里强调一下OuterHtml、OuterText、InnerHtml、InnerText这几个容易混淆的属性，假设获得到某个DIV元素代码如下：

<DIV><A><IMG /> 这里是文字 </A></DIV>

那么上述4个属性对应的内容：

  1. OuterHtml：<DIV><A><IMG /> 这里是文字 </A></DIV>
  2. OuterText：这里是文字
  3. InnerHtml：<A><IMG /> 这里是文字 </A>
  4. InnerText：这里是文字
  1. Parent：获取当前元素的父元素。
  2. ScrollLeft：获取或设置元素边缘与其内容的左边缘之间的距离。
  3. ScrollRectangle：获取元素的可滚动区尺寸。
  4. ScrollTop：获取或设置此元素边缘与其内容的上边缘之间的距离。
  5. Style：获取或设置当前元素的以逗号分隔的样式列表。
  6. TabIndex：获取或设置 Tab 键顺序中此元素的位置。
  7. TagName：获取 HTML 标记的名称。

HtmlElement常用方法：

  1. AppendChild：将元素添加到其他元素的子树中。
  2. AttachEventHandler：为 HTML 文档对象模型 (DOM) 上的命名事件添加事件处理程序。
  3. DetachEventHandler：从 HTML 文档对象模型 (DOM) 上的指定事件中移除事件处理程序。
  4. Focus：将用户输入焦点置于当前元素上。
  5. GetAttribute：检索元素中已命名特性的值。
  6. GetElementsByTagName：检索 HTML 中由指定 HTML 标记表示的元素的集合。
  7. GetHashCode：用作特定类型的哈希函数。 （重写 Object.GetHashCode。）
  8. GetType：获取当前实例的 Type。 （继承自 Object。）
  9. InsertAdjacentElement：将新元素插入到文档对象模型 (DOM) 中。
  10. InvokeMember(String)：对此元素的基础 DOM 元素执行未公开的方法。
  11. InvokeMember(String,Object())：执行在当前 HTML 页中用脚本语言定义的函数。
  12. 受保护的方法 MemberwiseClone 创建当前 Object 的浅表副本。 （继承自 Object。）
  13. RaiseEvent：使指定的事件调用所有已注册的事件处理程序。
  14. RemoveFocus：移除当前元素的焦点（如果此元素有焦点）。
  15. ScrollIntoView：滚动包含此元素的文档，直到此元素的上边缘或下边缘与此文档窗口对齐为止。
  16. SetAttribute：设置元素中已命名特性的值。

HtmlElement还提供了对事件的处理，例如Click（当用户使用鼠标左键单击此元素时）、MouseDown（当用户按下鼠标按钮时）等，与在浏览器中的事件类似。

23.3.1 获得页面元素信息

通过HtmlDocument类的GetElementById、GetElementsByTagName、GetElementFromPoint这3个方法，或者Forms、Links、Images、All这4个属性都可以获得相应网页元素或者网页元素的集合，然后就很容易获得相关信息。

【例 23.5】【项目：code23-005】获得网页上所有图片的地址。

通过【例 23.3】的学习，相信读者已经可以获得网页上所有图片的信息，但实际上是获得的所有的图片相关的HtmlElement。获得的信息类似于：

<img width="100%" alt="腾讯网" src="//mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png">

显然，这是一个Img元素完整的信息，如果仅仅需要获得图片的网址呢？当然，可以使用String的方法来拆分获得的字符串，比如以“src="”开头到下一个“"”的这一段字符串，但是操作起来是比较复杂的。

幸运的是，HtmlElement类提供了GetAttribute方法来获得该元素某个属性的值。

GetAttribute具体语法如下：

public string GetAttribute (string attributeName);

参数说明：

  1. attributeName：属性名称，此参数区分大小写。

返回值：

  1. 元素中此特性String形式的值。 如果此元素中不存在指定的特性，则返回一个空字符串。

例如：

获得元素的宽度值：GetAttribute("width")

获得元素的图片地址：GetAttribute("SRC")

修改后的图片信息代码如下：

        private void btnImgInfo_Click(object sender, EventArgs e)

        {

            string htmlInfo = "";

            int imgCount = 0;

            HtmlElementCollection imgs;

            imgs = WebBrowser1.Document.Images;

            foreach(HtmlElement img in imgs)

            {

                imgCount += 1;

                htmlInfo += "图片" + imgCount + ": " + img.GetAttribute("SRC") + "\r\n";

            }

            txtInfo.Text = htmlInfo;

        }

运行结果如下图所示：

图23-6 获得网页上所有图片的地址

23.3.2 表单处理

【项目：code23-006】页面表单的处理。

本项目和本节后面的项目中使用了1个htm文件和一个asp文件来做演示，请自行配置相关Web环境。

另外，在运行相应代码前请确保Webbrowser已经载入网页。

使用到的htm文件和asp文件具体代码如下：

1、code23-006-1.htm

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>这是配合C#教程的网页</title>

<style>

.inputbox {

         width:120px;

         border: 1px solid #6699FF;    

}

body{

         font-size:12px;

}

</style>

<script language="javascript">

function check()

{

         if(sampleform.studentname.value=="")

         {

                   alert("姓名没有填写");

                   return false;

         }

         if(sampleform.studentage.value.length>2)

         {

                   alert("年龄长度超过2位");

                   return false;    

         }

         sampleform.submit();

}

function checkdata(studentname,studentage)

{

         if(studentname=="")

         {

                   alert("姓名没有填写");

                   return false;

         }

         if(studentage.length>2)

         {

                   alert("年龄长度超过2位");

                   return false;    

         }

         alert("数据没有问题："+studentname+"的年龄是"+studentage);

}

</script>

</head>

<body>

<center>这是配合C#教程的网页</center><br/>

<form name="sampleform" id="sampleform" action="code23-006-2.asp" method="post" target="_self">

  <table width="260" border="0">

    <tr>

      <td width="50%">输入学生姓名：</td>

      <td width="50%"><input type="text" name="studentname" id="studentname" maxlength="6" class="inputbox"></td>

    </tr>

    <tr>

      <td>输入学生年龄：</td>

      <td><input type="text" name="studentage" id="studentage" maxlength="6" class="inputbox"></td>

    </tr>

    <tr>

      <td colspan="2"><input type="button" name="submit1" id="submit1" value="提交1" onClick="check()">

      <input type="button" name="submit2" id="submit2" value="提交2" onClick="check()" disabled="true">

      <input type="button" name="submit3" id="submit3" value="检查数据" onClick="checkdata('赵勇','12')"></td>

    </tr>

  </table>

  </form>

</button>

</body>

</html>

这个htm页面运行显示如下：

图23-7 待提交的表单

2、code23-006-2.asp：

<%@Language="vbscript" Codepage="65001"%>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>这是配合C#教程的网页</title>

</head>

<body>

<%

dim studentname

dim studentage

studentname=request.form("studentname")

studentage=request.form("studentage")

%>

学生姓名：<%=studentname%> <br/>

学生年龄：<%=studentage%> <br/>

</body>

</html>

这个asp页面只是简单的接收提交来的数据并显示出来：

图23-8 显示学生姓名和年龄

在code23-006-1.htm表单中有两个文本框，name分别是 studentname 和 studentage，它们模拟学生姓名和年龄，表单提交code23-006-2.asp后，将显示学生姓名和年龄。由于本书重点并不是讲html和javascript，所以这里并未判断是否年龄是数字，姓名长度够不够等，仅仅简单判断姓名是否为空、年龄是否超过3位数，其余的很多判断都省略了。

【例 23.6】修改页面元素属性。

在code23-006-1.htm中，有一个按钮是灰色的，通过HtmlElement的Enabled属性将它设置为可用状态。

具体代码如下：

        //使按钮可用

        private void btnEnabled_Click(object sender, EventArgs e)

        {

            //获得页面文档上所有的元素

            HtmlElementCollection htmlAlls = WebBrowser1.Document.All;

            //枚举元素

            foreach (HtmlElement htmlSingle in htmlAlls)

                //获得元素属性name，如果是需要的则

                if (htmlSingle.GetAttribute("name") == "submit2")

                    //将元素的Enabled属性设置为True

                    htmlSingle.Enabled = true;

        }

运行结果如下图所示：

图23-9 按钮可用

【例 23.7】实现一键填表。

实现填表需要使用到 HtmlElement类的GetAttribute和SetAttribute方法。

通过GetAttribute方法可以获得一个网页元素某个属性的值，而通过SetAttribute方法可以设置一个网页元素某个属性的值。SetAttribute具体语法如下：

public void SetAttribute (string attributeName, string value);

参数说明：

  1. attributeName：要设置的属性名称。
  2. value：对应attributeName属性名称的新值。

具体代码如下：

        //填表

        private void btnFillTable_Click(object sender, EventArgs e)

        {

            string strName = "张文君";

            string strAge = "16";

            HtmlElementCollection htmlAlls = WebBrowser1.Document.All;

            foreach(HtmlElement htmlSingle in htmlAlls)

            //获得元素属性name，如果是需要的则使用SetAttribute方法设置元素的value

                switch( htmlSingle.GetAttribute("name"))

                {

                    case "studentname":

                        htmlSingle.SetAttribute("value", strName);

                        break;

                    case "studentage":

                            htmlSingle.SetAttribute("value", strAge);

                        break;

                    default:

                        //不处理

                        break;

                }

        }

运行结果如下图所示：

图23-10 一键填表

【例 23.8】调用网页脚本中的方法。

【例 23.9】一键填表并提交。

【例 23.11】增加网页元素。

23.3.3 解决target=_blank 问题

在 23.1.1节中制作的简易浏览器不能打开target=_blank的链接，在学习HtmlElement后可以使用以下两种方法来解决：

方法一：网页载入完毕后，获得所有的链接，使用GetAttribute方法获得target的值，如果为_blank，那么使用SetAttribute方法替换为_self。

方法二：网页载入完毕后，给所有的链接添加上MouseDown事件，在事件中获得元素（此时就是MouseDown点击的链接）的TagName，如果target的值为_blank，那么获得href的值，并使用WebBrowser的Navigate方法导航到href的页面。同时，为了防止弹出新窗口，那么应取消NewWindow事件。

【例 23.13】【项目：code23-007】打开网页上target=_blank的链接方法一。

        private void WebBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)

        {

            if (e.Url == WebBrowser1.Url)

                foreach (HtmlElement he in WebBrowser1.Document.Links)

                    if (he.GetAttribute("target") == "_blank")

                        he.SetAttribute("target", "_self");

     }

【例 23.14】【项目：code23-008】打开网页上target=_blank的链接方法二。

        private void WebBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)

        {

            ;

            if (e.Url == WebBrowser1.Url)

                foreach (HtmlElement he in WebBrowser1.Document.Links)

                    he.MouseDown += HtmlElement1_MouseDown;

        }

        private void HtmlElement1_MouseDown(object sender , HtmlElementEventArgs e)

        {

            HtmlElement hElement = (HtmlElement)sender;

            if (hElement.GetAttribute("target") == "_blank")

                WebBrowser1.Navigate(hElement.GetAttribute("href"));

        }

        private void WebBrowser1_NewWindow(object sender, CancelEventArgs e)

        {

            e.Cancel = true;

        }

学习更多vb.net知识，请参看vb.net 教程 目录

学习更多C#知识，请参看C#教程 目录

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布