核心要點(diǎn)

• 利用 JavaScript 增強(qiáng)結(jié)構(gòu)化標(biāo)記可以顯著提升網(wǎng)頁內(nèi)容的可訪問性和可維護(hù)性，同時(shí)減小文件大小。
• JavaScript 可有效地用于為 HTML 元素動(dòng)態(tài)添加功能，例如使用 cite 屬性自動(dòng)在塊引用中插入引用鏈接。
• 將 JavaScript 與結(jié)構(gòu)化標(biāo)記集成，可以創(chuàng)建動(dòng)態(tài)用戶界面，例如無需頁面刷新的選項(xiàng)卡面板。
• 確保 JavaScript 增強(qiáng)功能不會妨礙網(wǎng)頁的基本功能至關(guān)重要；即使禁用 JavaScript，頁面也應(yīng)保持功能正常。
• 可以使用高級 JavaScript 技術(shù)（如事件處理和 DOM 操作）而不干擾現(xiàn)有腳本或?yàn)g覽器默認(rèn)設(shè)置，從而確保兼容性并增強(qiáng)用戶體驗(yàn)。

幾年前，編寫 HTML 的關(guān)鍵技能是掌握足夠的表格技巧，以說服兩個(gè)主要的瀏覽器或多或少地按照你的意愿執(zhí)行?，F(xiàn)代 Web 則大相徑庭，你的標(biāo)記質(zhì)量取決于你如何熟練地使用標(biāo)題、段落和列表等結(jié)構(gòu)元素來描述你的內(nèi)容。這種方法的好處已被多次解釋：更易于維護(hù)的代碼、更小的文件大小、更好的可訪問性以及能夠從單個(gè)樣式表控制網(wǎng)站的外觀和感覺，而不是在跨多個(gè)頁面的龐大標(biāo)記塊中進(jìn)行修改。一個(gè)不太常被討論的優(yōu)勢是，結(jié)構(gòu)良好的標(biāo)記為基于客戶端 Web 第三方技術(shù)——JavaScript 的額外網(wǎng)站增強(qiáng)打開了大門。本文將探討 JavaScript 和結(jié)構(gòu)良好的標(biāo)記可以協(xié)同工作的兩種方式。第一個(gè)示例將展示如何通過連接到其 cite 屬性來增強(qiáng)塊引用。第二個(gè)示例將演示一個(gè)“最佳實(shí)踐”腳本，用于構(gòu)建鏈接，這些鏈接可切換頁面上可見的面板。

塊引用引用

對于我們的第一個(gè)示例，讓我們來看一下不起眼的塊引用元素。該元素經(jīng)常被誤用于應(yīng)用縮進(jìn)，但其正確的用法是標(biāo)記應(yīng)在視覺上與周圍文本分開的引用。起始塊引用標(biāo)簽可以帶有一個(gè)可選的 cite 屬性，該屬性應(yīng)包含引文來源頁面的 URL。 cite 屬性的唯一問題是瀏覽器完全忽略它。標(biāo)記純粹主義者可能會欣賞它，但從純粹的實(shí)用角度來看，使用它除了獲得使用正確標(biāo)記的滿足感外，沒有任何好處。這就是 JavaScript 的用武之地。使用 DOM，可以在具有 cite 屬性的任何塊引用的底部添加指向引文來源的鏈接。以下是執(zhí)行此操作的函數(shù)代碼：

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

讓我們仔細(xì)看看函數(shù)的主體。

var quotes = document.getElementsByTagName('blockquote');

這行代碼使用 DOM 方法 getElementsByTagName 查找當(dāng)前頁面中的所有塊引用元素，并將它們賦值給名為 quotes 的數(shù)組（實(shí)際上是 HTMLCollection，但它是一個(gè)行為類似于數(shù)組的數(shù)據(jù)結(jié)構(gòu)）。

for (var i = 0; i < quotes.length; i ) { ... }

