使用 JQuery 在 WordPress 中操作 DOM

已發表: 2023-02-12

由於 WordPress 的開源平台和充滿活力的開發人員社區，為該平台創建主題具有相當廣泛的吸引力。然而，瀏覽構建 WordPress 站點所需的所有元素和內容可能具有挑戰性，這取決於您的編程知識和經驗。

幸運的是，文檔對像模型 (DOM) 可以使操作或瀏覽網站的 HTML 代碼變得更加容易。 DOM 的工作原理是使您能夠創建由各種節點或對象組成的樹。這為使用 jQuery 等 JavaScript 庫更改站點的顯示、結構或功能提供了機會。

在本文中，我們將解釋什麼是 DOM 以及您可能想要使用它的原因。然後，我們將提供一些標準的 jQuery 操作技術，以便在 WordPress 中使用 DOM。讓我們開始吧！

什麼是 DOM？

簡單地說，DOM 是 HTML 的應用程序編程接口 (API)。它創建了一個代表網頁內容和結構的對象樹。它也是一個與平台和語言無關的腳本，這使得它非常通用。當 DOM 以這種方式表示 HTML 源代碼時，它使它可以訪問，以便各種編程語言可以連接到它。

為什麼使用 DOM？

作為 WordPress 用戶，每當您遇到動態交互時，您很可能會看到 DOM 正在運行。這可能包括在提交缺少信息的表單時返回錯誤。內容滑塊是正在使用的 DOM 的另一個示例：

開發人員可以使用 DOM 來更新和更改網頁上幾乎所有的元素。您可以使用它來構建文檔並導航其結構。 DOM 還可用於添加、修改或刪除元素和對象。

使用 JQuery 操作 DOM

需要明確的是，DOM 和 HTML 並不相同，儘管它們應該包含相同的元素。 DOM 是 HTML 源代碼的建模表示，可以通過客戶端 JavaScript 進行更改。

下面，我們將研究 jQuery 庫中用於測試一些 DOM 操作技術的方法。請記住，不同的瀏覽器以自己的方式處理 DOM，但您無需執行任何特殊操作即可開始使用它。所有瀏覽器都使用某種形式的 DOM 來使 JavaScript 可以訪問頁面。

DOM 操作技術

DOM 可以以多種方式使用。為了說明它的靈活性，讓我們看一下可以幫助您開始使用這個有用的 API 的六種技術。

1. Before() 方法

顧名思義，當您想要在另一個目標元素之前插入任何元素時，將使用before()方法，如代碼中所示。

在此示例中，該方法可用於在單擊後在指定元素（例如按鈕）上方添加帶有文本的方形元素：

 $(this).before( "<div class='square'>另一個正方形</div>" );

頁面放置和佈局是使用此方法時要牢記的注意事項。您需要確保您的新元素不會破壞您的佈局或在視覺上造成麻煩。

2. After() 方法

與before()方法允許您在另一個指定元素之前插入元素的方式相同， after()方法允許相反的操作。例如，一旦按鈕被選中，它可以用於在按鈕正下方添加一個元素：

 $(this).after( "<div class='square'>另一個正方形</div>" );

通過像這樣使用 jQuery 操作 DOM 來添加交互式內容是獲得交互性的可靠方法，同時不會在此過程中降低速度。

3. Append() 方法

您可能希望將新元素添加到現有元素上，而不是讓單獨的新元素出現。例如，也許您想添加文本“生日快樂！” 每當單擊特定按鈕時，都會在彩色區域內顯示。

要將新元素附加到目標元素的現有內容，您可以在 HTML 源代碼中插入append() jQuery 命令：

 $( ".box" ).append( "<p>生日快樂！</p>" );

此方法將操作添加到您在字符串中指示的元素的末尾，而不是將其放在之前或之後。在完整 HTML 文檔的上下文中，您可以看到操作是如何發生的：

 <!doctype html>
 <title>例子</title>
 <樣式>
 。盒子 {
 背景：橙色；
 白顏色;
 白顏色;
 寬度：150px；
 填充：20px；
 邊距：10px；
 }
 </樣式>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <腳本>
 $( 函數() {
 $(“按鈕”).click(函數(){
 $(this).after( "<div class='box'>生日快樂！</div>" );
 });
 });
 </腳本>
 <button>創建一個盒子</button>

此技術為您提供了一個在密閉空間內創建交互性的簡單選項。請記住，使用此特定方法，操作將顯示為您指定的元素的擴展，而不是新的單個元素。

4. Prepend() 方法

作為append()方法的平衡， prepend()將向您在 jQuery 命令中指示的任何目標元素的末尾添加一個元素：

 $( ".banner" ).prepend( "<p>生日快樂！</p>" );

在這個例子中，文本“生日快樂！” 將出現在代碼字符串中指示的橫幅的開頭。

值得注意的是，這些方法（包括before() 、 after()和append() ）都是簡單使用的可接受方法。但是，我們確實建議使用其他技術來進行更複雜的插入。

5. Clone() 方法

接下來，就使用 jQuery 操作 DOM 而言， clone()方法是一個非常強大的選項。前面四種技術使您能夠插入元素並四處移動它們，而 clone()使復制元素、將其從其原始位置刪除以及重新插入或追加到其他位置成為可能。

例如，這一行意味著原始的 box 元素將保留在原處，而它的一個克隆將附加到 triangle 元素：

 $( ".box" ).clone().appendTo( ".triangle" );

此方法的缺點是它可能導致元素的id屬性重複。這些屬性是獨一無二的。您可以通過使用類屬性作為標識符並謹慎使用克隆方法來避免此問題。

6. Wrap() 方法

最後，如果您想將一個元素包裹在現有字符串周圍，則 wrap()方法很有用。例如，您可以通過識別類並指示正在實現的結構來將幾個段落包裝在一個新的 HTML 結構中：

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

使用這種技術，您可以在與wrap()字符串中的目標類匹配的任何元素周圍創建一個<div> 。雖然您可以創建幾層深的環繞，但是，您應該確保只有一個最裡面的元素。

DOM 故障排除

在使用 DOM 時，我們想強調一個您需要注意的關鍵方面。為了讓您的頁面保持快速加載並避免不必要的代碼（特別是如果您正在開發主題），您應該注意不要使用任何不屬於 DOM 樹的元素。

如果您不確定某個元素是否是 DOM 的一部分，您可以通過您站點前端的瀏覽器檢查每個元素。您可以檢查頁面上的元素，並確定它們在 DOM 樹中的位置。

當另一個腳本更改了您站點的原始 HTML 時，這尤其有用。否則，您的 HTML 和 DOM 有時可能看起來完全一樣。

探索其他 WP Engine 資源和工具

如果您將 DOM 視為您網站的有機組成部分，一種響應 HTML 源代碼的活資源，那麼它的可訪問性的力量是相當驚人的。這就是為什麼了解 DOM 以及如何使用它來增強您的項目可以幫助您的網站更上一層樓。

使用 jQuery 操作 DOM 凸顯了 WordPress 開源平台的魅力。在 WP Engine，我們了解高質量的開發人員資源如何發揮重要作用。這就是為什麼我們為 WordPres 用戶提供大量幫助以及一流的託管計劃！