HTML 中 DOM的使用，知道這些就夠了

TML DOM (文檔對象模型)

當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。

HTML DOM 定義了用于 HTML 的一系列標(biāo)準(zhǔn)的對象，以及訪問和處理 HTML 文檔的標(biāo)準(zhǔn)方法。通過 DOM，你可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性。

HTML DOM 模型被構(gòu)造為對象的樹：

查找 HTML 元素

//通過 id 查找 HTML 元素
var x=document.getElementById("intro");

//通過標(biāo)簽名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//通過類名找到 HTML 元素
var x=document.getElementsByClassName("intro");

HTML DOM 改變 HTML 內(nèi)容

//改變 HTML 輸出流
document.write(Date());
//絕對不要在文檔加載完成之后使用,用btn點(diǎn)擊事件執(zhí)行 document.write()。這會覆蓋該文檔。

//改變 HTML 內(nèi)容
document.getElementById(id).innerHTML=new HTML

//改變 HTML 屬性
document.getElementById(id).attribute=new value

HTML DOM 改變 CSS

//改變 HTML 樣式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

<h1 id="id1">我的標(biāo)題 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
點(diǎn)我!</button>

HTML DOM 事件

//對事件做出反應(yīng)
<h1 onclick="this.innerHTML='Ooops!'">點(diǎn)擊文本!</h1>

<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊文本!</h1>
</body>


//HTML 事件屬性
<body>
<p>點(diǎn)擊按鈕執(zhí)行 <em>displayDate()</em> 函數(shù).</p>
<button onclick="displayDate()">點(diǎn)我</button>
<script>
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>


//使用 HTML DOM 來分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};

//onchange 事件
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當(dāng)你離開輸入框后，函數(shù)將被觸發(fā)，將小寫字母轉(zhuǎn)為大寫字母。</p>
</body>

HTML DOM 事件監(jiān)聽器

//addEventListener() 方法
<body>
<p>該實(shí)例使用 addEventListener() 方法在按鈕中添加點(diǎn)擊事件。 </p>
<button id="myBtn">點(diǎn)我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
</body>

//向原元素添加事件句柄
<body>
<p>該實(shí)例使用 addEventListener() 方法在按鈕中添加點(diǎn)擊事件。 </p>
<button id="myBtn">點(diǎn)我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

//向同一個元素中添加多個事件句柄
<body>
<p>該實(shí)例使用 addEventListener() 方法向同個按鈕中添加兩個點(diǎn)擊事件。</p>
<button id="myBtn">點(diǎn)我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函數(shù)已執(zhí)行!")
}
</script>
</body>

HTML DOM 元素

在文檔對象模型 (DOM) 中，每個節(jié)點(diǎn)都是一個對象。DOM 節(jié)點(diǎn)有三個重要的屬性，分別是：

nodeName : 節(jié)點(diǎn)的名稱
nodeValue ：節(jié)點(diǎn)的值
nodeType ：節(jié)點(diǎn)的類型

創(chuàng)建新的 HTML 元素

<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

刪除已有的 HTML 元素

<body>
<div id="div1">
	<p id="p1">這是一個段落。</p>
	<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>

以上內(nèi)容整理于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系刪除。

節(jié)內(nèi)容是"VBA信息獲取與處理"教程中第八個專題"VBA與HTML文檔"的第五節(jié)。，希望想掌握這方面知識的朋友能參考我的教程學(xué)習(xí)。

第五節(jié) HTML文檔的訪問端口DOM (Document Object Model)

大家好，我們繼續(xù)對HTML文檔進(jìn)行學(xué)習(xí)，在前幾節(jié)中我們認(rèn)識了網(wǎng)頁文檔上面的各種元素，那么我們又該怎么訪問他們呢，是如何實(shí)現(xiàn)呢？其實(shí)，HTML文檔，提供了訪問其元素的端口，這就是HTML DOM，其定義了一套標(biāo)準(zhǔn)的針對 HTML 文檔的對象訪問或操作的機(jī)制。HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。換言之，HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。

1 HTML DOM (Document Object Model) 對象集合

每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問。Document 對象是 HTML 文檔的根節(jié)點(diǎn)。

