大家好，我是 Eric。

為了要探討 WordPress 客製化中的 JavaScript，今天要來說明 DOM 與 jQuery。透過了解 jQuery，我們可以更熟悉「操作 DOM」，讓我們在 WordPress 的客製化發掘更多的可能性。

DOM (Document Object Model)

有關 DOM 的詳細介紹，可以參考這一篇鐵人賽文章。從結論來說，DOM 就是將我們在 HTML 篇章中提到的各種元素，視為 JavaScript 可以操作的物件 (object)。
操作 DOM 元素的方法，有下列幾種：

document.getElementById('ID'); //如 document.getElementsBytagName('site-header');
document.getElementsBytagName('tag'); //如 document.getElementsBytagName('img');
document.getElementsByClassName('className'); //如 document.getElementsByClassName('header-footer-group');
document.querySelector('selector'); //這邊使用 CSS 選擇器，回傳「第一個」物件
document.querySelectorAll('selector'); //這邊使用 CSS 選擇器，回傳所有符合物件

了解如何選擇 DOM 元素後，接著就可以將選擇的元素儲存為變數，來製作各種動態效果。我們以 Twenty Twenty 中 inc/template-tags.php 的第 601 行為例：

<script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script>

上面這段程式碼，讓瀏覽器可以將原本預設的 no-js，改為 js。

很簡短，但是很重要。

jQuery

早期不同瀏覽器對於 JavaScript 的支援程度不一，因此 jQuery 誕生，替不同的 DOM 操作，取得了統一的作法：

$(選擇器);
//或
jQuery(選擇器);

透過 jQuery 這個簡單的方法，我們可以省略掉前一小節冗長的語法。除了選擇元素的方法簡化之外，jQuery 也內建了許多方法，替網頁增加動態效果。以下簡單說明幾種方法：

jQuery 方法 | 說明
------+-------
.animate | 替選擇的物件建立簡單的動畫效果，譬如淡入、淡出等。
.on | 用以取代 JavaScript 的 addEventListener，監聽如點擊 (click)、滑鼠暫留 (mouseover) 等等。
.toggleClass | 用來新增或移除選擇物件的類型 (class)。
.scrollTop | 用來偵測或指定可捲動物件的捲動高度。舉例來說，$(window).scrollTop() 便代表目前整個視窗的捲動高度。
.append | 在指定的選擇器下，增加子元素。

這裡以公司官網為例，我們可以透過下列的語法，製作自動置頂的頁首。

(function ($) {
	$(document).ready(function () {
		$( window ).on( 'scroll', function() {
			if ($(window).scrollTop() >= $("#wpadminbar").height() && !$('#hamburger-menu').hasClass('toggled')) {
				$('#masthead').toggleClass( 'sticky' );
			} else {
				$('#masthead').removeClass( 'sticky' );
			}
		});
	});
})(jQuery);

我們可以看到，透過 on 這個方法，我們去偵測視窗捲動的事件，當視窗捲動的高度大於工具列 (#wpadminbar) 的高度，而且 #hamburger-menu 沒有展開 (toggled) 時，便在主要頁首 (#masthead) 加上 sticky 這個類型。

其中，sticky 的樣式屬性如下：

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 998;
}

另外一個例子，可以參考這個 Codepen，透過這個例子，我們可以進一步了解「操作 DOM」能為我們帶來什麼好處。

<ul id="add-me">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<button id="add-item">Add Item</button>

$("#add-item").on("click",function(){
  $("#add-me").append("<li>Added item</li>");
});

這和 WordPress 有什麼關係

WordPress 在其核心程式碼中，便包含了 jQuery。許多外掛與佈景主題都與 jQuery 脫不了關係。其中 jQuery 提供了非同步處理 (AJAX，用簡單的方式來理解，就是傳送表單時，你的頁面不需要重新整理) 的標準化作法，更是顯著的縮短了撰寫 AJAX 的時間。

儘管近年來隨著 ES6 盛行，瀏覽器對於 JavaScript 的轉譯更為統一，開發人員開始重新回歸一般的 JavaScript 作法，但 jQuery 在 WordPress 的使用至今仍然十分廣泛。

結語

今天我們介紹了 DOM 元素，以及 jQuery。藉由 jQuery，我們可以更快速的操作 DOM 元素，來改變我們需要的元素屬性、樣式與類型。
如今隨著各種前端框架，如 Vue.js 與 React 興起，jQuery 的重要性逐漸被取代，但萬變不離其宗，透過 jQuery 學習操作 DOM，可以讓我們在面對任何前端框架時，都能更快上手。
接下來的幾天，我們會進行更實務的討論。包含如何套用其他函式庫，以及如何藉由函式庫 (library) 為自己的 WordPress 網站增添更多動態效果。