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