特別注意：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進(jìn)行訪問。

集合描述

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)用該元素或該元素對應(yīng)的dom對象。

2 HTML DOM 文檔的節(jié)點(diǎn)及文檔樹

在HTML DOM中，所有事物都是節(jié)點(diǎn)。DOM 是被視為節(jié)點(diǎn)樹的 HTML文檔的每一部分都是節(jié)點(diǎn)，整個文檔被定義為一個文檔節(jié)點(diǎn)，每個標(biāo)簽是一個元素節(jié)點(diǎn)，包含在元素中的文本是文本節(jié)點(diǎn)，每一個元素的屬性是一個屬性節(jié)點(diǎn)。如下：

1）整個文檔是一個文檔節(jié)點(diǎn)

2）每個 HTML 元素是元素節(jié)點(diǎn)

3）HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)

4）每個 HTML 屬性是屬性節(jié)點(diǎn)

5）注釋是注釋節(jié)點(diǎn)

HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹，這時一個非常形象的比喻，根節(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)彼此擁有層級關(guān)系。父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。

網(wǎng)頁文檔，可以說是由元素組合而成的，也可以說是由節(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ū)別，這個需要甚至數(shù)據(jù)結(jié)構(gòu)、類和繼承等知識。可大致理解為，同一個html dom對象，提供的兩個不同接口。如下的程序，你會發(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)建一個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鍵運(yùn)行截圖：

3 HTML DOM 文檔的對象屬性

屬性是節(jié)點(diǎn)（HTML 元素）的值，您能夠獲取或設(shè)置。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。我們看看下面一些常見的屬性：

1）innerHTML 屬性對象內(nèi)部的HTML代碼，是獲取元素內(nèi)容的最簡單方法。innerHTML 屬性對于獲取或替換 HTML 元素的內(nèi)容很有用。

下面的代碼獲取 id="intro" 的 <p> 元素的 innerHTML：

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

2）OuterHtml：對象的HTML代碼，包括對象本身的HTML標(biāo)簽

3）innerText：對象內(nèi)部的文本

4）OuterText：對象的文本，包括對象本身的文本

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

以上只是給出了屬性值，大家在使用的時候要注意。

本節(jié)知識點(diǎn)回向：

什么是HTML DOM文檔的屬性，常用的屬性有哪些。

本節(jié)參考文件：008工作表.xlsm

積木編程的思路內(nèi)涵：

在我的系列書籍中一直在強(qiáng)調(diào)"搭積木"的編程思路，這也是學(xué)習(xí)利用VBA的主要方法，特別是職場人員，更是要采用這種方案。其主要的內(nèi)涵：

1 代碼不要自己全部的錄入。你要做的是把積木放在合適的位置然后去修正代碼，一定要拷貝，從你的積木庫中去拷貝，然后修正代碼，把時間利用到高效的思考上。

2 建立自己的"積木庫"。平時在學(xué)習(xí)過程中，把自己認(rèn)為有用的代碼放在一起，多積累，在用到的時候，可以隨時拿來。你的積木庫資料越多，你做程序的思路就會越廣。

VBA的應(yīng)用界定

VBA是利用Office實(shí)現(xiàn)個人小型辦公自動化的有效手段（工具）。這是我對VBA的應(yīng)用界定。在取代OFFICE新的辦公軟件沒有到來之前，誰能在數(shù)據(jù)處理方面做到極致，誰就是王者。其中登峰至極的技能非VBA莫屬！

我記得20年前自己初學(xué)VBA時，那時的資料甚少，只能看源碼自己琢磨,真的很難。20年過去了，為了不讓學(xué)習(xí)VBA的朋友重復(fù)我之前的經(jīng)歷，我根據(jù)自己多年VBA實(shí)際利用經(jīng)驗(yàn)，推出了六部VBA專門教程：

第一套：VBA代碼解決方案 是VBA中各個知識點(diǎn)的講解，教程共147講，覆蓋絕大多數(shù)的VBA知識點(diǎn)，初學(xué)必備；