現(xiàn)在我們正在遍歷收集到的塊引用節(jié)點(diǎn)。每次循環(huán)，我們都使用 getAttribute 方法從元素中檢索 cite 屬性。如果已設(shè)置 cite 屬性，我們將繼續(xù)進(jìn)行有趣的部分：在引文底部創(chuàng)建一個(gè)“來源”鏈接。

var a = document.createElement('a'); a.setAttribute('href', cite); a.setAttribute('title', cite);

當(dāng)我們想要使用 DOM 動(dòng)態(tài)地向頁面添加新的 HTML 元素時(shí)，正確的做法是使用 createElement 方法以編程方式創(chuàng)建這些元素。上面的幾行代碼創(chuàng)建了一個(gè)新的 'a' 元素，并為其分配了 href 和 title 屬性，這兩個(gè)屬性都設(shè)置為引文的 URL。

a.appendChild(document.createTextNode('Source'));

我們希望鏈接元素包含一些用戶可以點(diǎn)擊以激活鏈接的文本。原始文本節(jié)點(diǎn)是使用 createTextNode 方法創(chuàng)建的。DOM 將 HTML 元素視為構(gòu)成一棵樹，因此要將文本添加到我們新創(chuàng)建的鏈接，我們需要調(diào)用其 appendChild 方法。

var p = document.createElement('p'); p.className = 'blockquotesource'; p.appendChild(a);

為了允許我們使用 CSS 靈活地設(shè)置新鏈接的樣式，我們可以將其包裝在一個(gè)段落元素中。上面的代碼創(chuàng)建了這樣一個(gè)元素，將其類設(shè)置為“blockquotesource”以提供 CSS 掛鉤，然后使用 appendChild 將鏈接添加到其中。此時(shí)，我們構(gòu)建的新文檔片段等效于以下 HTML：

<code><p> <a href="http://www.miracleart.cn/link/a725c77dfdec0a53250d0709ed36e1fe" title="http://www.miracleart.cn/link/a725c77dfdec0a53250d0709ed36e1fe">Source</a> </p> Source

目前，我們的片段仍然不可見，因?yàn)殡m然我們在內(nèi)存中創(chuàng)建了它，但我們尚未將其附加到我們的文檔中。函數(shù)中的最后一行就是這么做的：

quotes[i].appendChild(p);

quotes[i]appendChild 是我們當(dāng)前正在處理的塊引用元素。

將我們的新段落附加到塊引用，從而使其可見。

還有兩個(gè)步驟。首先，我們需要在頁面首次加載時(shí)運(yùn)行上述函數(shù)。實(shí)現(xiàn)這一點(diǎn)的方法有很多。最簡單的方法是將對該函數(shù)的調(diào)用添加到文檔主體元素的 onload 屬性中：

這可以正常工作，但我們可以做得更好。由于我們的 JavaScript 函數(shù)將托管在外部文件中，那么外部文件也導(dǎo)致函數(shù)運(yùn)行豈不是更有意義？天真的做法是用下面的 JavaScript 代碼：

window.onload = extractBlockquoteCitations;

//

請注意，我們提供了函數(shù)的名稱，但忽略了末尾的 ()，這將導(dǎo)致函數(shù)執(zhí)行。JavaScript 支持函數(shù)式編程風(fēng)格，這意味著函數(shù)可以像任何其他數(shù)據(jù)對象一樣被傳遞作為參數(shù)、存儲在數(shù)據(jù)結(jié)構(gòu)中，甚至可以從其他函數(shù)返回。我將在以后的文章中更多地討論這個(gè)主題，但結(jié)果是將函數(shù)賦值給 window.onload 將導(dǎo)致它在頁面加載完成后執(zhí)行。

然而，此解決方案也存在一個(gè)缺點(diǎn)。如果你想在一個(gè)給定的頁面上使用多個(gè)在頁面加載完成后執(zhí)行的腳本，那么最后一個(gè)向 window.onload 注冊自身的腳本將是唯一執(zhí)行的腳本。真正需要的是一種方法，可以在不覆蓋已有的內(nèi)容的情況下將我們的函數(shù)附加到窗口對象的 onload 處理程序。不幸的是，Internet Explorer 和其他瀏覽器在如何處理這種動(dòng)態(tài)事件附加方面有所不同；幸運(yùn)的是，Scott Andrew 發(fā)布了一個(gè)可以處理這些差異的函數(shù)。以下是該函數(shù)：

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

