整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
于一个Web开发初学者，你常常什么都不懂的时候，就要面对一堆由HTML,HTML5, CSS, XML, JS, DOM等等写就程序，而大家沟通时也总是用到一些相关的名词，常常会把他们搅在一起，最后不得不问什么是HTML?什么是CSS?等等。
那么下就为大家介绍下HTML与JS以及DOM的关系。只有把他们的关系弄清楚了，你才能更好的应用这些技术。
这里的DOM就中指HTML DOM。HTML DOM是W3C中的标准，同时它也是HTML的文档对象模型的缩写(the Document Object Model for HTML)。HTML DOM定义了一系列标准的对象，以及访问和处理HTML文档的标准方法。通过DOM，可以快速访问所有的HTML元素，连同它们所包含的文本和属性。其中的内容可以修改和删除，同时也可以创建新的元素。HTML DOM独立于平台和编程语言。它能被任何编程语言诸如Java、Javascript和VBScript所使用。HTML DOM就是HTML语言对外界开通的方法，可以说是一套标准备接口，以便其他语言能够访问或修改HTML内部的元素。
当我们使用js对html元素进行操作时，DOM就是十分有用的对象，可以让我们快速找到差进行编辑修改。
你便可以通过利用DOM对象构造如下代码并插入到HTML代码中的任何位置来实现。
节内容是"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的同路人。
分享成果，随喜正能量
和安全管理服务专家新钛云服 林泓辉翻译
如果您刚刚开始学习 JavaScript，您可能听说过 DOM。但它究竟是什么？
在本文中，我将解释什么是 DOM 并提供一些 JavaScript 代码示例。
我们将看看如何从 HTML 文档中选择元素、如何创建元素、如何更改内联 CSS 样式以及如何监听事件。
DOM 代表文档对象模型。它是一个编程接口，允许我们从文档中创建、更改或删除元素。我们还可以向这些元素添加事件，使我们的页面更加动态。
DOM 将 HTML 文档视为节点树。一个节点代表一个 HTML 元素。
让我们看一下这段 HTML 代码，以更好地理解 DOM 树结构。
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM tree structure</title>
</head>
<body>
<h1>DOM tree structure</h1>
<h2>Learn about the DOM</h2>
</body>
</html>
我们的文档称为根节点，包含一个子节点，即<html>元素。该<html>元素包含两个子元素，它们是<head>和<body>元素。
the<head>和<body>element 都有自己的子元素。
这是可视化此节点树的另一种方法。
我们可以访问文档中的这些元素并使用 JavaScript 对其进行更改。
让我们看几个示例，说明我们如何使用 JavaScript 处理 DOM。
在 HTML 文档中选择元素有几种不同的方法。
在本文中，我们将重点介绍其中三种方法：
? getElementById()
? querySelector()
? querySelectorAll()
在 HTML 中，id 用作 HTML 元素的唯一标识符。这意味着您不能为两个不同的元素使用相同的id名称。
这是不正确的：
<p id="para">This is my first paragraph.</p>
<p id="para">This is my second paragraph.</p>
您必须确保这些ids 是唯一的，如下所示：
<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p>
在 JavaScript 中，我们可以通过引用id名称来获取 HTML 标签。
document.getElementById("id name goes here")
此代码告诉计算机使用id=para1获取元素<p>并将元素打印到控制台。
const paragraph1 = document.getElementById("para1");
console.log(paragraph1);
如果我们想知道刚才段落的内容，那么我们就可以使用textContent里面的属性console.log()。
const paragraph1 = document.getElementById("para1");
console.log(paragraph1.textContent);
querySelector():
您可以使用此方法查找具有一个或多个 CSS 选择器的元素。
我为我最喜欢的电视节目创建了这个 HTML 示例：
<h1>Favorite TV shows</h1>
<ul class="list">
<li>Golden Girls</li>
<li>Archer</li>
<li>Rick and Morty</li>
<li>The Crown</li>
</ul>
如果我想查找h1元素并将其打印到控制台，那么我可以在querySelector().
const h1Element = document.querySelector("h1");
console.log(h1Element);
如果我想class="list"将无序列表打印到控制台，那么我会.list在 querySelector().
在.之前list告诉计算机目标类的名称。如果您想定位一个，id那么您可以#在名称前使用一个符号。
const list = document.querySelector(".list");
console.log(list);
此方法查找与 CSS 选择器匹配的所有元素并返回所有这些节点的列表。
如果我想<li>在我们的例子中找到所有的项目，我可以使用>子组合器来找到<ul>.
const listItems = document.querySelectorAll("ul > li");
console.log(listItems);
如果我们想打印出<li>电视节目的实际项目，我们可以使用 forEach()循环遍历 NodeList 并打印出每个项目。
const listItems = document.querySelectorAll("ul > li");
listItems.forEach((item) => {
console.log(item);
});
我们可以使用document.createElement()向 DOM 树添加新元素。
让我们看一下这个例子：
<h1>Reasons why I love freeCodeCamp:</h1>
现在，我<h1>在页面上只有一个标签。但是我想在<h1>使用 JavaScript 的标签下添加一个我喜欢 freeCodeCamp 的原因列表。
我们可以首先使用document.createElement('ul'). 我将把它分配给一个名为unorderedList.
let unorderedList = document.createElement("ul");
然后我们需要使用该appendChild('ul')方法将该元素添加到文档中。
document.body.appendChild(unorderedList);
接下来为<ul>元素添加几个<li>元素。
let listItem1 = document.createElement("li");
let listItem2 = document.createElement("li");
然后我们可以使用该 textContent属性为我们的列表项添加文本。
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
最后一部分是使用该appendChild()方法将列表项添加到无序列表中。
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);
这就是代码的样子。
let unorderedList = document.createElement("ul");
document.body.appendChild(unorderedList);
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);
这是页面上的输出：
该style属性使您能够更改 HTML 文档中的 CSS。
在本例中，我们将h1使用style属性将文本从黑色更改为蓝色。
这是我们的 HTML。
<h1>I was changed to blue using JavaScript</h1>
我们首先需要使用querySelector('h1')方法获取标签。
const h1 = document.querySelector("h1");
然后我们使用h1.style.color将h1文本从黑色更改为蓝色。
const h1 = document.querySelector("h1");
h1.style.color = "blue";
这是在浏览器中的结果：
您可以使用此style属性来更改一些CSS内联样式，包括background-color，border-style，font-size和更多。
此方法允许您将事件附加到 HTML 元素（如按钮）。
在这个例子中，当用户点击按钮时，会弹出一条警告消息。
在我们的 HTML 中，我们有一个带有idof的按钮元素btn。
<button id="btn">Show alert</button>
我们可以使用getElementById()方法在 JavaScript 中定位该元素并将其分配给名为 的变量button。
const button = document.getElementById("btn");
addEventListener()的参数为事件类型和触发时的函数。事件类型将是一个click事件，该函数将触发警报消息。
这是将事件侦听器添加到button变量的代码。
button.addEventListener("click", () => {
alert("Thank you for clicking me");
});
这是您可以单击按钮并弹出警报消息的完整代码：
const button = document.getElementById("btn");
button.addEventListener("click", () => {
alert("Thank you for clicking me");
});
DOM 代表文档对象模型，是一种编程接口，允许我们从文档中创建、更改或删除元素。我们还可以向这些元素添加事件，使我们的页面更加动态。
您可以使用getElementById(), querySelector()、 和等方法在 JavaScript 中选择元素querySelectorAll()。
如果要将新元素添加到文档中，可以使用document.createElement().
您还可以使用该style属性更改元素的内联 CSS 样式。
如果要将事件添加到按钮等元素，则可以使用addEventListener().
*请认真填写需求信息，我们会在24小时内与您取得联系。
