整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于一個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小時內與您取得聯系。