以下是將我們的 blockquotes 函數(shù)添加到窗口對象的 load 事件的代碼：

addEvent(window, 'load', extractBlockquoteCitations);

最后一步是用 CSS 設(shè)置引文的樣式。這是一個(gè)處理塊引用的相對簡單的 CSS 代碼片段：

function addEvent(obj, evType, fn){
    if (obj.addEventListener){
        obj.addEventListener(evType, fn, false);
        return true;
    } else if (obj.attachEvent){
        var r = obj.attachEvent("on"+evType, fn);
        return r;
    } else {
        return false;
    }
}

成品可以在這里查看。

面板切換

現(xiàn)在，讓我們考慮一個(gè)更高級的動(dòng)態(tài)效果——面板切換器。這里的目標(biāo)是在頁面上放置多個(gè)面板（使用 div 標(biāo)記），一次只顯示一個(gè)面板。一組始終可見的鏈接可用于選擇當(dāng)前顯示的面板。這對于構(gòu)建類似于選項(xiàng)卡式界面以瀏覽一系列相關(guān)屏幕非常有用，而無需每次選擇選項(xiàng)卡時(shí)都刷新頁面。

每當(dāng)使用 JavaScript 增強(qiáng)頁面時(shí)，需要記住一個(gè)好規(guī)則，即即使禁用 JavaScript，頁面也必須仍然可用。在這種情況下，這意味著理想的解決方案應(yīng)該在啟用 JavaScript 時(shí)按廣告宣傳的那樣工作，但在非 JavaScript 環(huán)境中應(yīng)在頁面上顯示所有面板，每個(gè)鏈接都直接鏈接到相關(guān)面板，并使用 URL 片段。

那么，這是可能工作的最簡單的標(biāo)記：

`Panel 1 | Panel 2

`

令人驚訝的是，以上幾乎是我們?yōu)榱藪煦^一些 JavaScript 以創(chuàng)建所需效果而需要的全部標(biāo)記。我們可以繼續(xù)使用上面的代碼，但是讓我們向鏈接添加一個(gè)類，以明確說明我們希望對它們執(zhí)行特殊操作：

<a href="http://www.miracleart.cn/link/65dfa16ba6de9bdb34ea435c9fe2a425" class="toggle">Panel 1</a> | <a href="http://www.miracleart.cn/link/379d08c7a38df48c777c07ea990a3bcf" class="toggle">Panel 2</a>

//

以下是 JavaScript 的工作方式。當(dāng)頁面加載時(shí)，腳本將掃描頁面上的所有鏈接，查找其類中包含“toggle”的任何鏈接。對于找到的任何鏈接，將檢查 href 屬性，并將其中指定的元素定位并添加到目標(biāo)元素?cái)?shù)組中。除了第一個(gè)元素之外，所有其他元素都將“關(guān)閉”，因此當(dāng)頁面加載時(shí)，只有第一個(gè)面板將保持可見。鏈接本身將附加 JavaScript 事件處理程序，以便在激活它們時(shí)，可以顯示其相應(yīng)的面板。

完整的腳本可以在這里查看。以下是代碼工作原理的逐步講解。

var et_toggleElements = [];

第一行創(chuàng)建了一個(gè)全局空數(shù)組，它將保存頁面上面板元素的引用。因?yàn)榇四_本具有全局變量和許多函數(shù)，我們將每個(gè)函數(shù)都加上前綴“et_”（代表“easy toggle”）——這降低了我們的函數(shù)與同一頁面加載的其他腳本發(fā)生名稱沖突的可能性。

/* Initialisation */ function et_init() { var i, link, id, target, first; first = true; for (i = 0; (link = document.links[i]); i ) { ... }

到目前為止，我們已經(jīng)初始化了一些變量，將 first 標(biāo)志設(shè)置為 true，并開始迭代文檔中的所有鏈接。使用 var 聲明變量非常重要，因?yàn)樗_保變量對函數(shù)是本地的。如果沒有此步驟，它們將是全局可訪問的，并且可能會干擾其他腳本。

