整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
节内容是"VBA信息获取与处理"教程中第八个专题"VBA与HTML文档"的第五节。，希望想掌握这方面知识的朋友能参考我的教程学习。
大家好，我们继续对HTML文档进行学习，在前几节中我们认识了网页文档上面的各种元素，那么我们又该怎么访问他们呢，是如何实现呢？其实，HTML文档，提供了访问其元素的端口，这就是HTML DOM，其定义了一套标准的针对 HTML 文档的对象访问或操作的机制。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 HTML 文档的根节点。
特别注意：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
集合 描述
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。
VBA直接支持调用的对象有限，如下：
对象 描述
Document 代表整个 HTML 文档，可被用来访问页面中的所有元素
Anchors 代表 <a> 元素集合
Body 代表 <body> 元素
Forms 代表 <form> 元素集合
Frames 代表 <frame> 元素或<iframe> 元素集合
Images 代表 <img> 元素集合
Links 代表 <link> 元素集合
Options 代表 <option> 元素集合（select元素里面可以直接使用）
Cells 代表 <td> 元素集合（table元素里面可以直接使用）
Rows 代表 <tr> 元素集合（table元素里面可以直接使用）
All 对象集合，提供对文档中所有 HTML 元素的访问。
上述VBA支持直接调用对象的元素，调用起来就非常方便了，可以用序号调用，例如forms(0)，也可以按名称/ID调用，例如forms("名称/ID")。其他没法直接调用对象的元素，可以间接从通用all对象集合中去调用该元素或该元素对应的dom对象。
在HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML文档的每一部分都是节点，整个文档被定义为一个文档节点，每个标签是一个元素节点，包含在元素中的文本是文本节点，每一个元素的属性是一个属性节点。如下：
1）整个文档是一个文档节点
2）每个 HTML 元素是元素节点
3）HTML 元素内的文本是文本节点
4）每个 HTML 属性是属性节点
5）注释是注释节点
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树，这时一个非常形象的比喻，根节点就是html，主干就是body等，枝干就是body内含的各种元素节点，叶子和花就是元素节点关联的元素的属性（属性节点）或内含文本（文本节点）。
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
网页文档，可以说是由元素组合而成的，也可以说是由节点连接而成的树构造的。节点是文档树结构中特有的名词，元素是节点，但是节点不一定是元素，节点还有文档节点、文本节点、属性节点等；元素是元素节点的扩展，元素可以拥有属性还有文本。初学者不是很必要纠结元素和节点的区别，这个需要甚至数据结构、类和继承等知识。可大致理解为，同一个html dom对象，提供的两个不同接口。如下的程序，你会发现，他既有支持node（节点）的相关属性和方法，也提供了element（元素）的相关属性和方法。
Sub MYNZ()
Dim ie, dmt, bd
Set ie = CreateObject("InternetExplorer.Application") '创建一个IE对象
With ie
.Visible = True '显示它
.navigate "http://www.baidu.com" '加载某个页面
Do Until .ReadyState = 4 '等待页面加载完毕
DoEvents
Loop
Set dmt = .document '将IE浏览器加载的页面文档，赋予dmt变量
Set bd = dmt.body '将文档的body赋予bd变量
End With
End Sub
代码截图：
按F8键运行截图：
属性是节点（HTML 元素）的值，您能够获取或设置。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。我们看看下面一些常见的属性：
1）innerHTML 属性 对象内部的HTML代码，是获取元素内容的最简单方法。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
2）OuterHtml：对象的HTML代码，包括对象本身的HTML标签
3）innerText：对象内部的文本
4）OuterText：对象的文本，包括对象本身的文本
5）nodeName 属性 nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
6）nodeValue 属性 nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
7）nodeType 属性 nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9
以上只是给出了属性值，大家在使用的时候要注意。
本节知识点回向：
什么是HTML DOM文档的属性，常用的属性有哪些。
本节参考文件：008工作表.xlsm
在我的系列书籍中一直在强调"搭积木"的编程思路，这也是学习利用VBA的主要方法，特别是职场人员，更是要采用这种方案。其主要的内涵：
1 代码不要自己全部的录入。你要做的是把积木放在合适的位置然后去修正代码，一定要拷贝，从你的积木库中去拷贝，然后修正代码，把时间利用到高效的思考上。
2 建立自己的"积木库"。平时在学习过程中，把自己认为有用的代码放在一起，多积累，在用到的时候，可以随时拿来。你的积木库资料越多，你做程序的思路就会越广。
VBA是利用Office实现个人小型办公自动化的有效手段（工具）。这是我对VBA的应用界定。在取代OFFICE新的办公软件没有到来之前，谁能在数据处理方面做到极致，谁就是王者。其中登峰至极的技能非VBA莫属！
我记得20年前自己初学VBA时，那时的资料甚少，只能看源码自己琢磨,真的很难。20年过去了，为了不让学习VBA的朋友重复我之前的经历，我根据自己多年VBA实际利用经验，推出了六部VBA专门教程：
第一套：VBA代码解决方案 是VBA中各个知识点的讲解，教程共147讲，覆盖绝大多数的VBA知识点，初学必备；
第二套：VBA数据库解决方案 数据库是数据处理的专业利器，教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法和实例操作，适合中级人员的学习。
第三套：VBA数组与字典解决方案 数组和字典是VBA的精华，字典是VBA代码水平提高的有效手段，值得深入的学习，是初级及中级人员代码精进的手段。
第四套：VBA代码解决方案之视频 是专门面向初学者的视频讲解，可以快速入门，更快的掌握这门技能。这套教程是第一套教程的视频讲解，听元音更易接受。
第五套：VBA中类的解读和利用 这是一部高级教程，讲解类的虚无与肉身的度化，类的利用虽然较少，但仔细的学习可以促进自己VBA理论的提高。这套教程的领会主要是读者的领悟了，领悟一种佛学的哲理。
第六套教程：《VBA信息获取与处理》，这是一部高级教程，涉及范围更广，实用性更强，面向中高级人员。教程共二十个专题，包括：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪切板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。
大家可以根据以上资料1→3→2→6→5或者是4→3→2→6→5的顺序逐渐深入的逐渐学习。教程提供讲解的同时提供了大量的积木，如需要可以WeChat: NZ9668
如太白诗云：众鸟高飞尽，孤云独去闲。相看两不厌，只有敬亭山。学习的过程也是修心的过程，修一个平静的心。在代码的世界中，心平静了，心情好了，身体自然而然就好。心静则正，内心里没有那么多邪知邪见，也就没有那么多妄想。利人就是利己。这些教程也是为帮助大家起航，助上我自己之力，我的上述教程是我多的经验的传递，
"水善利万物而不争"，绵绵密密，微则无声，巨则汹涌。学习亦如此，知道什么是自己所需要的，不要蜷缩在一小块自认为天堂的世界里，待到暮年时再去做自欺欺人的言论。要努力提高自己，用一颗充满生机的心灵，把握现在，这才是进取。越是有意义的事情，困难会越多。愿力决定始终，智慧决定成败。不管遇到什么，都是风景。看淡纷争，看轻得失。茶，满也好，少也好，不要计较；浓也好，淡也好，其中自有值得品的味道。去感悟真实的时间，静下心，多学习，积累福报。而不是天天混日子，也不是天天熬日子。在后疫情更加严峻的存量残杀世界中，为自己的生存进行知识的储备，特别是新知识的储备。学习时微而无声，利用时则巨则汹涌。
每一分收获都是成长的记录，怎无凭，正是这种执着，成就了朝霞的灿烂。最后将一阙词送给致力于VBA学习的朋友,让大家感受一下学习过程的枯燥与执着：
浮云掠过，暗语无声，
唯有清风，惊了梦中啼莺。
望星，疏移北斗，
奈将往事雁同行。
阡陌人，昏灯明暗，
忍顾长亭。
多少VBA人，
暗夜中，悄声寻梦，盼却天明。
怎无凭！
回向学习利用VBA的历历往事，不胜感慨，谨以这些文字给大家，分享我多年工作实际经验的成果，随喜这些有用的东西，给确实需要利用VBA的同路人。
分享成果，随喜正能量
页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要 深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解读
（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
ocument.write 是直接写入到页面的内容流，如果在写之前没有调用 document.open, 浏览器会自动调用 open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML 则是 DOM 页面元素的一个属性，代表该元素的 html 内容。你可以精确到某一个具体的元素来进行更改。如果想修改 document 的内容，则需要修改。
document.documentElement.innerElement
innerHTML 将内容写入某个 DOM 节点，不会导致页面全部重绘。
innerHTML 很多情况下都优于 document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
*请认真填写需求信息，我们会在24小时内与您取得联系。
