整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
節(jié)內(nèi)容是"VBA信息獲取與處理"教程中第八個專題"VBA與HTML文檔"的第五節(jié)。，希望想掌握這方面知識的朋友能參考我的教程學習。
大家好，我們繼續(xù)對HTML文檔進行學習，在前幾節(jié)中我們認識了網(wǎng)頁文檔上面的各種元素，那么我們又該怎么訪問他們呢，是如何實現(xiàn)呢？其實，HTML文檔，提供了訪問其元素的端口，這就是HTML DOM，其定義了一套標準的針對 HTML 文檔的對象訪問或操作的機制。HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。換言之，HTML DOM 是關于如何獲取、修改、添加或刪除 HTML 元素的標準。
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。Document 對象是 HTML 文檔的根節(jié)點。
特別注意：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
集合 描述
all[] 提供對文檔中所有 HTML 元素的訪問。
anchors[] 返回對文檔中所有 Anchor 對象的引用。
applets 返回對文檔中所有 Applet 對象的引用。
forms[] 返回對文檔中所有 Form 對象引用。
images[] 返回對文檔中所有 Image 對象引用。
links[] 返回對文檔中所有 Area 和 Link 對象引用。
VBA直接支持調(diào)用的對象有限，如下：
對象 描述
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支持直接調(diào)用對象的元素，調(diào)用起來就非常方便了，可以用序號調(diào)用，例如forms(0)，也可以按名稱/ID調(diào)用，例如forms("名稱/ID")。其他沒法直接調(diào)用對象的元素，可以間接從通用all對象集合中去調(diào)用該元素或該元素對應的dom對象。
在HTML DOM中，所有事物都是節(jié)點。DOM 是被視為節(jié)點樹的 HTML文檔的每一部分都是節(jié)點，整個文檔被定義為一個文檔節(jié)點，每個標簽是一個元素節(jié)點，包含在元素中的文本是文本節(jié)點，每一個元素的屬性是一個屬性節(jié)點。如下：
1）整個文檔是一個文檔節(jié)點
2）每個 HTML 元素是元素節(jié)點
3）HTML 元素內(nèi)的文本是文本節(jié)點
4）每個 HTML 屬性是屬性節(jié)點
5）注釋是注釋節(jié)點
HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點樹，這時一個非常形象的比喻，根節(jié)點就是html，主干就是body等，枝干就是body內(nèi)含的各種元素節(jié)點，葉子和花就是元素節(jié)點關聯(lián)的元素的屬性（屬性節(jié)點）或內(nèi)含文本（文本節(jié)點）。
通過 HTML DOM，樹中的所有節(jié)點均可通過 JavaScript 進行訪問。所有 HTML 元素（節(jié)點）均可被修改，也可以創(chuàng)建或刪除節(jié)點。節(jié)點樹中的節(jié)點彼此擁有層級關系。父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關系。父節(jié)點擁有子節(jié)點。同級的子節(jié)點被稱為同胞（兄弟或姐妹）。
網(wǎng)頁文檔，可以說是由元素組合而成的，也可以說是由節(jié)點連接而成的樹構(gòu)造的。節(jié)點是文檔樹結(jié)構(gòu)中特有的名詞，元素是節(jié)點，但是節(jié)點不一定是元素，節(jié)點還有文檔節(jié)點、文本節(jié)點、屬性節(jié)點等；元素是元素節(jié)點的擴展，元素可以擁有屬性還有文本。初學者不是很必要糾結(jié)元素和節(jié)點的區(qū)別，這個需要甚至數(shù)據(jù)結(jié)構(gòu)、類和繼承等知識。可大致理解為，同一個html dom對象，提供的兩個不同接口。如下的程序，你會發(fā)現(xiàn)，他既有支持node（節(jié)點）的相關屬性和方法，也提供了element（元素）的相關屬性和方法。
Sub MYNZ()
Dim ie, dmt, bd
Set ie = CreateObject("InternetExplorer.Application") '創(chuàng)建一個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鍵運行截圖：
屬性是節(jié)點（HTML 元素）的值，您能夠獲取或設置。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。我們看看下面一些常見的屬性：
1）innerHTML 屬性 對象內(nèi)部的HTML代碼，是獲取元素內(nèi)容的最簡單方法。innerHTML 屬性對于獲取或替換 HTML 元素的內(nèi)容很有用。
下面的代碼獲取 id="intro" 的 <p> 元素的 innerHTML：
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
2）OuterHtml：對象的HTML代碼，包括對象本身的HTML標簽
3）innerText：對象內(nèi)部的文本
4）OuterText：對象的文本，包括對象本身的文本
5）nodeName 屬性 nodeName 屬性規(guī)定節(jié)點的名稱。
nodeName 是只讀的
元素節(jié)點的 nodeName 與標簽名相同
屬性節(jié)點的 nodeName 與屬性名相同
文本節(jié)點的 nodeName 始終是 #text
文檔節(jié)點的 nodeName 始終是 #document
注釋：nodeName 始終包含 HTML 元素的大寫字母標簽名。
6）nodeValue 屬性 nodeValue 屬性規(guī)定節(jié)點的值。
元素節(jié)點的 nodeValue 是 undefined 或 null
文本節(jié)點的 nodeValue 是文本本身
屬性節(jié)點的 nodeValue 是屬性值
7）nodeType 屬性 nodeType 屬性返回節(jié)點的類型。nodeType 是只讀的。
比較重要的節(jié)點類型有：
元素類型 NodeType
元素 1
屬性 2
文本 3
注釋 8
文檔 9
以上只是給出了屬性值，大家在使用的時候要注意。
本節(jié)知識點回向：
什么是HTML DOM文檔的屬性，常用的屬性有哪些。
本節(jié)參考文件：008工作表.xlsm
在我的系列書籍中一直在強調(diào)"搭積木"的編程思路，這也是學習利用VBA的主要方法，特別是職場人員，更是要采用這種方案。其主要的內(nèi)涵：
1 代碼不要自己全部的錄入。你要做的是把積木放在合適的位置然后去修正代碼，一定要拷貝，從你的積木庫中去拷貝，然后修正代碼，把時間利用到高效的思考上。
2 建立自己的"積木庫"。平時在學習過程中，把自己認為有用的代碼放在一起，多積累，在用到的時候，可以隨時拿來。你的積木庫資料越多，你做程序的思路就會越廣。
VBA是利用Office實現(xiàn)個人小型辦公自動化的有效手段（工具）。這是我對VBA的應用界定。在取代OFFICE新的辦公軟件沒有到來之前，誰能在數(shù)據(jù)處理方面做到極致，誰就是王者。其中登峰至極的技能非VBA莫屬！
我記得20年前自己初學VBA時，那時的資料甚少，只能看源碼自己琢磨,真的很難。20年過去了，為了不讓學習VBA的朋友重復我之前的經(jīng)歷，我根據(jù)自己多年VBA實際利用經(jīng)驗，推出了六部VBA專門教程：
第一套：VBA代碼解決方案 是VBA中各個知識點的講解，教程共147講，覆蓋絕大多數(shù)的VBA知識點，初學必備；
第二套：VBA數(shù)據(jù)庫解決方案 數(shù)據(jù)庫是數(shù)據(jù)處理的專業(yè)利器，教程中詳細介紹了利用ADO連接ACCDB和EXCEL的方法和實例操作，適合中級人員的學習。
第三套：VBA數(shù)組與字典解決方案 數(shù)組和字典是VBA的精華，字典是VBA代碼水平提高的有效手段，值得深入的學習，是初級及中級人員代碼精進的手段。
第四套：VBA代碼解決方案之視頻 是專門面向初學者的視頻講解，可以快速入門，更快的掌握這門技能。這套教程是第一套教程的視頻講解，聽元音更易接受。
第五套：VBA中類的解讀和利用 這是一部高級教程，講解類的虛無與肉身的度化，類的利用雖然較少，但仔細的學習可以促進自己VBA理論的提高。這套教程的領會主要是讀者的領悟了，領悟一種佛學的哲理。
第六套教程：《VBA信息獲取與處理》，這是一部高級教程，涉及范圍更廣，實用性更強，面向中高級人員。教程共二十個專題，包括：跨應用程序信息獲得、隨機信息的利用、電子郵件的發(fā)送、VBA互聯(lián)網(wǎng)數(shù)據(jù)抓取、VBA延時操作，剪切板應用、Split函數(shù)擴展、工作表信息與其他應用交互，F(xiàn)SO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數(shù)等等內(nèi)容。
大家可以根據(jù)以上資料1→3→2→6→5或者是4→3→2→6→5的順序逐漸深入的逐漸學習。教程提供講解的同時提供了大量的積木，如需要可以WeChat: NZ9668
如太白詩云：眾鳥高飛盡，孤云獨去閑。相看兩不厭，只有敬亭山。學習的過程也是修心的過程，修一個平靜的心。在代碼的世界中，心平靜了，心情好了，身體自然而然就好。心靜則正，內(nèi)心里沒有那么多邪知邪見，也就沒有那么多妄想。利人就是利己。這些教程也是為幫助大家起航，助上我自己之力，我的上述教程是我多的經(jīng)驗的傳遞，
"水善利萬物而不爭"，綿綿密密，微則無聲，巨則洶涌。學習亦如此，知道什么是自己所需要的，不要蜷縮在一小塊自認為天堂的世界里，待到暮年時再去做自欺欺人的言論。要努力提高自己，用一顆充滿生機的心靈，把握現(xiàn)在，這才是進取。越是有意義的事情，困難會越多。愿力決定始終，智慧決定成敗。不管遇到什么，都是風景。看淡紛爭，看輕得失。茶，滿也好，少也好，不要計較；濃也好，淡也好，其中自有值得品的味道。去感悟真實的時間，靜下心，多學習，積累福報。而不是天天混日子，也不是天天熬日子。在后疫情更加嚴峻的存量殘殺世界中，為自己的生存進行知識的儲備，特別是新知識的儲備。學習時微而無聲，利用時則巨則洶涌。
每一分收獲都是成長的記錄，怎無憑，正是這種執(zhí)著，成就了朝霞的燦爛。最后將一闕詞送給致力于VBA學習的朋友,讓大家感受一下學習過程的枯燥與執(zhí)著：
浮云掠過，暗語無聲，
唯有清風，驚了夢中啼鶯。
望星，疏移北斗，
奈將往事雁同行。
阡陌人，昏燈明暗，
忍顧長亭。
多少VBA人，
暗夜中，悄聲尋夢，盼卻天明。
怎無憑！
回向?qū)W習利用VBA的歷歷往事，不勝感慨，謹以這些文字給大家，分享我多年工作實際經(jīng)驗的成果，隨喜這些有用的東西，給確實需要利用VBA的同路人。
分享成果，隨喜正能量
JavaScript是網(wǎng)絡上最流行的語言。如果你曾經(jīng)使用過JavaScript，那么你會知道開發(fā)和維護一個廣泛的應用程序需要付出很多努力。想學習JavaScript框架的小伙伴可以參加Web前端培訓，理論知識和實戰(zhàn)項目一起學，可以獲得快速提升。
那么，你使用JavaScript框架和庫嗎?JavaScript框架支持結(jié)構(gòu)、HTTP請求等等。這是一個用于構(gòu)建web應用程序的完整工具箱。Javascript庫是一組簡化開發(fā)過程的函數(shù)、方法或特性。
2023年最佳JavaScript前端框架和庫
1.Svelte
Svelte是一個用于構(gòu)建UI組件的JavaScript框架。就像React、Angular或Vue一樣。但與同行不同的是，Svelte是一個編譯器，同行向瀏覽器提供JavaScript運行時以使代碼正常工作。
Svelte將你喜歡的聲明性代碼轉(zhuǎn)換為與本機瀏覽器API無縫配合的命令式代碼，從而在緊湊的包中生成高效的代碼
2.Solid
Solid是一個聲明性JavaScript框架，旨在構(gòu)建快速UI，同時保持對反應性的最大控制。它由Ryan Carneto于2018年開發(fā)，因其實用性和卓越的性能而在開發(fā)者中廣受歡迎。
從表面上看，Solid與React有許多相似之處，因為組件都是為UI返回JSX的JavaScript函數(shù)。然而，與React不同，它沒有虛擬DOM。在Web前端培訓中，有很多關于Solid框架的學習和各種技能的使用，全面系統(tǒng)的課程，封閉式學習，專業(yè)老師面授指導教學，可以在學習上少走很多彎路。
Solid使用一個編譯器，很像Svelte，它把你的代碼轉(zhuǎn)換成普通的JavaScript，讓你更接近DOM。
該框架本身是輕量級的，只有6.7KB，在運行時性能基準測試中表現(xiàn)出色，不需要在代碼中使用任何額外的技巧或非傳統(tǒng)的技巧。
最重要的是，Solid是真正反應性的，因為函數(shù)組件只被調(diào)用一次。
3.Qwik
Qwik是一個web框架，與其他框架一樣，它呈現(xiàn)一個組件樹來創(chuàng)建一個交互式應用程序。然而，其獨特性在于其實現(xiàn)目標的方法。
Qwik旨在通過兩個主要策略提供即時啟動應用程序，甚至是在移動設備上:
l 盡可能延遲JavaScript的執(zhí)行和下載。
l 在服務器上序列化應用程序和框架的執(zhí)行狀態(tài)，并在客戶機上恢復它。
它的目標是最小化應用程序的下載和執(zhí)行需求。更多關于Qwik的相關知識，可以考慮通過參加web前端培訓來學習，有專業(yè)老師指導，有全面系統(tǒng)的課程，學起來又快又輕松。
Qwik應用程序啟動很快，因為JavaScript代碼執(zhí)行很少。最簡單的形式是，Qwik應用程序只需要1KB的JavaScript就可以實現(xiàn)交互。
4.React
React是一個廣泛使用的JavaScript庫，用于構(gòu)建用戶界面，由Facebook開發(fā)和維護。
它提供了一種聲明式的編程方法，使開發(fā)人員更容易推斷應用程序的狀態(tài)并預測其行為。
React擁有強大的生態(tài)系統(tǒng)和社區(qū)，提供了豐富的工具、庫和資源來支持開發(fā)人員創(chuàng)建健壯的應用程序。
React采用了組件的概念，組件是可重用的代碼片段，可以很容易地組合起來構(gòu)建復雜的ui。
React中的組件是返回JSX的JavaScript函數(shù)，這是JavaScript的語法擴展，類似于HTML。
JSX用于定義用戶界面的結(jié)構(gòu)和外觀。
React的性能優(yōu)化策略基于虛擬DOM，它是實際DOM的內(nèi)存表示。在Web前端培訓中，你會學到很多前端框架和庫的使用技巧，包括React.js，提升自己的前端開發(fā)能力。
5.Vue
Vue.js是一個漸進的JavaScript框架，用于構(gòu)建既可接近又通用的用戶界面。它由Evan You于2014年創(chuàng)建，以其簡單、易于集成和強大的性能而廣受歡迎。
Vue.js允許開發(fā)人員構(gòu)建小型到大型的應用程序，同時保持組件和邏輯之間關注點的清晰分離。
像React和Solid一樣，Vue.js組件是JavaScript函數(shù)，它返回一個模板來定義UI的結(jié)構(gòu)。
Vue.js使用類似HTML的模板語法，帶有綁定數(shù)據(jù)和處理事件的指令。這使得閱讀和理解UI的結(jié)構(gòu)變得容易，即使對于那些不熟悉Vue.js的人來說也是如此。
Vue.js使用的是反應式數(shù)據(jù)系統(tǒng)，這意味著當數(shù)據(jù)發(fā)生變化時，UI會自動更新。
結(jié)論
總之，為你的項目選擇正確的JavaScript框架取決于各種因素，如性能、易用性、學習曲線和特定需求。每個框架都有其優(yōu)點和缺點，因此選擇正確的框架最終取決于項目的獨特需求和約束。在選擇最合適的框架之前，仔細評估你的個人需求和項目需求是至關重要的，這可以確保開發(fā)過程的順利和成功。參加web前端培訓，可以幫助你快速掌握框架的使用技能，更好地進行開發(fā)工作。
項目中，我們有時需要封裝一些組件，為了高內(nèi)聚，我們有時可以把文件都寫法一個js文件中。vite官方給我們提供了jsx寫法插件 @vitejs/plugin-vue-jsx，并且可以隨便找個css in js 庫，這里我用@styils/vue
使用插件步驟：
npm i @vitejs/plugin-vue-jsx
npm i @styils/vue//vite.config.js
// 引入jsx官方插件
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [
//更多配置看github
vueJsx({
include:/\.[jt]s$/
})
]
})示例：
// App.vue
<template>
<div>
<el-button @click="Alerst" type="primary">彈框</el-button>
</div>
</template>
<script setup>
import { alert } from './utils/Alert'
const messageProp = '彈出框數(shù)據(jù)'
const Alerst = () => {
alert(messageProp)
}
</script>// src/utils/Alert/index.js
import { render } from 'vue'
import { styled } from '@styils/vue';
export const alert = (propsData) => {
//創(chuàng)建一個有樣式div
const Mydiv = styled('div', {
position: "fixed",
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
})
const container = document.createElement('div')
document.body.appendChild(container)
const VNode = (
<Mydiv> //替換原來沒有樣式的<div>
<h1>登錄成功</h1>
<p>{propsData}</p>
<button onClick={() => {
container.remove();
}}>關閉</button>
</Mydiv>
)
render(VNode, container)
}效果
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