if (/btoggleb/.exec(link.className)) { ... }

此條件檢查當(dāng)前鏈接的類中是否包含“toggle”。我們使用正則表達(dá)式，而不是只檢查 link.className == 'toggle'，因?yàn)轭悓傩钥梢园鄠€(gè)類，用空格分隔。/btoggleb/ 是正則表達(dá)式；b 部分匹配“單詞邊界”，它可能是空格或字符串的開頭或結(jié)尾。

id = link.href.split('#')[1];

如果鏈接的類列表中包含 toggle，我們假設(shè)鏈接的目標(biāo)是 URL 片段。

link.href.split('#') 在 # 標(biāo)記處拆分鏈接 href——我們知道我們感興趣的部分在 # 之后，因此我們直接使用 [1] 索引結(jié)果數(shù)組以提取目標(biāo) ID。

target = document.getElementById(id); et_toggleElements[et_toggleElements.length] = target;

在這里，我們做出了另一個(gè)假設(shè)——鏈接指示的元素確實(shí)存在。我們使用 getElementById() 方法獲取該元素，然后通過將其分配給等于數(shù)組當(dāng)前長度的數(shù)組索引來將其添加到我們的元素?cái)?shù)組中。這是有效的，因?yàn)閿?shù)組從 0 開始索引，但數(shù)組長度從 1 開始計(jì)數(shù)；因此，數(shù)組的長度也是數(shù)組中下一個(gè)空槽的索引。

if (first) { first = false; } else { target.style.display = 'none'; }

這就是我們前面定義的 first 標(biāo)志發(fā)揮作用的地方。我們希望網(wǎng)站上的第一個(gè)面板保持可見，而其他面板使用 JavaScript 等效于 CSS 中的“display: none”來隱藏。該標(biāo)志允許我們做到這一點(diǎn)。

link.onclick = et_toggle;

最后，我們將 et_toggle 函數(shù)分配給鏈接的 onclick 事件，導(dǎo)致每次激活鏈接時(shí)調(diào)用該函數(shù)。下一步是定義該函數(shù)。

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

再次，我們使用 split 方法從鏈接中提取 ID。

現(xiàn)在我們知道要顯示哪個(gè)面板了，我們可以遍歷我們的元素?cái)?shù)組，關(guān)閉除 ID 與所需面板的 ID 匹配的元素之外的所有其他元素。

通過返回 false，我們阻止鏈接在激活時(shí)實(shí)際被跟隨，這可能會導(dǎo)致在瀏覽器中查看的頁面上出現(xiàn)不希望的跳轉(zhuǎn)。

最后一步是使用前面描述的 addEvent 函數(shù)將 et_init 函數(shù)注冊到窗口的 load 事件中。

addEvent(window, 'load', et_init);

你可以在此處查看運(yùn)行中的完成代碼。

結(jié)論

在本文中，我們看到了結(jié)構(gòu)良好的標(biāo)記可以與 JavaScript 和 W3C DOM 配合使用以實(shí)現(xiàn)有用效果的兩種方式。我希望這篇文章能激勵(lì)你尋找使用 JavaScript 和智能標(biāo)記的新方法。

進(jìn)一步閱讀

還有許多其他基于結(jié)構(gòu)化標(biāo)記的 JavaScript 效果的優(yōu)秀示例。以下是一些值得關(guān)注的示例：

• Aaron Boodman 的 Labels.js
• Stuart Langridge 的 Nice Titles
• Stuart Langridge 的 aqLists
• Stuart Langridge 的 sorttable
• Peter Paul-Koch 的 Table of Contents

關(guān)于 JavaScript 中結(jié)構(gòu)化標(biāo)記的常見問題

什么是 JavaScript 中的結(jié)構(gòu)化標(biāo)記？