第二套：VBA數(shù)據(jù)庫解決方案 數(shù)據(jù)庫是數(shù)據(jù)處理的專業(yè)利器，教程中詳細(xì)介紹了利用ADO連接ACCDB和EXCEL的方法和實(shí)例操作，適合中級人員的學(xué)習(xí)。

第三套：VBA數(shù)組與字典解決方案 數(shù)組和字典是VBA的精華，字典是VBA代碼水平提高的有效手段，值得深入的學(xué)習(xí)，是初級及中級人員代碼精進(jìn)的手段。

第四套：VBA代碼解決方案之視頻 是專門面向初學(xué)者的視頻講解，可以快速入門，更快的掌握這門技能。這套教程是第一套教程的視頻講解，聽元音更易接受。

第五套：VBA中類的解讀和利用這是一部高級教程，講解類的虛無與肉身的度化，類的利用雖然較少，但仔細(xì)的學(xué)習(xí)可以促進(jìn)自己VBA理論的提高。這套教程的領(lǐng)會主要是讀者的領(lǐng)悟了，領(lǐng)悟一種佛學(xué)的哲理。

第六套教程：《VBA信息獲取與處理》，這是一部高級教程，涉及范圍更廣，實(shí)用性更強(qiáng)，面向中高級人員。教程共二十個專題，包括：跨應(yīng)用程序信息獲得、隨機(jī)信息的利用、電子郵件的發(fā)送、VBA互聯(lián)網(wǎng)數(shù)據(jù)抓取、VBA延時操作，剪切板應(yīng)用、Split函數(shù)擴(kuò)展、工作表信息與其他應(yīng)用交互，F(xiàn)SO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數(shù)等等內(nèi)容。

大家可以根據(jù)以上資料1→3→2→6→5或者是4→3→2→6→5的順序逐漸深入的逐漸學(xué)習(xí)。教程提供講解的同時提供了大量的積木，如需要可以WeChat: NZ9668

學(xué)習(xí)VBA是個過程，也需要經(jīng)歷一種枯燥的感覺

如太白詩云：眾鳥高飛盡，孤云獨(dú)去閑。相看兩不厭，只有敬亭山。學(xué)習(xí)的過程也是修心的過程，修一個平靜的心。在代碼的世界中，心平靜了，心情好了，身體自然而然就好。心靜則正，內(nèi)心里沒有那么多邪知邪見，也就沒有那么多妄想。利人就是利己。這些教程也是為幫助大家起航，助上我自己之力，我的上述教程是我多的經(jīng)驗(yàn)的傳遞，

"水善利萬物而不爭"，綿綿密密，微則無聲，巨則洶涌。學(xué)習(xí)亦如此，知道什么是自己所需要的，不要蜷縮在一小塊自認(rèn)為天堂的世界里，待到暮年時再去做自欺欺人的言論。要努力提高自己，用一顆充滿生機(jī)的心靈，把握現(xiàn)在，這才是進(jìn)取。越是有意義的事情，困難會越多。愿力決定始終，智慧決定成敗。不管遇到什么，都是風(fēng)景。看淡紛爭，看輕得失。茶，滿也好，少也好，不要計(jì)較；濃也好，淡也好，其中自有值得品的味道。去感悟真實(shí)的時間，靜下心，多學(xué)習(xí)，積累福報。而不是天天混日子，也不是天天熬日子。在后疫情更加嚴(yán)峻的存量殘殺世界中，為自己的生存進(jìn)行知識的儲備，特別是新知識的儲備。學(xué)習(xí)時微而無聲，利用時則巨則洶涌。

每一分收獲都是成長的記錄，怎無憑，正是這種執(zhí)著，成就了朝霞的燦爛。最后將一闕詞送給致力于VBA學(xué)習(xí)的朋友,讓大家感受一下學(xué)習(xí)過程的枯燥與執(zhí)著：

浮云掠過，暗語無聲，

唯有清風(fēng)，驚了夢中啼鶯。

望星，疏移北斗，

奈將往事雁同行。

阡陌人，昏燈明暗，

忍顧長亭。

多少VBA人，

暗夜中，悄聲尋夢，盼卻天明。

怎無憑！

