核心要點

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

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

塊引用引用

對于我們的第一個示例，讓我們來看一下不起眼的塊引用元素。該元素經(jīng)常被誤用于應用縮進，但其正確的用法是標記應在視覺上與周圍文本分開的引用。起始塊引用標簽可以帶有一個可選的 cite 屬性，該屬性應包含引文來源頁面的 URL。 cite 屬性的唯一問題是瀏覽器完全忽略它。標記純粹主義者可能會欣賞它，但從純粹的實用角度來看，使用它除了獲得使用正確標記的滿足感外，沒有任何好處。這就是 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);
        }
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

quotes[i].appendChild(p);

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

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

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

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

window.onload = extractBlockquoteCitations;

//

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

然而，此解決方案也存在一個缺點。如果你想在一個給定的頁面上使用多個在頁面加載完成后執(zhí)行的腳本，那么最后一個向 window.onload 注冊自身的腳本將是唯一執(zhí)行的腳本。真正需要的是一種方法，可以在不覆蓋已有的內(nèi)容的情況下將我們的函數(shù)附加到窗口對象的 onload 處理程序。不幸的是，Internet Explorer 和其他瀏覽器在如何處理這種動態(tài)事件附加方面有所不同；幸運的是，Scott Andrew 發(fā)布了一個可以處理這些差異的函數(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 設置引文的樣式。這是一個處理塊引用的相對簡單的 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)在，讓我們考慮一個更高級的動態(tài)效果——面板切換器。這里的目標是在頁面上放置多個面板（使用 div 標記），一次只顯示一個面板。一組始終可見的鏈接可用于選擇當前顯示的面板。這對于構建類似于選項卡式界面以瀏覽一系列相關屏幕非常有用，而無需每次選擇選項卡時都刷新頁面。

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

那么，這是可能工作的最簡單的標記：

`Panel 1 | Panel 2

`

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

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

//

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

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

var et_toggleElements = [];

第一行創(chuàng)建了一個全局空數(shù)組，它將保存頁面上面板元素的引用。因為此腳本具有全局變量和許多函數(shù)，我們將每個函數(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 標志設置為 true，并開始迭代文檔中的所有鏈接。使用 var 聲明變量非常重要，因為它確保變量對函數(shù)是本地的。如果沒有此步驟，它們將是全局可訪問的，并且可能會干擾其他腳本。

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

此條件檢查當前鏈接的類中是否包含“toggle”。我們使用正則表達式，而不是只檢查 link.className == 'toggle'，因為類屬性可以包含多個類，用空格分隔。/btoggleb/ 是正則表達式；b 部分匹配“單詞邊界”，它可能是空格或字符串的開頭或結(jié)尾。

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

如果鏈接的類列表中包含 toggle，我們假設鏈接的目標是 URL 片段。

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

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

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

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

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

link.onclick = et_toggle;

最后，我們將 et_toggle 函數(shù)分配給鏈接的 onclick 事件，導致每次激活鏈接時調(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)在我們知道要顯示哪個面板了，我們可以遍歷我們的元素數(shù)組，關閉除 ID 與所需面板的 ID 匹配的元素之外的所有其他元素。

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

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

addEvent(window, 'load', et_init);

你可以在此處查看運行中的完成代碼。

結(jié)論

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

進一步閱讀

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

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

關于 JavaScript 中結(jié)構化標記的常見問題

什么是 JavaScript 中的結(jié)構化標記？

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

JavaScript 如何與 HTML 元素交互？

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

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

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

如何將 JavaScript 添加到 HTML？

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

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

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

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

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

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

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

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

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

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

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

JavaScript 中的事件屬性是什么？

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

以上是用JavaScript增強結(jié)構標記的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！