JavaScript 中的結(jié)構(gòu)化標(biāo)記是指使用 HTML 元素來描述 Web 文檔的內(nèi)容和結(jié)構(gòu)。這些元素包括標(biāo)題、段落、列表等等。JavaScript 可以操作這些元素來創(chuàng)建動(dòng)態(tài)和交互式的網(wǎng)頁。例如，JavaScript 可以更改 HTML 元素的內(nèi)容，更改 HTML 元素的樣式 (CSS)，甚至添加新的 HTML 元素。

JavaScript 如何與 HTML 元素交互？

JavaScript 通過文檔對象模型 (DOM) 與 HTML 元素交互。DOM 表示網(wǎng)頁的結(jié)構(gòu)，JavaScript 可以操作它。例如，JavaScript 可以使用 document.createTextNode() 方法創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)，然后將其附加到現(xiàn)有的 HTML 元素。

JavaScript 中的文本節(jié)點(diǎn)是什么？

JavaScript 中的文本節(jié)點(diǎn)是一種節(jié)點(diǎn)類型，它表示元素或?qū)傩缘奈谋緝?nèi)容。它可以使用 document.createTextNode() 方法創(chuàng)建。此方法創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)，可以將其附加到現(xiàn)有的 HTML 元素，允許你動(dòng)態(tài)地向網(wǎng)頁添加文本。

如何將 JavaScript 添加到 HTML？

可以通過幾種方法將 JavaScript 添加到 HTML。可以使用 <script></script> 標(biāo)簽直接將其包含在 HTML 文件中，或者可以使用 <script></script> 標(biāo)簽的 src 屬性鏈接到外部 JavaScript 文件。還可以使用 onclick 或 onload 等事件屬性在發(fā)生特定事件時(shí)運(yùn)行 JavaScript 代碼。

如何使用 document.createTextNode() 方法？

document.createTextNode() 方法用于創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)。首先使用要添加的文本作為參數(shù)調(diào)用此方法。這將返回一個(gè)新的文本節(jié)點(diǎn)，然后可以使用 appendChild() 方法將其附加到現(xiàn)有的 HTML 元素。

什么是文檔對象模型 (DOM)？

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它將文檔的結(jié)構(gòu)表示為對象的樹，每個(gè)對象代表文檔的一部分。JavaScript 可以與 DOM 交互以操作網(wǎng)頁的內(nèi)容和結(jié)構(gòu)。

如何使用 JavaScript 更改 HTML 元素的內(nèi)容？

可以使用 JavaScript 中的 innerHTML 屬性更改 HTML 元素的內(nèi)容。此屬性可用于獲取或設(shè)置元素的 HTML 內(nèi)容。例如，如果有一個(gè) id 為“myElement”的元素，則可以像這樣更改其內(nèi)容：document.getElementById('myElement').innerHTML = 'New content';。

如何使用 JavaScript 更改 HTML 元素的樣式？

可以使用 JavaScript 中的 style 屬性更改 HTML 元素的樣式。此屬性是一個(gè)對象，其中包含元素的所有 CSS 屬性。例如，如果有一個(gè) id 為“myElement”的元素，則可以像這樣更改其顏色：document.getElementById('myElement').style.color = 'red';。

如何使用 JavaScript 添加新的 HTML 元素？

可以使用 JavaScript 中的 createElement() 方法添加新的 HTML 元素。此方法創(chuàng)建一個(gè)新元素，然后可以使用 appendChild() 方法將其附加到現(xiàn)有元素。例如，可以創(chuàng)建一個(gè)新的段落并將其添加到文檔的主體中，如下所示：var p = document.createElement('p'); document.body.appendChild(p);。

JavaScript 中的事件屬性是什么？

JavaScript 中的事件屬性用于定義在發(fā)生特定事件時(shí)要運(yùn)行的 JavaScript 代碼。這些事件可能包括單擊按鈕 (onclick)、頁面加載 (onload) 或鼠標(biāo)移到元素上 (onmouseover) 等。事件的代碼直接在 HTML 元素的屬性中定義。

以上是用JavaScript增強(qiáng)結(jié)構(gòu)標(biāo)記的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！