回向?qū)W習(xí)利用VBA的歷歷往事，不勝感慨，謹(jǐn)以這些文字給大家，分享我多年工作實(shí)際經(jīng)驗(yàn)的成果，隨喜這些有用的東西，給確實(shí)需要利用VBA的同路人。

分享成果，隨喜正能量

過 HTML DOM，您能夠使用節(jié)點(diǎn)關(guān)系在節(jié)點(diǎn)樹中導(dǎo)航。

HTML DOM 節(jié)點(diǎn)列表

getElementsByTagName() 方法返回節(jié)點(diǎn)列表。節(jié)點(diǎn)列表是一個節(jié)點(diǎn)數(shù)組。

下面的代碼選取文檔中的所有 <p> 節(jié)點(diǎn)：

實(shí)例

varx=document.getElementsByTagName("p");

可以通過下標(biāo)號訪問這些節(jié)點(diǎn)。如需訪問第二個 <p>，您可以這么寫：

y=x[1];

嘗試一下 ?

注意：

下標(biāo)號從 0 開始。

HTML DOM 節(jié)點(diǎn)列表長度

length 屬性定義節(jié)點(diǎn)列表中節(jié)點(diǎn)的數(shù)量。

您可以使用 length 屬性來循環(huán)節(jié)點(diǎn)列表：

實(shí)例

x=document.getElementsByTagName("p");for(i=0;i<x.length;i++){document.write(x[i].innerHTML); document.write("<br>");}

實(shí)例解析：

獲取所有 <p> 元素節(jié)點(diǎn)
輸出每個 <p> 元素的文本節(jié)點(diǎn)的值

導(dǎo)航節(jié)點(diǎn)關(guān)系

您能夠使用三個節(jié)點(diǎn)屬性：parentNode、firstChild 以及 lastChild ，在文檔結(jié)構(gòu)中進(jìn)行導(dǎo)航。

請看下面的 HTML 片段：

<html><head><metacharset="utf-8"></head><body><p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實(shí)例演示了節(jié)點(diǎn)的關(guān)系。</p></div></body></html>

首個 <p> 元素是 <body> 元素的首個子元素（firstChild）
<div> 元素是 <body> 元素的最后一個子元素（lastChild）
<body> 元素是首個 <p> 元素和 <div> 元素的父節(jié)點(diǎn)（parentNode）

firstChild 屬性可用于訪問元素的文本：

實(shí)例

<pid="intro">Hello World!</p><script>x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script>

嘗試一下 ?

DOM 根節(jié)點(diǎn)

這里有兩個特殊的屬性，可以訪問全部文檔：

document.documentElement - 全部文檔
document.body - 文檔的主體

實(shí)例

<p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實(shí)例演示了 <b>document.body</b> 屬性。</p></div><script>alert(document.body.innerHTML);</script>

嘗試一下 ?

childNodes 和 nodeValue

除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內(nèi)容。

下面的代碼獲取 id="intro" 的 <p> 元素的值：

實(shí)例

<pid="intro">Hello World!</p><script>txt=document.getElementById("intro").childNodes[0].nodeValue;document.write(txt);</script>

嘗試一下 ?

在上面的例子中，getElementById 是一個方法，而 childNodes 和 nodeValue 是屬性。

在線咨詢

上一篇：第11天｜16天搞定前端，CSS的圓角邊框，讓人賞心悅目
下一篇：技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計(jì)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML 中 DOM的使用，知道這些就夠了

TML DOM (文檔對象模型)

查找 HTML 元素

HTML DOM 改變 HTML 內(nèi)容

HTML DOM 改變 CSS

HTML DOM 事件

HTML DOM 事件監(jiān)聽器

HTML DOM 元素

第五節(jié) HTML文檔的訪問端口DOM (Document Object Model)

1 HTML DOM (Document Object Model) 對象集合

2 HTML DOM 文檔的節(jié)點(diǎn)及文檔樹

3 HTML DOM 文檔的對象屬性

積木編程的思路內(nèi)涵：

VBA的應(yīng)用界定

學(xué)習(xí)VBA是個過程，也需要經(jīng)歷一種枯燥的感覺

您的項(xiàng)目需求